/* treeship.dev shared stylesheet. Extracted verbatim from public/home.html
   on 2026-09-06 so /commerce can share the exact same system. Edit here,
   never inline in a page. */
    /* ─── TOKENS ─────────────────────────────────────── */
        /* Geist and Geist Mono, self-hosted (public/fonts, OFL 1.1). Variable
       WOFF2, Latin subset, one file per family; the weight axis covers every
       weight the pages use. Same-origin, so no third-party request sits in
       front of first paint. */
    @font-face {
      font-family: 'Geist';
      font-style: normal;
      font-weight: 100 900;
      font-display: swap;
      src: url('/fonts/geist-latin.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
      font-family: 'Geist Mono';
      font-style: normal;
      font-weight: 100 900;
      font-display: swap;
      src: url('/fonts/geist-mono-latin.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
:root {
      /* Zerker web design system, adopted 2026-09-07 (see DESIGN.md). */
      --zk-bg:              #f8f8f6;
      --zk-surface:         #ffffff;
      --zk-surface-2:       #f1f1ee;
      --zk-surface-3:       #ebebe7;
      --zk-ink:             #0a0a0a;
      --zk-ink-raised:      #161616;
      --zk-text:            #101010;
      --zk-text-secondary:  #5f6561;
      --zk-text-tertiary:   #7a807b;
      --zk-text-faint:      #a3a8a3;
      --zk-hairline:        #e4e4e0;
      --zk-hairline-strong: #d9d9d4;
      --zk-brand:           #00c805; /* Robinhood green, hue 121: fills, the mark, dark surfaces */
      --zk-accent:          #008503; /* the same hue at AA for text on the warm white (4.5:1) */
      --zk-accent-ink:      #007003;
      --zk-accent-soft:     rgba(0,200,5,0.10);
      --zk-accent-line:     rgba(0,200,5,0.35);
      --zk-success:         #008503; /* verified is the product idea; it shares the accent hue */
      --zk-warning:         #a86f00;
      --zk-danger:          #c2410c;
      --zk-info:            #2d6cdf;
      /* Dark evidence surfaces: terminals, receipts, code. */
      --zk-evidence:        #161616;
      --zk-evidence-raised: #1f1f1f;
      --zk-evidence-ink:    #f0f0ee;
      --zk-evidence-text:   #d5d8d3;
      --zk-evidence-muted:  #9aa09b;
      --zk-evidence-dim:    #6b716c;
      --zk-evidence-hair:   rgba(255,255,255,0.10);
      --zk-shadow-nav:      0 12px 32px rgba(22,22,22,0.08), 0 1px 2px rgba(22,22,22,0.05);
      --zk-shadow-card:     0 16px 40px rgba(22,22,22,0.08), 0 1px 2px rgba(22,22,22,0.05);
      --zk-content:         1080px;
      --zk-reading:         780px;

      /* Legacy names, aliased so every existing rule keeps resolving. */
      --bg:        var(--zk-bg);
      --bg-1:      var(--zk-surface);
      --bg-2:      var(--zk-surface-2);
      --bg-3:      var(--zk-surface-3);
      --border:    var(--zk-hairline);
      --border-2:  var(--zk-hairline-strong);
      --text:      var(--zk-text);
      --text-2:    var(--zk-text-secondary);
      --text-3:    var(--zk-text-tertiary);
      --text-4:    var(--zk-text-faint);
      --teal:      var(--zk-accent);
      --teal-dim:  var(--zk-accent-ink);
      --teal-glow: var(--zk-accent-soft);
      --teal-line: var(--zk-accent-line);
      --amber:     var(--zk-warning);
      --blue:      var(--zk-info);
      --purple:    var(--zk-accent);
      --green:     var(--zk-success);
      --red:       var(--zk-danger);

      --sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', sans-serif;
      --mono: 'Geist Mono', 'SF Mono', ui-monospace, Menlo, monospace;

      --r-sm: 10px;
      --r:    12px;
      --r-lg: 14px;
      --r-xl: 24px;

      --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
      --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    }

    /* Evidence surfaces re-scope the legacy names, so everything written
       for the old dark ground keeps working inside a terminal, a receipt,
       or an identity card, and only there. */
    .terminal-window, .install-card, .hero-receipt, .resolver-card,
    .disclose-pane.verifier, .hero-install-line {
      --bg:       var(--zk-evidence);
      --bg-1:     var(--zk-evidence);
      --bg-2:     var(--zk-evidence-raised);
      --bg-3:     #262626;
      --border:   var(--zk-evidence-hair);
      --border-2: rgba(255,255,255,0.16);
      --text:     var(--zk-evidence-ink);
      --text-2:   var(--zk-evidence-text);
      --text-3:   var(--zk-evidence-muted);
      --text-4:   var(--zk-evidence-dim);
      /* Accent on dark is the brand green itself (8:1 on the evidence
         ground). The other code colors are VS Code Dark+ tokens, the
         theme the docs render code blocks with, so a value reads the same
         colour in a marketing terminal and in a docs code block. */
      --teal:      var(--zk-brand);
      --teal-dim:  #00a804;
      --teal-glow: rgba(0,200,5,0.14);
      --teal-line: rgba(0,200,5,0.35);
      --green:  #b5cea8; /* Dark+ number */
      --amber:  #dcdcaa; /* Dark+ function */
      --red:    #f44747; /* Dark+ error */
      --blue:   #569cd6; /* Dark+ keyword */
      color: var(--text);
    }

    /* ─── RESET ──────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
    body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--sans);
      font-size: 17px;
      line-height: 1.58;
      letter-spacing: -0.011em;
      font-weight: 400;
      -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }
    ul, ol { list-style: none; }
    button { cursor: pointer; border: none; background: none; font: inherit; }

    /* ─── LAYOUT ─────────────────────────────────────── */
    .wrap {
      max-width: var(--zk-content);
      margin-inline: auto;
      padding-inline: clamp(1.25rem, 5vw, 3rem);
    }

    /* ─── NAV ────────────────────────────────────────── */
    /* Anchor targets must clear the fixed nav.
       The nav is `position: fixed` at 60px, and both `scrollIntoView({block:
       "start"})` below and a plain `#hash` land the target at viewport top --
       i.e. underneath the nav, with the section heading hidden behind it. A
       reader clicking "How it works" arrived mid-paragraph with no heading
       visible and no way to tell they were in the right place.

       `scroll-margin-top` fixes both paths at once, which the JS handler
       alone could not: a pasted #hash URL never runs it. */
    [id] { scroll-margin-top: 88px; }
    @media (max-width: 1024px) {
      /* One 56px row on phones and tablets too. */
      [id] { scroll-margin-top: 84px; }
    }
    /* Nothing widens the page: an overflowing block scrolls inside its own
       box or is clipped, never the document. */
    html { overflow-x: clip; }

    .nav {
      position: fixed;
      top: 12px; left: 0; right: 0;
      z-index: 100;
      padding-inline: clamp(0.75rem, 3vw, 1.5rem);
      pointer-events: none;
    }
    .nav-inner {
      pointer-events: auto;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      height: 56px;
      max-width: var(--zk-content);
      margin-inline: auto;
      padding-inline: 1rem 0.5rem;
      background: rgba(255,255,255,0.78);
      border: 1px solid var(--zk-hairline);
      border-radius: 16px;
      box-shadow: var(--zk-shadow-nav);
      backdrop-filter: blur(14px) saturate(1.2);
      -webkit-backdrop-filter: blur(14px) saturate(1.2);
    }
    .nav-logo {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-family: var(--sans);
      font-size: 1.0625rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--text);
    }
    .nav-logo svg { flex-shrink: 0; }
    /* The ink hands off around the nav mark: one node is dark while the
       other two rest, and over a six-second cycle the dark one fades out as
       the next fades in (root, left leaf, right leaf, root). Opacity only;
       nothing moves. Static under prefers-reduced-motion, where the leaves
       keep their resting 0.55. */
    @media (prefers-reduced-motion: no-preference) {
      .nav-node {
        animation: node-handoff 6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
      }
      .nav-node--root  { animation-delay: 0s; }
      .nav-node--left  { animation-delay: -4s; }
      .nav-node--right { animation-delay: -2s; }
      @keyframes node-handoff {
        0%        { opacity: 1; }
        33.333%   { opacity: 0.22; }
        66.666%   { opacity: 0.22; }
        100%      { opacity: 1; }
      }
    }
    .nav-menu { display: contents; }
    .nav-toggle { display: none; }
    .nav-links--external { margin-left: auto; margin-right: 0.35rem; }
    .nav-links--external a { color: var(--text); }
    .nav-links--external a::after {
      content: "\2197"; font-size: 0.7em; margin-left: 0.25em; opacity: 0.45;
    }
    .nav-links {
      display: flex;
      align-items: center;
      gap: 0.25rem;
    }
    .nav-links a {
      white-space: nowrap;
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--text-2);
      padding: 0.45rem 0.8rem;
      border-radius: 999px;
      transition: color 0.15s, background 0.15s;
    }
    .nav-links a:hover { color: var(--text); background: var(--bg-2); }
    .nav-cta {
      white-space: nowrap;
      flex-shrink: 0;
      font-size: 0.875rem;
      font-weight: 600;
      color: #ffffff;
      background: var(--zk-ink);
      padding: 0.5rem 1rem;
      border-radius: 999px;
      transition: opacity 0.15s, transform 0.14s var(--ease-out);
    }
    .nav-cta:hover { opacity: 0.88; }
    .nav-cta:active { transform: scale(0.97); }

    /* ─── HERO ───────────────────────────────────────── */
    .hero {
      padding-top: clamp(7rem, 14vw, 11rem);
      padding-bottom: clamp(4rem, 8vw, 7rem);
      position: relative;
      overflow: hidden;
    }
    /* Dimmed Treeship illustration behind the hero -- brand atmosphere.
       A real element (not a pseudo) because .hero::after is already taken by
       the ambient glow; sits at z-index 0, beneath the glow (1) and the
       content (2). Anchored top and faded out toward the bottom so the copy
       and CTAs stay clean. */
    .hero-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      background: url("/hero-bg.webp") no-repeat center top;
      background-size: 120% auto;
      opacity: 0.24;
      filter: saturate(0.6);
      /* Text never sits on the image: the left column (headline, copy,
         install line) is masked out, the image lives behind the receipt
         and fades before the next section. */
      -webkit-mask-image:
        linear-gradient(to right, transparent 0%, transparent 40%, #000 64%),
        linear-gradient(to bottom, #000 0%, #000 38%, transparent 82%);
      -webkit-mask-composite: source-in;
      mask-image:
        linear-gradient(to right, transparent 0%, transparent 40%, #000 64%),
        linear-gradient(to bottom, #000 0%, #000 38%, transparent 82%);
      mask-composite: intersect;
      pointer-events: none;
    }
    @media (max-width: 860px) {
      .hero-bg {
        opacity: 0.14;
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 70%);
        mask-image: linear-gradient(to bottom, #000 0%, transparent 70%);
      }
    }

    /* The tree as text. Sits behind the receipt column at hairline contrast,
       masked away from the headline column and faded before the next section.
       Off on phones, where the receipt itself is hidden. */
    .hero-ascii {
      position: absolute;
      top: 6%;
      right: -3%;
      z-index: 0;
      margin: 0;
      font: 400 10px/11.4px var(--mono);
      letter-spacing: 0.04em;
      color: color-mix(in srgb, var(--zk-accent) 24%, #a3a39d);
      white-space: pre;
      pointer-events: none;
      user-select: none;
      -webkit-mask-image:
        linear-gradient(to right, transparent 0%, transparent 12%, #000 34%),
        linear-gradient(to bottom, #000 0%, #000 62%, transparent 97%);
      -webkit-mask-composite: source-in;
      mask-image:
        linear-gradient(to right, transparent 0%, transparent 12%, #000 34%),
        linear-gradient(to bottom, #000 0%, #000 62%, transparent 97%);
      mask-composite: intersect;
    }
    @media (max-width: 860px) { .hero-ascii { display: none; } }
    .hero-inner {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: center;
    }
    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-family: var(--mono);
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--zk-accent);
      margin-bottom: 1.5rem;
    }
    .hero-eyebrow span {
      width: 20px;
      height: 1px;
      background: var(--zk-accent);
      opacity: 0.6;
      display: inline-block;
    }
    .hero h1 {
      font-size: clamp(2.75rem, 5.4vw, 4.4rem);
      font-weight: 800;
      line-height: 1.0;
      letter-spacing: -0.043em;
      color: var(--text);
      margin-bottom: 1.5rem;
    }
    .hero h1 em {
      font-style: normal;
      color: var(--teal);
    }
    .hero-sub {
      font-size: 1.125rem;
      color: var(--text-2);
      line-height: 1.65;
      max-width: 44ch;
      margin-bottom: 2.5rem;
    }
    .hero-actions {
      display: flex;
      align-items: center;
      gap: 0.875rem;
      flex-wrap: wrap;
    }
    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.9375rem;
      font-weight: 600;
      color: #ffffff;
      background: var(--zk-ink);
      padding: 0.75rem 1.4rem;
      border-radius: 999px;
      transition: opacity 0.15s, transform 0.14s var(--ease-out);
    }
    .btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
    .btn-primary:active { transform: scale(0.97); }
    .btn-secondary {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.9375rem;
      font-weight: 500;
      color: var(--zk-ink);
      background: var(--zk-surface);
      border: 1px solid var(--zk-hairline-strong);
      padding: 0.75rem 1.4rem;
      border-radius: 999px;
      transition: border-color 0.15s, color 0.15s, transform 0.14s var(--ease-out), box-shadow 0.15s;
    }
    .btn-secondary:hover { border-color: var(--zk-ink); box-shadow: var(--zk-shadow-nav); }
    .btn-secondary:active { transform: scale(0.97); }
    .btn-ghost {
      display: inline-flex;
      align-items: center;
      gap: 0.375rem;
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--text-3);
      transition: color 0.15s;
    }
    .btn-ghost:hover { color: var(--text-2); }

    /* HERO RIGHT: receipt card */
    .hero-receipt {
      background: var(--zk-evidence);
      border: 1px solid var(--zk-evidence-hair);
      border-radius: var(--r-lg);
      overflow: hidden;
      box-shadow: 0 24px 56px rgba(22,22,22,0.22);
    }
    .receipt-header {
      background: var(--bg-2);
      border-bottom: 1px solid var(--border);
      padding: 0.875rem 1.25rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .receipt-dots {
      display: flex;
      gap: 0.4rem;
    }
    .receipt-dots span {
      width: 10px; height: 10px;
      border-radius: 50%;
      background: var(--border-2);
    }
    .receipt-dots span:nth-child(1) { background: #ff5f56; }
    .receipt-dots span:nth-child(2) { background: #ffbd2e; }
    .receipt-dots span:nth-child(3) { background: #27c93f; }
    .receipt-title {
      font-family: var(--mono);
      font-size: 0.6875rem;
      color: var(--text-3);
      font-weight: 500;
    }
    .receipt-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      font-family: var(--mono);
      font-size: 0.6875rem;
      font-weight: 500;
      color: var(--teal);
      background: var(--teal-glow);
      border: 1px solid var(--teal-line);
      padding: 0.2rem 0.5rem;
      border-radius: 4px;
    }
    .receipt-badge::before {
      content: '';
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--teal);
      animation: pulse-dot 2s ease-in-out infinite;
    }
    @keyframes pulse-dot {
      0%, 100% { opacity: 1; }
      50%       { opacity: 0.35; }
    }
    .receipt-body {
      padding: 1.25rem;
      font-family: var(--mono);
      font-size: 0.75rem;
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    .rrow {
      display: flex;
      align-items: flex-start;
      gap: 0;
      padding: 0.45rem 0;
      border-bottom: 1px solid var(--border);
    }
    .rrow:last-child { border-bottom: none; }
    .rrow-key {
      color: var(--text-3);
      width: 130px;
      flex-shrink: 0;
      font-size: 0.6875rem;
    }
    .rrow-val {
      color: var(--text-2);
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 0.6875rem;
    }
    .rrow-val.accent { color: var(--teal); }
    .rrow-val.amber  { color: var(--amber); }
    .rrow-val.green  { color: var(--green); }
    .rrow-val.blue   { color: var(--blue); }
    .receipt-footer {
      padding: 0.875rem 1.25rem;
      border-top: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--bg-2);
    }
    .receipt-footer-label {
      font-family: var(--mono);
      font-size: 0.6875rem;
      color: var(--text-3);
    }
    .receipt-verify-btn {
      font-family: var(--mono);
      font-size: 0.6875rem;
      font-weight: 600;
      color: var(--teal);
      display: flex;
      align-items: center;
      gap: 0.35rem;
      cursor: pointer;
      transition: opacity 0.15s;
    }
    .receipt-verify-btn:hover { opacity: 0.7; }

    /* ─── SECTION BASE ───────────────────────────────── */
    .section {
      padding-block: clamp(4rem, 7vw, 6rem);
      border-top: 1px solid var(--border);
    }
    .section-label {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      font-family: var(--mono);
      letter-spacing: 0.15em;
      font-weight: 500;
      color: var(--text-3);
      margin-bottom: 1rem;
    }
    .section-label::before {
      content: '';
      display: inline-block;
      width: 16px;
      height: 1px;
      background: var(--zk-hairline-strong);
    }
    .section-heading {
      font-size: clamp(1.9rem, 3.8vw, 2.75rem);
      font-weight: 700;
      letter-spacing: -0.035em;
      line-height: 1.15;
      color: var(--text);
      margin-bottom: 0.875rem;
    }
    .section-sub {
      font-size: 1.0625rem;
      color: var(--text-2);
      max-width: 52ch;
      line-height: 1.65;
    }

    /* ─── PRIMITIVES ─────────────────────────────────── */
    .primitives-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      overflow: hidden;
      margin-top: 3rem;
    }
    .prim-card {
      background: var(--bg-1);
      padding: 2rem 1.75rem;
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      transition: background 0.2s;
      position: relative;
    }
    .prim-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: var(--accent-line, var(--border));
      transition: opacity 0.2s;
    }
    .prim-card:hover { background: var(--bg-2); }
    .prim-card[data-accent] { --accent-line: var(--zk-accent); }
    .prim-num {
      font-family: var(--mono);
      font-size: 0.6875rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      color: var(--text-4);
    }
    .prim-icon {
      width: 40px; height: 40px;
      border-radius: var(--r-sm);
      border: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--bg-2);
      color: var(--zk-ink);
    }
    .prim-name {
      font-size: 1.0625rem;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--text);
      line-height: 1.25;
    }
    .prim-desc {
      font-size: 0.875rem;
      color: var(--text-2);
      line-height: 1.6;
    }
    .prim-cli {
      margin-top: auto;
      font-family: var(--mono);
      font-size: 0.6875rem;
      color: var(--teal);
      background: var(--teal-glow);
      border: 1px solid var(--teal-line);
      border-radius: 4px;
      padding: 0.35rem 0.65rem;
      display: inline-block;
    }

    /* ─── WHY SECTION (3-col) ────────────────────────── */
    .why-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.5rem;
      margin-top: 3rem;
    }
    .why-card {
      padding: 2rem;
      background: var(--bg-1);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      display: flex;
      flex-direction: column;
      gap: 1rem;
      transition: border-color 0.2s, background 0.2s;
    }
    .why-card:hover {
      border-color: var(--border-2);
      box-shadow: var(--zk-shadow-card);
    }
    .why-icon {
      width: 44px; height: 44px;
      border-radius: var(--r-sm);
      border: 1px solid var(--border);
      background: var(--bg-2);
      color: var(--zk-ink);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .why-title {
      font-size: 1.0625rem;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--text);
    }
    .why-text {
      font-size: 0.9375rem;
      color: var(--text-2);
      line-height: 1.55;
    }
    /* One mono line under the sentence: the fields the receipt carries.
       The card is a claim plus its evidence, not a paragraph. */
    .why-proof {
      margin-top: auto;
      padding-top: 0.85rem;
      border-top: 1px solid var(--border);
      font-family: var(--mono);
      font-size: 0.72rem;
      letter-spacing: 0.01em;
      color: var(--text-3);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* ─── STATUS PILL ────────────────────────────────── */
    /* Every product claim shows its status on its own line, never inline
       with the title (an inline span wrapped the title at 1280px). */
    .status-pill {
      display: inline-block;
      width: fit-content;
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.01em;
      text-transform: none;
      white-space: nowrap;
      color: var(--zk-accent);
      background: var(--zk-accent-soft);
      border: 1px solid transparent;
      border-radius: 6px;
      padding: 0.22rem 0.5rem;
      line-height: 1.2;
    }
    .status-pill--next { color: var(--zk-warning); background: color-mix(in srgb, var(--zk-warning) 10%, transparent); }
    /* The release a status applies to sits beside the chip, never inside it:
       a chip is one word. */
    .status-since {
      display: inline-block;
      margin-left: 0.4rem;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.01em;
      color: var(--zk-text-secondary);
      white-space: nowrap;
      vertical-align: baseline;
    }
    .why-card .status-pill { margin-top: 0; }
    .why-status { display: flex; align-items: center; gap: 0.4rem; margin-top: -0.35rem; }
    .why-status .status-since { margin-left: 0; }

    /* ─── TLS COMPARISON ─────────────────────────────── */
    .compare-layout {
      display: grid;
      grid-template-columns: 1fr 1.1fr;
      gap: 4rem;
      align-items: start;
      margin-top: 3rem;
    }
    .compare-copy .section-label { margin-bottom: 1rem; }
    .compare-copy .section-heading { margin-bottom: 1rem; }
    .compare-copy p {
      font-size: 0.9375rem;
      color: var(--text-2);
      line-height: 1.7;
      margin-bottom: 1.5rem;
    }
    .compare-table {
      background: var(--bg-1);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      overflow: hidden;
    }
    .ctable-head {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      background: var(--bg-2);
      border-bottom: 1px solid var(--border);
    }
    .ctable-head span {
      font-size: 0.6875rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-3);
      padding: 0.75rem 1.25rem;
    }
    .ctable-head span:not(:last-child) { border-right: 1px solid var(--border); }
    .ctable-row {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      border-bottom: 1px solid var(--border);
    }
    .ctable-row:last-child { border-bottom: none; }
    .ctable-cell {
      font-size: 0.8125rem;
      padding: 0.875rem 1.25rem;
      color: var(--text-2);
      line-height: 1.5;
    }
    .ctable-cell:not(:last-child) { border-right: 1px solid var(--border); }
    .ctable-cell.concept { color: var(--text-3); font-weight: 500; font-size: 0.75rem; font-family: var(--mono); }
    .ctable-cell.highlight { color: var(--teal); font-weight: 600; }

    /* ─── TERMINAL ────────────────────────────────────── */
    .terminal-section .section-heading { max-width: 22ch; }
    .terminal-layout {
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 4rem;
      align-items: center;
      margin-top: 3rem;
    }
    .terminal-features {
      display: flex;
      flex-direction: column;
      gap: 1.75rem;
    }
    .tfeat {
      display: flex;
      gap: 1rem;
      align-items: flex-start;
    }
    .tfeat-num {
      font-family: var(--mono);
      font-size: 0.6875rem;
      font-weight: 700;
      color: var(--teal);
      background: var(--teal-glow);
      border: 1px solid var(--teal-line);
      border-radius: 4px;
      padding: 0.15rem 0.5rem;
      flex-shrink: 0;
      margin-top: 0.15rem;
    }
    .tfeat-body h4 {
      font-size: 0.9375rem;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 0.25rem;
    }
    .tfeat-body p {
      font-size: 0.875rem;
      color: var(--text-2);
      line-height: 1.6;
    }
    .terminal-window {
      background: var(--zk-evidence);
      border: 1px solid var(--zk-evidence-hair);
      border-radius: var(--r-lg);
      overflow: hidden;
      box-shadow: 0 24px 48px rgba(22,22,22,0.18);
    }
    .term-header {
      background: var(--bg-2);
      border-bottom: 1px solid var(--border);
      padding: 0.75rem 1.25rem;
      display: flex;
      align-items: center;
      gap: 1rem;
    }
    .term-dots { display: flex; gap: 0.375rem; }
    .term-dots span { width: 10px; height: 10px; border-radius: 50%; }
    .term-dots span:nth-child(1) { background: #ff5f56; }
    .term-dots span:nth-child(2) { background: #ffbd2e; }
    .term-dots span:nth-child(3) { background: #27c93f; }
    .term-title {
      font-family: var(--mono);
      font-size: 0.6875rem;
      color: var(--text-3);
      flex: 1;
      text-align: center;
    }
    .term-body {
      padding: 1.5rem;
      font-family: var(--mono);
      font-size: 0.75rem;
      line-height: 1.8;
    }
    .term-line { display: flex; gap: 0.75rem; align-items: flex-start; }
    .term-ps { color: var(--teal); flex-shrink: 0; user-select: none; }
    .term-cmd { color: var(--text-2); }

    /* click a command line to copy it: a "copy" hint on hover, "copied" on
       success. Scoped to lines that actually hold a command (not output). */
    .term-line:has(.term-cmd), .install-line:has(.iln-cmd) {
      cursor: pointer; position: relative; padding-right: 4rem;
      border-radius: var(--r-sm); transition: background 0.15s;
    }
    .term-line:has(.term-cmd)::after, .install-line:has(.iln-cmd)::after {
      content: 'copy'; position: absolute; right: 0.7rem; top: 50%; transform: translateY(-50%);
      font: 500 0.58rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--text-4); opacity: 0; transition: opacity 0.15s; pointer-events: none;
    }
    @media (hover: hover) and (pointer: fine) {
      /* background-color, not the shorthand: the shorthand wiped the dark
         evidence ground on .hero-install-line, so the hero command turned
         white on the warm-white page and its text vanished. */
      .term-line:has(.term-cmd):hover, .install-line:has(.iln-cmd):hover { background-color: var(--bg-2); }
      .term-line:has(.term-cmd):hover::after, .install-line:has(.iln-cmd):hover::after { opacity: 1; }
    }
    .term-line.copied::after, .install-line.copied::after { content: 'copied \2713'; color: var(--teal); opacity: 1; }
    .term-comment { color: var(--text-4); font-style: italic; padding: 0.5rem 0 0.15rem; }
    .term-out { color: var(--text-3); padding-left: 1.25rem; }
    .term-out.good { color: var(--green); }
    .term-out.art  { color: var(--teal); }
    .term-out.dim  { color: var(--text-4); }
    .term-out.bad  { color: var(--red); }
    .term-out.warn { color: var(--amber); }
    .term-who { display: inline-block; width: 4.5rem; color: var(--text-4); flex-shrink: 0; }
    .term-gap { height: 0.75rem; }

    /* ─── WHAT IT SIGNS ──────────────────────────────── */
    .signs-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      overflow: hidden;
      margin-top: 3rem;
    }
    .sign-card {
      background: var(--bg-1);
      padding: 1.75rem;
      display: flex;
      flex-direction: column;
      gap: 0.875rem;
      transition: background 0.2s;
    }
    .sign-card:hover { background: var(--bg-2); }
    .sign-num {
      font-family: var(--mono);
      font-size: 0.6875rem;
      font-weight: 700;
      color: var(--text-4);
    }
    .sign-name {
      font-size: 1rem;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -0.01em;
    }
    .sign-text {
      font-size: 0.875rem;
      color: var(--text-2);
      line-height: 1.6;
    }
    .sign-tag {
      font-family: var(--mono);
      font-size: 0.625rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-3);
      background: var(--bg-3);
      border: 1px solid var(--border-2);
      border-radius: 4px;
      padding: 0.25rem 0.6rem;
      display: inline-block;
      width: fit-content;
    }

    /* ─── AGENT RESOLVER ─────────────────────────────── */
    .resolver-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: center;
      margin-top: 3rem;
    }
    .resolver-steps {
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    .rstep {
      display: flex;
      gap: 1.25rem;
      align-items: flex-start;
      padding: 1.75rem 0;
      border-bottom: 1px solid var(--border);
      position: relative;
    }
    .rstep:first-child { padding-top: 0; }
    .rstep:last-child { border-bottom: none; padding-bottom: 0; }
    .rstep-num {
      width: 32px; height: 32px;
      border-radius: 50%;
      border: 1px solid var(--border-2);
      background: var(--bg-2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--mono);
      font-size: 0.6875rem;
      font-weight: 700;
      color: var(--teal);
      flex-shrink: 0;
    }
    .rstep-body h4 {
      font-size: 0.9375rem;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 0.3rem;
    }
    .rstep-body p {
      font-size: 0.875rem;
      color: var(--text-2);
      line-height: 1.6;
    }
    .resolver-card {
      background: var(--bg-1);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      overflow: hidden;
    }
    .resolver-card-header {
      background: var(--bg-2);
      border-bottom: 1px solid var(--border);
      padding: 1rem 1.5rem;
      font-family: var(--mono);
      font-size: 0.75rem;
      color: var(--text-3);
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .resolver-card-header span.dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--teal);
      animation: pulse-dot 2s ease-in-out infinite;
    }
    .resolver-card-body {
      padding: 1.5rem;
      font-family: var(--mono);
      font-size: 0.75rem;
    }
    .rcard-row {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      padding: 0.5rem 0;
      border-bottom: 1px solid var(--border);
    }
    .rcard-row:last-child { border-bottom: none; }
    .rcard-key { color: var(--text-3); font-size: 0.6875rem; }
    .rcard-val { color: var(--text-2); font-size: 0.6875rem; text-align: right; }
    .rcard-val.teal   { color: var(--teal); }
    .rcard-val.green  { color: var(--green); }
    .rcard-val.amber  { color: var(--amber); }

    /* ─── STATS BAR ──────────────────────────────────── */
    .stats-bar {
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      background: var(--bg-1);
    }
    .stats-inner {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      max-width: 1120px;
      margin-inline: auto;
      padding-inline: clamp(1.25rem, 5vw, 3rem);
    }
    .stat-cell {
      padding: 2.25rem 2rem;
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      gap: 0.375rem;
    }
    .stat-cell:last-child { border-right: none; }
    .stat-num {
      font-size: 2.25rem;
      font-weight: 800;
      letter-spacing: -0.045em;
      font-variant-numeric: tabular-nums;
      color: var(--text);
      line-height: 1;
    }
    .stat-num em {
      font-style: normal;
      color: var(--teal);
    }
    .stat-label {
      font-size: 0.8125rem;
      color: var(--text-3);
      font-weight: 500;
    }

    /* ─── RECOGNITION / PRESS ────────────────────────── */
    .press-layout {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 4rem;
      align-items: center;
      margin-top: 3rem;
    }
    .press-quote-wrap {
      background: var(--bg-1);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 2.5rem;
      position: relative;
    }
    .press-quote-mark {
      font-family: Georgia, serif;
      font-size: 5rem;
      color: var(--zk-accent);
      line-height: 0.8;
      margin-bottom: 1rem;
      opacity: 0.35;
    }
    .press-quote-text {
      font-size: 1rem;
      line-height: 1.7;
      color: var(--text-2);
      font-style: italic;
      margin-bottom: 1.5rem;
    }
    .press-source {
      display: flex;
      align-items: center;
      gap: 0.625rem;
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--text-3);
    }
    .press-source a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
    .press-quote-sep { height: 1px; background: var(--border); margin: 1.75rem 0; }
    .open-source-card {
      background: var(--bg-1);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 2.5rem;
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }
    .os-title {
      font-size: 1.375rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--text);
    }
    .os-text {
      font-size: 0.9375rem;
      color: var(--text-2);
      line-height: 1.65;
    }
    .os-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }
    .os-tag {
      font-family: var(--mono);
      font-size: 0.6875rem;
      font-weight: 600;
      color: var(--text-3);
      background: var(--bg-3);
      border: 1px solid var(--border-2);
      border-radius: 4px;
      padding: 0.3rem 0.65rem;
    }

    /* ─── CTA ────────────────────────────────────────── */
    .cta-section {
      padding-block: clamp(4rem, 8vw, 7rem);
      border-top: 1px solid var(--border);
      background: var(--zk-surface);
    }
    .cta-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: center;
    }
    .cta-copy h2 {
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 800;
      letter-spacing: -0.04em;
      line-height: 1.15;
      color: var(--text);
      margin-bottom: 1rem;
    }
    .cta-copy h2 em {
      font-style: normal;
      color: var(--teal);
    }
    .cta-copy p {
      font-size: 1.0625rem;
      color: var(--text-2);
      line-height: 1.65;
      margin-bottom: 2rem;
    }
    .cta-copy .cta-actions {
      display: flex;
      align-items: center;
      gap: 1rem;
      flex-wrap: wrap;
    }
    .install-card {
      background: var(--zk-evidence);
      border: 1px solid var(--zk-evidence-hair);
      border-radius: var(--r-lg);
      overflow: hidden;
    }
    .install-tab-row {
      display: flex;
      border-bottom: 1px solid var(--border);
      background: var(--bg-2);
    }
    .install-tab {
      font-family: var(--mono);
      font-size: 0.6875rem;
      font-weight: 600;
      padding: 0.6rem 1rem;
      color: var(--text-3);
      cursor: pointer;
      border-right: 1px solid var(--border);
      transition: color 0.15s, background 0.15s;
    }
    .install-tab:last-child { border-right: none; }
    .install-tab.active { color: var(--teal); background: var(--bg-1); }
    .install-panel { display: none; padding: 1.5rem; font-family: var(--mono); font-size: 0.8125rem; }
    .install-panel.active { display: block; }
    .install-line {
      display: flex;
      gap: 0.75rem;
      align-items: flex-start;
      margin-bottom: 0.65rem;
    }
    .install-line:last-child { margin-bottom: 0; }
    /* The hero copy of the install line. Same class as the install card so the
       click-to-copy wiring and hover affordance apply unchanged; the wrapper
       gives it a surface, since in the hero it stands alone rather than
       inside a card. */
    .hero-install { margin: 1.25rem 0 1.5rem; max-width: 30rem; }
    .hero-install-line {
      font-family: var(--mono);
      font-size: 0.8125rem;
      background: var(--zk-evidence);
      border: 1px solid var(--zk-evidence-hair);
      border-radius: var(--r);
      padding: 0.75rem 0.9rem;
      margin-bottom: 0.5rem;
    }
    .hero-install-line .iln-cmd { color: var(--text); }
    .hero-install-note {
      font-size: 0.75rem;
      color: var(--text-3);
      margin: 0;
    }
    .hero-install-note a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
    .hero-install-note a:hover { color: var(--text); }
    .iln-ps { color: var(--teal); flex-shrink: 0; }
    .iln-cmd { color: var(--text-2); }
    .iln-comment { color: var(--text-4); font-size: 0.6875rem; padding: 0.35rem 0; }
    .install-card-footer {
      border-top: 1px solid var(--border);
      padding: 0.875rem 1.5rem;
      font-size: 0.75rem;
      color: var(--text-3);
      background: var(--bg-2);
    }
    .install-card-footer a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }

    /* ─── FOOTER ─────────────────────────────────────── */
    footer {
      border-top: 1px solid var(--border);
      background: var(--bg);
    }
    .footer-inner {
      max-width: 1120px;
      margin-inline: auto;
      padding-inline: clamp(1.25rem, 5vw, 3rem);
      padding-block: 3rem;
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr 1fr;
      gap: 3rem;
    }
    .footer-brand p {
      font-size: 0.875rem;
      color: var(--text-3);
      margin-top: 0.875rem;
      line-height: 1.65;
      max-width: 28ch;
    }
    .footer-col h5 {
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-3);
      margin-bottom: 1rem;
    }
    .footer-col ul { display: flex; flex-direction: column; gap: 0.6rem; }
    .footer-col ul li a {
      font-size: 0.875rem;
      color: var(--text-3);
      transition: color 0.15s;
    }
    .footer-col ul li a:hover { color: var(--text-2); }
    .footer-bottom {
      border-top: 1px solid var(--border);
      max-width: 1120px;
      margin-inline: auto;
      padding-inline: clamp(1.25rem, 5vw, 3rem);
      padding-block: 1.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0.8125rem;
      color: var(--text-4);
    }
    .footer-bottom a { color: var(--text-3); transition: color 0.15s; }
    .footer-bottom a:hover { color: var(--text-2); }

    /* ─── ECOSYSTEM (/integrations) ──────────────────── */
    /* One card per system. The card is a claim plus its evidence: a name,
       one sentence, a mono proof line (the install command or the package),
       a one-word status chip with the release beside it, and the two places
       to go next (the guide, the posts). Generated by
       scripts/build-integrations.mjs from data/integrations.json. */
    .eco-hero {
      padding-top: clamp(7rem, 13vw, 10rem);
      padding-bottom: clamp(2.5rem, 5vw, 4rem);
    }
    .eco-hero h1 {
      font-size: clamp(2.6rem, 5.2vw, 4.2rem);
      font-weight: 800;
      letter-spacing: -0.043em;
      line-height: 1.02;
      color: var(--text);
      max-width: 16ch;
      margin-bottom: 1.25rem;
    }
    .eco-hero h1 em { font-style: normal; color: var(--zk-accent); }
    .eco-hero .hero-sub { max-width: 60ch; }
    .eco-stats {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem 2.25rem;
      margin-top: 2.25rem;
      padding-top: 1.5rem;
      border-top: 1px solid var(--border);
    }
    .eco-stat { display: flex; flex-direction: column; gap: 0.2rem; }
    .eco-stat b {
      font-size: 1.75rem;
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1;
      color: var(--text);
      font-variant-numeric: tabular-nums;
    }
    .eco-stat span {
      font-family: var(--mono);
      font-size: 0.7rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-3);
    }
    .eco-jump {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
      margin-top: 1.75rem;
    }
    .eco-jump a {
      font-size: 0.8125rem;
      font-weight: 500;
      color: var(--text-2);
      padding: 0.4rem 0.8rem;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--bg-1);
      transition: color 0.15s, border-color 0.15s;
    }
    .eco-jump a:hover { color: var(--text); border-color: var(--border-2); }

    .eco-section { padding-block: clamp(3rem, 6vw, 4.5rem); }
    .eco-section + .eco-section { border-top: 1px solid var(--border); }
    .eco-section .section-sub { max-width: 62ch; }
    .eco-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.25rem;
      margin-top: 2.25rem;
    }
    .eco-card {
      display: flex;
      flex-direction: column;
      min-width: 0; /* a grid item is min-width:auto, so a nowrap proof line would widen the column */
      gap: 0.9rem;
      padding: 1.5rem 1.5rem 1.25rem;
      background: var(--bg-1);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s var(--ease-out);
    }
    .eco-card:hover { border-color: var(--border-2); box-shadow: var(--zk-shadow-card); }
    .eco-card--adjacent { background: transparent; border-style: dashed; }
    .eco-head { display: flex; align-items: flex-start; gap: 0.85rem; }
    .eco-mark {
      width: 40px; height: 40px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      border-radius: 12px;
      background: var(--zk-accent-soft);
      color: var(--zk-accent);
      font-family: var(--mono);
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 0.04em;
    }
    .eco-card--adjacent .eco-mark { background: var(--bg-2); color: var(--text-3); }
    .eco-title { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; flex: 1; }
    .eco-name {
      font-size: 1.0625rem;
      font-weight: 700;
      letter-spacing: -0.015em;
      color: var(--text);
      line-height: 1.2;
      text-wrap: balance;
    }
    .eco-name a { color: inherit; }
    .eco-name a:hover { color: var(--zk-accent); }
    .eco-vendor {
      font-family: var(--mono);
      font-size: 0.68rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-3);
      line-height: 1.5;
    }
    /* The status is its own line under the vendor, never beside the title:
       a chip in the head row squeezed every long name into three lines. */
    .eco-status { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.3rem; }
    .eco-status .status-pill { margin: 0; }
    .eco-status .status-since { margin-left: 0; }
    .eco-text { font-size: 0.9375rem; color: var(--text-2); line-height: 1.55; }
    .eco-proof {
      min-width: 0;
      max-width: 100%;
      font-family: var(--mono);
      font-size: 0.72rem;
      color: var(--text-3);
      padding: 0.6rem 0.75rem;
      background: var(--bg-2);
      border-radius: 8px;
      line-height: 1.5;
      overflow-wrap: anywhere; /* a long install line wraps in view rather than scrolling out of it */
    }
    .eco-proof b { color: var(--text); font-weight: 500; }
    .eco-tiers { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; }
    .eco-tier {
      display: inline-flex; align-items: center; gap: 0.35rem;
      font-family: var(--mono);
      font-size: 0.68rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-3);
    }
    .eco-tier::before {
      content: ''; width: 7px; height: 7px; border-radius: 999px;
      border: 1px solid var(--border-2); background: transparent;
    }
    .eco-tier--on { color: var(--text-2); }
    .eco-tier--on::before { background: var(--zk-accent); border-color: var(--zk-accent); }
    .eco-tier--soon::before { background: var(--zk-warning); border-color: var(--zk-warning); opacity: 0.7; }
    .eco-foot {
      margin-top: auto;
      display: flex;
      align-items: center;
      gap: 1rem;
      padding-top: 0.9rem;
      border-top: 1px solid var(--border);
      font-size: 0.8125rem;
      font-weight: 500;
    }
    .eco-foot a { color: var(--text); }
    .eco-foot a::after { content: "\2197"; font-size: 0.7em; margin-left: 0.25em; opacity: 0.45; }
    .eco-foot a:hover { color: var(--zk-accent); }
    .eco-foot .eco-none { color: var(--text-3); font-weight: 400; }
    .eco-add {
      margin-top: 2.5rem;
      padding: 1.5rem 1.75rem;
      border: 1px dashed var(--border-2);
      border-radius: var(--r-lg);
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 1rem 2rem;
      color: var(--text-2);
      font-size: 0.9375rem;
    }
    .eco-add code { font-family: var(--mono); font-size: 0.8rem; color: var(--text); }
    @media (max-width: 1024px) { .eco-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 640px) {
      .eco-grid { grid-template-columns: 1fr; gap: 0.9rem; }
      .eco-card { padding: 1.25rem 1.125rem 1rem; }
      .eco-stats { gap: 0.75rem 1.5rem; }
      .eco-stat b { font-size: 1.4rem; }
    }

    /* ─── MOBILE ─────────────────────────────────────── */
    @media (max-width: 1140px) {
      /* Below the width where nine links and a button fit on one line (the
         row needs ~1080px of pill plus the page gutters and a scrollbar), the
         pill is one row of chrome: mark, the primary action, a round menu
         button. The links move into a sheet that drops from under the pill
         over a scrim: a vertical list of full-width rows at least 52px tall
         (a thumb target, not a chip), the sections first, the outbound links
         after a hairline. Tapping the scrim, a link, or Escape closes it; the
         page behind does not scroll while it is open. Without JavaScript
         the same list is simply shown, in flow, under the pill. */
      .nav-inner {
        height: 56px;
        padding-inline: 0.875rem 0.5rem;
        gap: 0.375rem;
      }
      .nav-logo { font-size: 1rem; }
      .nav-cta { margin-left: auto; padding: 0.45rem 0.85rem; font-size: 0.8125rem; }
      /* The menu button is the last thing in the row, top-right, where the
         thumb expects it and where the X lands over the sheet's corner. */
      .nav-toggle {
        order: 10;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        border: 1px solid var(--zk-hairline);
        border-radius: 999px;
        background: transparent;
        cursor: pointer;
        padding: 0 11px;
        color: var(--zk-ink);
        transition: background 0.15s;
      }
      .nav-toggle:active { background: var(--bg-2); }
      .nav-toggle-bar {
        display: block;
        height: 1.5px;
        width: 100%;
        background: currentColor;
        border-radius: 2px;
        transition: transform 0.18s var(--ease-out);
      }
      .nav-open .nav-toggle-bar:first-child { transform: translateY(3.25px) rotate(45deg); }
      .nav-open .nav-toggle-bar:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

      /* The scrim sits under the pill and over the page. */
      .nav-scrim {
        display: none;
        position: fixed;
        inset: 0;
        z-index: -1;
        background: rgba(22, 22, 22, 0.32);
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
        pointer-events: auto;
      }
      .nav-open .nav-scrim { display: block; }

      /* The sheet: a card in the pill's column, directly under it. It is
         positioned against .nav so it stays put while the page is locked. */
      .nav-menu {
        display: none;
        position: absolute;
        top: calc(56px + 8px);
        left: clamp(0.75rem, 3vw, 1.5rem);
        right: clamp(0.75rem, 3vw, 1.5rem);
        max-width: var(--zk-content);
        margin-inline: auto;
        max-height: calc(100dvh - 56px - 8px - 12px - 16px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        flex-direction: column;
        padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
        background: rgba(255,255,255,0.96);
        border: 1px solid var(--zk-hairline);
        border-radius: 16px;
        box-shadow: var(--zk-shadow-nav);
        -webkit-backdrop-filter: blur(14px) saturate(1.2);
        backdrop-filter: blur(14px) saturate(1.2);
        pointer-events: auto;
      }
      .nav-open .nav-menu { display: flex; }
      html:not(.js) .nav-menu {
        display: flex;
        position: static;
        max-height: none;
        margin-top: 0.5rem;
      }
      .nav-links, .nav-links--external {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
      }
      .nav-links--external {
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--zk-hairline);
      }
      .nav-links a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 52px;
        padding: 0.75rem 0.875rem;
        font-size: 1.0625rem;
        font-weight: 500;
        color: var(--text);
        border-radius: 12px;
        transition: background 0.15s;
      }
      .nav-links a:hover, .nav-links a:focus-visible { background: var(--bg-2); color: var(--text); }
      .nav-links a:active { background: var(--zk-hairline); }
      .nav-links--external a { color: var(--text); }
      .nav-links--external a::after { font-size: 0.85em; opacity: 0.5; margin-left: 0.5rem; }

      @media (prefers-reduced-motion: no-preference) {
        .nav-open .nav-menu { animation: nav-sheet-in 0.2s var(--ease-out); }
        .nav-open .nav-scrim { animation: nav-scrim-in 0.2s ease-out; }
        @keyframes nav-sheet-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
        @keyframes nav-scrim-in { from { opacity: 0; } to { opacity: 1; } }
      }
    }
    /* The page behind an open sheet stays where it is. */
    html.nav-locked, html.nav-locked body { overflow: hidden; }
    @media (max-width: 768px) {
      .hero-inner { grid-template-columns: 1fr; }
      .hero-receipt { display: none; }
      .primitives-grid { grid-template-columns: 1fr 1fr 1fr; }
      .why-grid { grid-template-columns: 1fr 1fr; }
      .compare-layout { grid-template-columns: 1fr; }
      .terminal-layout { grid-template-columns: 1fr; }
      .signs-grid { grid-template-columns: 1fr 1fr; }
      .resolver-layout { grid-template-columns: 1fr; }
      .stats-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .stat-cell { min-width: 0; padding: 1.75rem 1.25rem; }
      .stat-cell:nth-child(even) { border-right: none; }
      .stat-cell:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
      .stat-num { font-size: 1.875rem; overflow-wrap: anywhere; }
      .press-layout { grid-template-columns: 1fr; }
      .cta-inner { grid-template-columns: 1fr; }
      .footer-inner { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 520px) {
      .primitives-grid { grid-template-columns: 1fr 1fr; }
      .why-grid { grid-template-columns: 1fr; }
      .signs-grid { grid-template-columns: 1fr; }
      .stats-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .stat-cell { padding: 1.5rem 1rem; }
      .stat-num { font-size: 1.625rem; }
      .footer-inner { grid-template-columns: 1fr; }
    }
    /* selective disclosure */
    .disclose-layout{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;margin-top:2.5rem}
    @media(max-width:820px){.disclose-layout{grid-template-columns:1fr}}
    .disclose-pane{background:var(--bg-1);padding:1.75rem}
    .disclose-pane.verifier{background:var(--bg)}
    .dp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem}
    .dp-title{font:600 0.9rem/1 var(--mono);color:var(--text-2);letter-spacing:-0.01em}
    .dp-tag{font:600 0.62rem/1 var(--mono);letter-spacing:0.14em;text-transform:uppercase;color:var(--text-3);border:1px solid var(--border-2);border-radius:999px;padding:0.35rem 0.6rem}
    .dp-count{font:600 0.72rem/1 var(--mono);color:var(--teal)}
    .cap-row{display:flex;align-items:center;gap:0.75rem;padding:0.7rem 0.85rem;border:1px solid var(--border);border-radius:var(--r);margin-bottom:0.55rem;cursor:pointer;transition:border-color 0.15s,background 0.15s;user-select:none}
    .cap-row:hover{border-color:var(--border-2)}
    .cap-row.on{border-color:var(--teal-line);background:var(--teal-glow)}
    .cap-box{width:16px;height:16px;flex:none;border:1.5px solid var(--text-4);border-radius:4px;display:grid;place-items:center;transition:0.15s}
    .cap-row.on .cap-box{background:var(--teal);border-color:var(--teal)}
    .cap-box svg{opacity:0}.cap-row.on .cap-box svg{opacity:1}
    .cap-name{font:500 0.83rem/1 var(--mono);color:var(--text)}
    .cap-role{margin-left:auto;font:600 0.58rem/1 var(--mono);letter-spacing:0.1em;text-transform:uppercase;color:var(--text-3)}
    .v-row{display:flex;align-items:center;gap:0.6rem;padding:0.7rem 0.85rem;border:1px solid var(--border);border-radius:var(--r);margin-bottom:0.55rem;font:500 0.8rem/1 var(--mono)}
    .v-row.shown{border-color:var(--teal-line);background:var(--teal-glow);color:var(--text)}
    .v-row.hidden{color:var(--text-4);background:rgba(255,255,255,0.03)}
    .v-row .vlk{margin-left:auto;font-size:0.6rem;letter-spacing:0.08em;text-transform:uppercase}
    .v-row.shown .vlk{color:var(--teal)}.v-row.hidden .vlk{color:var(--text-4)}
    /* toggling a capability swaps the verifier row; a quick opacity fade
       softens the content change instead of a hard teleport (opacity-only,
       so it is safe under reduced motion). */
    .v-row{animation:vrow-in 0.16s var(--ease-out)}
    @keyframes vrow-in{from{opacity:0.4}to{opacity:1}}
    .disclose-sig{margin-top:1rem;display:flex;align-items:center;gap:0.6rem;padding:0.75rem 0.9rem;border:1px solid var(--teal-line);background:var(--teal-glow);border-radius:var(--r);font:600 0.76rem/1 var(--mono);color:var(--text)}
    .disclose-sig .sc{color:var(--teal)}
    .disclose-note{margin-top:1.5rem;font:0.82rem/1.65 var(--sans);color:var(--text-3);max-width:64ch}
    .disclose-note code{font-family:var(--mono);color:var(--text-2);font-size:0.85em}
    /* ═══════════════════════════════════════════════════
       FX LAYER: grain, cursor-tracked light, and a
       receipt that verifies itself. Every motion here is
       the product working: signing, scanning, verifying.
       All of it yields to prefers-reduced-motion. ─────── */

    /* filmic grain: a whisper of tooth over the flat dark */
    .fx-grain {
      position: fixed;
      inset: 0;
      z-index: 500;
      pointer-events: none;
      opacity: 0.03;
      mix-blend-mode: multiply;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 140px 140px;
    }

    /* hero: engineered substrate + a static ambient glow (see .hero::after) */
    .hero-inner { z-index: 2; }
    .hero::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      /* Static ambient glow toward the receipt. Previously cursor-tracked
         via a per-frame rAF repaint; that was decorative and cost a large
         gradient repaint on every mousemove, so it is now fixed in place. */
      background: none;
    }

    /* nav sharpens once you scroll off the hero */
    .nav { transition: background 0.25s, border-color 0.25s; }
    .nav.scrolled .nav-inner { background: rgba(255,255,255,0.92); border-color: var(--zk-hairline-strong); }

    /* card craft: accent bar ignites and the card lifts on hover */
    .prim-card, .sign-card { transition: background 0.2s, transform 0.2s var(--ease-out), box-shadow 0.2s; }
    .prim-card::before { opacity: 0.5; }
    /* Lift on hover only where a real pointer exists: on touch, a tap fires a
       false :hover and the card would stay lifted until the next tap. */
    @media (hover: hover) and (pointer: fine) {
      .prim-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--zk-shadow-card);
      }
      .prim-card:hover::before { opacity: 1; }
      .sign-card:hover { transform: translateY(-2px); box-shadow: var(--zk-shadow-card); }
    }

    /* the receipt invites a click to re-run verification */
    .receipt-verify-btn { user-select: none; }
    .receipt-verify-btn:active { transform: scale(0.97); }
    .hero h1 em { display: inline-block; position: relative; }

    @media (prefers-reduced-motion: no-preference) {
      /* the receipt card settles in */
      .hero-receipt { animation: card-in 0.75s var(--ease-out) both; }
      @keyframes card-in {
        from { opacity: 0; transform: translateY(14px) scale(0.985); }
        to   { opacity: 1; transform: none; }
      }
      /* fields stream in, one hash at a time */
      .hero-receipt .rrow { opacity: 0; animation: rrow-in 0.5s var(--ease-out) both; }
      .hero-receipt .rrow:nth-child(1)  { animation-delay: 0.40s; }
      .hero-receipt .rrow:nth-child(2)  { animation-delay: 0.47s; }
      .hero-receipt .rrow:nth-child(3)  { animation-delay: 0.54s; }
      .hero-receipt .rrow:nth-child(4)  { animation-delay: 0.61s; }
      .hero-receipt .rrow:nth-child(5)  { animation-delay: 0.68s; }
      .hero-receipt .rrow:nth-child(6)  { animation-delay: 0.75s; }
      .hero-receipt .rrow:nth-child(7)  { animation-delay: 0.82s; }
      .hero-receipt .rrow:nth-child(8)  { animation-delay: 0.89s; }
      .hero-receipt .rrow:nth-child(9)  { animation-delay: 0.96s; }
      .hero-receipt .rrow:nth-child(10) { animation-delay: 1.03s; }
      @keyframes rrow-in {
        from { opacity: 0; transform: translateY(6px); }
        to   { opacity: 1; transform: none; }
      }
      /* VERIFIED settles in after the fields resolve. A firm ease-out, not a
         bouncy overshoot: this is a security stamp on a crisp product, not a
         playful moment. */
      .receipt-badge { opacity: 0; animation: stamp-in 0.45s var(--ease-out) 1.22s both; }
      @keyframes stamp-in {
        0%   { opacity: 0; transform: scale(1.35); }
        60%  { opacity: 1; }
        100% { opacity: 1; transform: none; }
      }
      /* a green scan sweeps the ledger when it (re)verifies */
      .receipt-body { position: relative; overflow: hidden; }
      .hero-receipt.scan-run .receipt-body::after {
        content: '';
        position: absolute;
        left: 0; right: 0;
        top: -44px;
        height: 44px;
        pointer-events: none;
        background: linear-gradient(180deg, transparent, rgba(0,200,5,0.22), transparent);
        animation: scan 1.5s ease-in-out both;
      }
      @keyframes scan {
        0%   { top: -44px; opacity: 0; }
        12%  { opacity: 1; }
        88%  { opacity: 1; }
        100% { top: 100%; opacity: 0; }
      }
      /* the PASS line flares green as the scan clears it */
      .hero-receipt.scan-run .rrow-val.green { animation: pass-flare 1.1s ease-out 1.05s; }
      @keyframes pass-flare {
        0%   { text-shadow: none; }
        35%  { text-shadow: 0 0 14px rgba(95,211,166,0.85); }
        100% { text-shadow: none; }
      }
      /* the headline signs itself with a drawn underline */
      .hero h1 em::after {
        content: '';
        position: absolute;
        left: 0; bottom: 0.04em;
        height: 2px; width: 100%;
        background: linear-gradient(90deg, var(--zk-accent), rgba(0,200,5,0));
        transform: scaleX(0);
        transform-origin: left;
        animation: underline-draw 0.9s var(--ease-out) 0.55s both;
      }
      @keyframes underline-draw { to { transform: scaleX(1); } }
    }

    /* Persistent motion (the pulsing status dot) is exactly what
       reduced-motion users want stilled. Stop it; the content stays fully
       legible in place. */
    @media (prefers-reduced-motion: reduce) {
      .receipt-badge::before { animation: none; }
    }

    /* ─── MERKLE INCLUSION PROOF ───────────────────────── */
    .mk-layout {
      display: grid;
      grid-template-columns: 1.35fr 1fr;
      gap: 1.5rem;
      margin-top: 2.5rem;
      align-items: stretch;
    }
    .mk-tree-wrap {
      background: var(--bg-1);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 1.75rem 1.5rem;
      display: flex; align-items: center; justify-content: center;
    }
    .mk-svg { width: 100%; height: auto; overflow: visible; }
    .mk-edge { stroke: var(--zk-hairline-strong); stroke-width: 1.5; transition: stroke 0.35s, stroke-width 0.35s; }
    .mk-edge.on { stroke: var(--zk-accent); stroke-width: 2.4; }
    .mk-node { fill: var(--zk-surface); stroke: var(--zk-hairline-strong); stroke-width: 1.5; transition: fill 0.35s, stroke 0.35s; }
    .mk-node.leaf { cursor: pointer; }
    .mk-node.leaf:hover { stroke: var(--zk-accent); }
    .mk-node.on { fill: rgba(0,200,5,0.12); stroke: var(--zk-accent); }
    .mk-node.sib { fill: rgba(168,111,0,0.12); stroke: var(--amber); }
    .mk-node.root.on { fill: rgba(0,200,5,0.22); }
    .mk-nlabel { fill: var(--text-4); font-family: var(--mono); font-size: 9px; text-anchor: middle; pointer-events: none; transition: fill 0.35s; }
    .mk-nlabel.on { fill: var(--teal); }
    .mk-nlabel.sib { fill: var(--amber); }
    .mk-cap { fill: var(--text-3); font-family: var(--mono); font-size: 10px; }

    .mk-panel {
      background: var(--bg-1);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 1.5rem;
      display: flex; flex-direction: column;
    }
    .mk-panel-head {
      font-family: var(--mono); font-size: 0.75rem; color: var(--text-3);
      padding-bottom: 0.9rem; margin-bottom: 1rem;
      border-bottom: 1px solid var(--border);
      display: flex; justify-content: space-between; align-items: center;
    }
    .mk-panel-head b { color: var(--teal); font-weight: 500; }
    .mk-steps { display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
    .mk-step {
      font-family: var(--mono); font-size: 0.7rem; color: var(--text-2);
      opacity: 0; transform: translateX(-6px);
      animation: mk-step-in 0.35s var(--ease-out) forwards;
    }
    @keyframes mk-step-in { to { opacity: 1; transform: none; } }
    .mk-step sub { font-size: 0.72em; }
    .mk-step .mk-h { color: var(--teal); }
    .mk-step .mk-s { color: var(--amber); }
    .mk-result {
      margin-top: 1rem; padding-top: 1rem;
      border-top: 1px solid var(--border);
      font-family: var(--mono); font-size: 0.72rem; color: var(--green);
      display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap;
    }
    .mk-legend {
      display: flex; gap: 1.25rem; margin-top: 1rem;
      font-family: var(--mono); font-size: 0.66rem; color: var(--text-3);
    }
    .mk-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
    .mk-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
    @media (max-width: 820px) {
      .mk-layout { grid-template-columns: 1fr; }
    }