/* MERGER v3 visual system.

   World: light pastel. The semantic rule: pastel = public, seal (ink-violet) = sealed.
   Anything unlinked or shielded is drawn in --seal; public data sits on pastel and paper.

   Cascade: every rule here lives in a layer. Module sheets (book.css, rail.css, zcash.css,
   desk.css, receipt.css, prose.css) load unlayered, by their own script or a link in the
   page, so a module's own rules win over these defaults without a specificity fight.
   Modules use the tokens below and the primitives in the "primitives" layer.

   Shape rule: buttons, chips and state chips are pills; cards are 16 px; outer shells
   and bands are 28 px; inputs are 12 px.
   z scale: 1 pinned stage, 50 nav, 60 nav sheet, 80 skip link. */

@layer base, primitives, chrome, pages;

@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/geist-mono.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* metric-matched fallbacks, so the swap to Geist does not move the layout */
@font-face {
  font-family: "Geist Fallback";
  src: local("Arial");
  ascent-override: 95.94%;
  descent-override: 28.16%;
  line-gap-override: 0%;
  size-adjust: 104.76%;
}

@font-face {
  font-family: "Geist Mono Fallback";
  src: local("Arial");
  ascent-override: 74.67%;
  descent-override: 21.92%;
  line-gap-override: 0%;
  size-adjust: 134.59%;
}

/* ================================================================== base == */

@layer base {
  :root {
    /* brand/tokens.json */
    --v: #8f7cff;
    --m: #3fc78f;
    --ink: #1b1a24;
    --ground: #f6f4fb;
    /* the seal: sealed and unlinked things (logo lab v3 r2, the book in the mark) */
    --seal: #3a2c8f;
    --butter: #fff0c2;

    /* text; every pair below keeps 4.5:1 or better on --ground, --paper and the soft tints */
    --ink-2: #545266;
    --ink-3: #65637a;
    --v-text: #5646c9;
    --m-text: #16734f;
    --butter-text: #7a5a00;
    --err: #9b1c3a;
    --on-seal: #ffffff;
    --on-seal-2: #d9d2ff;

    /* surfaces */
    --paper: #ffffff;
    --v-soft: #ece8fd;
    --v-mist: #f3f0fe;
    --m-soft: #ddf6ea;
    --butter-line: #e9c46a;
    --line: #e2dff0;
    --line-2: rgba(27, 26, 36, 0.12);

    --sans: "Geist", "Geist Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, "SFMono-Regular", Consolas, monospace;

    --wrap: 1280px;
    --gutter: clamp(16px, 4vw, 40px);

    --r-xs: 6px;
    --r-sm: 12px;
    --r: 16px;
    --r-lg: 28px;
    --r-pill: 999px;

    /* shadows carry the seal hue, never plain black */
    --ring: 0 0 0 1px rgba(27, 26, 36, 0.06);
    --shadow-1: 0 1px 2px rgba(58, 44, 143, 0.06);
    --shadow-2: 0 1px 2px rgba(58, 44, 143, 0.05), 0 28px 56px -32px rgba(58, 44, 143, 0.32);

    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-2: cubic-bezier(0.32, 0.72, 0, 1);
  }

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

  html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 96px;
  }
  /* smooth from load on: a deep link's own jump stays instant, so no slow scroll races the
     font swap (site.js adds the class) */
  html.is-settled { scroll-behavior: smooth; }

  /* the ground carries a fine grain: a background tile, painted with the page, never a layer */
  body {
    margin: 0;
    background:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.1 0 0 0 0 0.16 0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
      var(--ground);
    color: var(--ink);
    font: 400 16px/1.6 var(--sans);
    font-kerning: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  [hidden] { display: none !important; }

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

  a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
  a:hover { text-decoration-thickness: 2px; }
  :focus-visible { outline: 2px solid var(--v-text); outline-offset: 3px; border-radius: 4px; }

  h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
  h1 { font-size: clamp(40px, 5.2vw, 72px); font-weight: 300; line-height: 1; letter-spacing: -0.045em; margin-bottom: 20px; }
  h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.05; letter-spacing: -0.035em; margin-bottom: 16px; }
  h3 { font-size: 20px; font-weight: 500; line-height: 1.25; letter-spacing: -0.015em; margin-bottom: 8px; }
  p, li, dd { text-wrap: pretty; }
  p { margin: 0 0 12px; }
  img, svg { max-width: 100%; }

  code, .mono { font-family: var(--mono); font-size: 0.92em; overflow-wrap: anywhere; }

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

  .skip {
    position: absolute;
    left: 12px;
    top: -56px;
    z-index: 80;
    padding: 10px 16px;
    border-radius: var(--r-pill);
    background: var(--ink);
    color: var(--paper);
    text-decoration: none;
  }
  .skip:focus { top: 12px; }

  /* overflow-x: clip keeps full-bleed washes inside the page without making main a
     scroll container, so position: sticky still works under it */
  main {
    overflow-x: clip;
    padding: clamp(20px, 3vw, 40px) 0 clamp(88px, 10vw, 144px);
    min-height: 60vh;
  }
  main > .wrap > section { margin-top: clamp(80px, 10vw, 144px); }
  main > .wrap > section:first-child,
  main > .wrap > link:first-child + section { margin-top: 0; }

  ol, ul { padding-left: 1.25em; }
  li { margin: 6px 0; }
}

/* ============================================================ primitives == */

@layer primitives {
  .lead { font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: 40em; }
  .muted { color: var(--ink-2); }

  .sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .card {
    background: var(--paper);
    border-radius: var(--r);
    box-shadow: var(--ring), var(--shadow-1);
    padding: 20px;
  }

  .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
  }

  .divider { border: 0; height: 1px; background: var(--line); margin: 24px 0; }

  /* numbers: mono, tabular, so columns of prices line up */
  .num {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    letter-spacing: -0.01em;
  }

  /* ---- buttons ---- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-pill);
    background: var(--paper);
    color: var(--ink);
    font: 500 15px/1 var(--sans);
    letter-spacing: -0.005em;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: transform 0.25s var(--ease), background-color 0.35s var(--ease), color 0.35s var(--ease),
      border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
  }
  .btn:hover { text-decoration: none; }
  .btn:active { transform: scale(0.98); }
  .btn--ink {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 12px 24px -16px rgba(27, 26, 36, 0.7);
  }
  .btn--ink:hover { background: var(--seal); border-color: var(--seal); }
  .btn--ghost { background: transparent; }
  .btn--ghost:hover { background: var(--paper); border-color: rgba(27, 26, 36, 0.2); }
  .btn[disabled],
  .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
  /* a trailing arrow sits in its own circle, flush with the right padding */
  .btn__icon {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-right: -12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    font-size: 15px;
    transition: transform 0.35s var(--ease);
  }
  .btn--ghost .btn__icon { background: rgba(27, 26, 36, 0.06); }
  .btn:hover .btn__icon { transform: translate(2px, -1px) scale(1.05); }

  /* ---- chips (filters, toggles) ---- */
  .chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-pill);
    background: var(--paper);
    color: var(--ink-2);
    font: 500 13px/1 var(--sans);
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
  }
  .chip:hover { border-color: rgba(27, 26, 36, 0.24); color: var(--ink); }
  .chip[aria-pressed="true"],
  .chip[aria-selected="true"],
  .chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }

  /* ---- tags (a small fixed label on a row) ---- */
  .tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--r-xs);
    background: var(--v-soft);
    color: var(--v-text);
    font: 500 12px/1.5 var(--sans);
    white-space: nowrap;
  }
  .tag--quiet { background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-2); }
  .tag--seal { background: var(--seal); color: var(--on-seal); }

  .kbd {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid var(--line-2);
    border-bottom-width: 2px;
    border-radius: var(--r-xs);
    background: var(--paper);
    font: 500 12px/1.5 var(--mono);
  }

  .pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--r-pill);
    background: var(--ink);
    color: var(--paper);
    font: 500 13px/1.3 var(--mono);
  }

  /* ---- state: live | stale | unread | degraded ---- */
  .state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 3px 11px 3px 9px;
    border-radius: var(--r-pill);
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--line-2);
    color: var(--ink-3);
    font: 500 12px/1.4 var(--mono);
    white-space: nowrap;
  }
  .state::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px currentColor;
  }
  .state[data-state="live"] { background: var(--m-soft); box-shadow: none; color: var(--m-text); }
  .state[data-state="live"]::before { background: var(--m); box-shadow: none; }
  .state[data-state="stale"] { background: var(--butter); box-shadow: none; color: var(--butter-text); }
  .state[data-state="stale"]::before { background: var(--butter-line); box-shadow: none; }
  .state[data-state="degraded"] { background: var(--butter); box-shadow: inset 0 0 0 1px var(--butter-line); color: var(--butter-text); }
  .state[data-state="unread"] { box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-3); }

  /* ---- source link with its age ---- */
  /* plain inline text, so a module can put several links and words inside one .src */
  .src { color: var(--ink-3); font: 400 12px/1.5 var(--mono); overflow-wrap: break-word; }
  a.src,
  .src a { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
  a.src:hover,
  .src a:hover { color: var(--ink); text-decoration-style: solid; }

  /* ---- spread tint: mint inside the band, butter for an outlier, never red and green ---- */
  .spread { border-radius: var(--r-xs); padding: 1px 6px; }
  .spread[data-band="in"] { background: var(--m-soft); color: var(--m-text); }
  .spread[data-band="out"] { background: var(--butter); color: var(--butter-text); }

  /* ---- forms: label above, hint below ---- */
  .field { display: grid; gap: 6px; margin: 0 0 16px; }
  .field > label,
  .field > .field__label { font: 500 13px/1.3 var(--sans); color: var(--ink-2); }
  .field input,
  .field select,
  .field textarea {
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid rgba(27, 26, 36, 0.2);
    border-radius: var(--r-sm);
    background: var(--paper);
    color: var(--ink);
    font: 400 16px/1.4 var(--sans);
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  }
  .field textarea { min-height: 96px; resize: vertical; }
  .field input::placeholder,
  .field textarea::placeholder { color: var(--ink-3); opacity: 1; }
  .field input:focus,
  .field select:focus,
  .field textarea:focus { outline: none; border-color: var(--v-text); box-shadow: 0 0 0 3px rgba(143, 124, 255, 0.28); }
  .field [aria-invalid="true"] { border-color: var(--err); }
  .hint { margin: 0; font: 400 13px/1.5 var(--sans); color: var(--ink-3); }
  .hint[data-tone="error"] { color: var(--err); }

  .link-arrow {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    box-shadow: inset 0 -1px 0 currentColor;
  }
  .link-arrow::after { content: "\2192"; transition: transform 0.35s var(--ease); }
  .link-arrow:hover::after { transform: translateX(3px); }

  .rows { list-style: none; padding: 0; margin: 16px 0; }
  .rows li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 16px;
    margin: 0;
    padding: 12px 0;
  }
  .rows li + li { border-top: 1px solid var(--line); }

  .steps { list-style: none; counter-reset: step; padding: 0; margin: 0; }
  .steps li { counter-increment: step; position: relative; margin: 0 0 18px; padding-left: 44px; color: var(--ink-2); }
  .steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--v-soft);
    color: var(--v-text);
    font: 500 13px/28px var(--mono);
    text-align: center;
  }
  .steps strong { color: var(--ink); font-weight: 500; }

  /* A mount point. Before its module runs it shows its unread state in a dashed box; once
     mounted it is the module's. A mount without a class keeps a plain card around it. */
  [data-mount] { display: block; min-width: 0; }
  [data-mount]:not([class]) { margin: 24px 0; padding: 16px; border-radius: var(--r); background: var(--paper); box-shadow: var(--ring); }
  [data-mount]:not([data-mounted]) > .state { margin: 2px 0; }
}

/* ================================================================ chrome == */

@layer chrome {
  /* the floating glass bar */
  .bar { position: sticky; top: 0; z-index: 50; padding-top: 12px; }
  .bar__pill {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 60px;
    padding: 6px 8px 6px 20px;
    border-radius: var(--r-pill);
    /* dense enough that the links and the state chip keep 4.5:1 over a seal block */
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    backdrop-filter: blur(18px) saturate(1.6);
    box-shadow: 0 0 0 1px rgba(27, 26, 36, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 14px 34px -22px rgba(58, 44, 143, 0.4);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .bar__pill { background: rgba(255, 255, 255, 0.95); }
  }
  @media (prefers-reduced-transparency: reduce) {
    .bar__pill { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
  }

  /* lockup (logo lab v3 r4, locked): the outlined uppercase MERGER lockup, one image. In the
     nav it is 26 px tall, so the mark is 24 px and the cap 16 px on whole pixels */
  .lockup {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    text-decoration: none;
    flex: none;
  }
  .lockup img { display: block; width: auto; height: 26px; }
  .lockup:hover { text-decoration: none; }

  .nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
  .nav a {
    padding: 9px 14px;
    border-radius: var(--r-pill);
    color: var(--ink-2);
    font: 500 15px/1.2 var(--sans);
    text-decoration: none;
    transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
  }
  .nav a:hover { background: rgba(27, 26, 36, 0.05); color: var(--ink); }
  .nav a[aria-current="page"] { background: var(--paper); color: var(--ink); box-shadow: var(--ring); }

  /* the book's state, read from /api/book by site.js */
  .live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    margin-left: 6px;
    padding: 0 14px 0 12px;
    border-radius: var(--r-pill);
    /* opaque, so whatever scrolls under the glass never changes its contrast */
    background: var(--v-mist);
    color: var(--ink-2);
    font: 500 12px/1 var(--mono);
    white-space: nowrap;
  }
  .live__dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px var(--ink-3);
  }
  .live[data-state="live"] .live__dot { background: var(--m); box-shadow: none; }
  .live[data-state="live"] .live__dot::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: var(--m);
    opacity: 0;
  }
  .live[data-state="stale"] .live__dot { background: var(--butter-line); box-shadow: none; }
  /* live rows, most of the book unread: a half-filled dot */
  .live[data-state="degraded"] .live__dot { background: linear-gradient(90deg, var(--butter-text) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--butter-text); }
  .live[data-state="live"] { color: var(--m-text); }
  .live[data-state="stale"],
  .live[data-state="degraded"] { color: var(--butter-text); }

  .menu {
    display: none;
    position: relative;
    width: 44px;
    height: 44px;
    margin-left: 4px;
    border: 0;
    border-radius: 50%;
    background: var(--ink);
    color: var(--paper);
    cursor: pointer;
  }
  .menu__lines,
  .menu__lines::before,
  .menu__lines::after {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 1.5px;
    margin-left: -8px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.45s var(--ease-2), opacity 0.3s var(--ease);
  }
  .menu__lines { background: transparent; }
  .menu__lines::before { content: ""; transform: translateY(-3.5px); }
  .menu__lines::after { content: ""; transform: translateY(3.5px); }
  .menu[aria-expanded="true"] .menu__lines::before { transform: rotate(45deg); }
  .menu[aria-expanded="true"] .menu__lines::after { transform: rotate(-45deg); }

  /* ---- footer ---- */
  .foot {
    position: relative;
    padding: clamp(56px, 8vw, 96px) 0 40px;
    background: linear-gradient(180deg, rgba(236, 232, 253, 0) 0%, rgba(236, 232, 253, 0.7) 100%);
    box-shadow: inset 0 1px 0 var(--line);
  }
  .foot__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 40px 64px;
    align-items: end;
  }
  .lockup--xl img { height: clamp(56px, 8.4vw, 112px); }
  .foot__line { margin: 20px 0 0; font-size: clamp(18px, 1.8vw, 22px); letter-spacing: -0.015em; color: var(--ink-2); }
  .foot__nav { display: grid; grid-template-columns: repeat(2, auto); gap: 10px 48px; }
  .foot__nav a { color: var(--ink); text-decoration: none; font-weight: 500; }
  .foot__nav a:hover { text-decoration: underline; }
  .foot__legal {
    margin-top: clamp(40px, 6vw, 64px);
    padding-top: 24px;
    box-shadow: inset 0 1px 0 var(--line);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 48px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-2);
  }
  .foot__legal p { margin: 0 0 8px; max-width: 64ch; }
  .foot__ca { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
}

/* ================================================================= pages == */

@layer pages {
  /* ------------------------------------------------------------- home: hero -- */
  .hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: clamp(28px, 4vw, 48px);
    align-items: start;
    padding-top: clamp(12px, 2.6vw, 36px);
  }
  /* the wash: lavender low left, mint high right, as in the mark */
  .hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -160px calc(50% - 50vw) -120px;
    pointer-events: none;
    background:
      radial-gradient(42% 46% at 14% 62%, rgba(143, 124, 255, 0.2), transparent 70%),
      radial-gradient(38% 42% at 86% 18%, rgba(63, 199, 143, 0.16), transparent 70%);
  }
  .display {
    font-size: clamp(42px, 4.9vw, 70px);
    font-weight: 300;
    line-height: 0.98;
    letter-spacing: -0.048em;
    margin: 0 0 24px;
  }
  /* the home headline is longer than the page titles, so it runs one step smaller to hold two lines at 1440 */
  #hero-h { font-size: clamp(38px, 3.45vw, 52px); }
  .hero__sub { font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: 30em; margin: 0 0 28px; }
  .hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
  .hero__rail { margin-top: 32px; }

  /* the hero object: the live book (the module draws its own bezel) under the seal, an ink
     tab on top that carries the promise, so the promise sits in the first screen however
     many rows the featured book has: the book is public, the wallet is sealed. Until the
     module has drawn its bezel (before the first read, or while the book is unread) the mount
     keeps a paper card, so the unread line never sits on the seal. */
  .hero__object { display: flex; flex-direction: column; min-width: 0; }
  .hero__book { position: relative; z-index: 1; min-height: 600px; }
  .hero__book:not(:has(> .bk-shell)) {
    padding: 22px 24px;
    border-radius: var(--r-lg);
    background: var(--paper);
    box-shadow: 0 0 0 1px rgba(27, 26, 36, 0.06), var(--shadow-2);
  }
  .sealstrip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 24px;
    order: -1;
    margin: 0 12px -22px;
    padding: 18px 24px 40px;
    border-radius: 22px 22px 0 0;
    background: var(--seal);
    color: var(--on-seal);
    box-shadow: 0 24px 40px -28px rgba(58, 44, 143, 0.6);
  }
  .sealstrip__promise { margin: 0; font: 500 18px/1.3 var(--sans); letter-spacing: -0.015em; }
  .sealstrip__wallet,
  .sealbox__bar,
  .mg__wallet {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--on-seal-2);
    font: 400 12px/1.3 var(--mono);
  }
  /* the unlinked wallet: an ink bar in place of an address */
  .sealstrip__wallet i,
  .sealbox__bar i {
    display: block;
    width: 96px;
    height: 12px;
    border-radius: 3px;
    background: var(--ink);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  }

  /* hero entrance, once, on load */
  @media (prefers-reduced-motion: no-preference) {
    .js .hero__copy > * { animation: rise 0.9s var(--ease) both; }
    .js .hero__copy > :nth-child(2) { animation-delay: 0.08s; }
    .js .hero__copy > :nth-child(3) { animation-delay: 0.16s; }
    .js .hero__copy > :nth-child(4) { animation-delay: 0.24s; }
    .js .hero__object { animation: rise 1.1s var(--ease) 0.12s both; }
  }
  @keyframes rise {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
  }

  /* ------------------------------------------------ home: the book, read live -- */
  .hero__stats { margin-top: 28px; }
  .statbook { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; align-content: start; }
  .statbook__head {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin: 0 0 10px;
    font-size: 14px;
    color: var(--ink-2);
  }
  .statbook__head .src { margin-left: auto; }
  .stat { padding: 14px 0 0; min-width: 0; box-shadow: inset 0 1px 0 var(--line-2); }
  /* --ink-2 here: the strip sits on the hero's lavender wash, where --ink-3 drops under 4.5:1 */
  .stat__label { margin: 0 0 8px; font: 500 13px/1.3 var(--sans); color: var(--ink-2); }
  .stat__value { margin: 0 0 6px; min-height: 34px; font-size: 32px; line-height: 1.05; font-weight: 400; letter-spacing: -0.04em; }
  .stat__value .state { font-size: 12px; letter-spacing: 0; vertical-align: middle; }
  .stat__foot { margin: 0; font-size: 12px; line-height: 1.45; color: var(--ink-2); }
  .hero__stats .state[data-state="unread"],
  .hero__stats .src { color: var(--ink-2); }

  /* ------------------------------------------------ home: the shielded side -- */
  .zsec {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    gap: 24px clamp(28px, 5vw, 72px);
    align-items: start;
  }
  .zsec__copy { position: sticky; top: 110px; }
  .zsec__strip { min-width: 0; }

  /* ------------------------------------------------------- home: merge story -- */
  .merge__head { max-width: 42em; }
  .merge__body {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
    gap: clamp(32px, 6vw, 96px);
    align-items: start;
    margin-top: clamp(24px, 4vw, 48px);
  }
  .merge__pin {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: max(100px, calc(50vh - 250px));
    z-index: 1;
  }
  .merge__steps { grid-column: 1; grid-row: 1; list-style: none; padding: 0; margin: 0; }
  .merge__step {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 56vh;
    margin: 0;
    padding: 24px 0;
  }
  .merge__step:first-child { min-height: 44vh; justify-content: flex-start; padding-top: 40px; }
  .merge__step h3 {
    font-size: clamp(24px, 2.4vw, 34px);
    font-weight: 400;
    letter-spacing: -0.035em;
    line-height: 1.1;
    margin-bottom: 14px;
    color: var(--ink);
    /* the resting opacities keep 4.5:1 on the ground (ink at 0.64, ink-2 at 0.86) */
    opacity: 0.64;
    transition: opacity 0.5s var(--ease);
  }
  .merge__step p { font-size: 17px; max-width: 30em; color: var(--ink-2); opacity: 0.86; transition: opacity 0.5s var(--ease); }
  .merge__step.is-at h3,
  .merge__step.is-at p,
  html:not(.js) .merge__step h3,
  html:not(.js) .merge__step p { opacity: 1; }

  /* the stage: five issuer rows, one reference, one sealed wallet line */
  .mg {
    --name-w: 8.6em;
    --k: 1;
    --wallet-h: 52px;
    position: relative;
    margin: 0;
    padding: 58px 28px 28px;
  }
  /* the book: a card that appears once the rows line up. Two layers, crossfaded: ::after
     ends above the wallet line (step 3), ::before runs to the base (step 4) */
  .mg::before,
  .mg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: var(--r-lg);
    background: var(--paper);
    box-shadow: 0 0 0 1px rgba(27, 26, 36, 0.06), var(--shadow-2);
    opacity: 0;
    transform: scale(0.94);
    transition: opacity 0.8s var(--ease), transform 0.9s var(--ease);
  }
  .mg::after { bottom: var(--wallet-h); }
  .mg { isolation: isolate; }
  .mg__label {
    position: absolute;
    top: 22px;
    left: calc(28px + var(--name-w) + 16px + (100% - 56px - var(--name-w) - 16px) / 2);
    margin: 0;
    transform: translateX(-50%);
    color: var(--seal);
    font: 500 12px/1 var(--mono);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.6s var(--ease);
  }
  .mg__rows { list-style: none; margin: 0; padding: 0; }
  .mg__row {
    display: grid;
    grid-template-columns: var(--name-w) minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    height: 54px;
    margin: 0;
    transition: transform 1s var(--ease);
  }
  .mg__name { font: 500 14px/1.2 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mg__track { position: relative; height: 100%; }
  .mg__track::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--line);
  }
  /* each row's piece of the reference line; the pieces join once the rows line up */
  .mg__track::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1.5px;
    margin-left: -0.75px;
    background: var(--seal);
    opacity: 0;
    transition: opacity 0.6s var(--ease);
  }
  .mg__tick {
    --x: 0px;
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: var(--v);
    box-shadow: 0 0 0 5px rgba(143, 124, 255, 0.16);
    transform: translateX(calc(var(--x) * var(--k)));
    transition: transform 1.1s var(--ease);
  }
  .mg__tick::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    background: var(--m);
    box-shadow: 0 0 0 5px rgba(63, 199, 143, 0.2);
    opacity: 0;
    transition: opacity 0.6s var(--ease);
  }
  .mg__row:nth-child(4) .mg__tick::after { background: var(--butter); box-shadow: 0 0 0 1.5px var(--butter-line), 0 0 0 6px rgba(233, 196, 106, 0.25); }
  .mg__wallet {
    display: grid;
    grid-template-columns: var(--name-w) minmax(0, 1fr) auto;
    gap: 16px;
    margin: 22px -28px -28px;
    padding: 18px 28px;
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    background: var(--seal);
    color: var(--on-seal-2);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s var(--ease), transform 0.9s var(--ease);
  }
  .mg__wallet > span:first-child { color: var(--on-seal); font: 500 14px/1.2 var(--sans); }
  .mg__bar {
    display: block;
    height: 12px;
    border-radius: 3px;
    background: var(--ink);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 1s var(--ease) 0.2s;
  }

  /* step 1: raw quotes, each in its own unit */
  .mg[data-at="1"] .mg__row:nth-child(1) { transform: translate(-6px, -14px) rotate(-2deg); }
  .mg[data-at="1"] .mg__row:nth-child(2) { transform: translate(12px, -2px) rotate(1.5deg); }
  .mg[data-at="1"] .mg__row:nth-child(3) { transform: translate(-16px, 10px) rotate(-1deg); }
  .mg[data-at="1"] .mg__row:nth-child(4) { transform: translate(8px, 22px) rotate(2deg); }
  .mg[data-at="1"] .mg__row:nth-child(5) { transform: translate(-4px, 34px) rotate(-1.5deg); }
  .mg[data-at="1"] .mg__row:nth-child(1) .mg__tick { --x: -118px; }
  .mg[data-at="1"] .mg__row:nth-child(2) .mg__tick { --x: 66px; }
  .mg[data-at="1"] .mg__row:nth-child(3) .mg__tick { --x: -44px; }
  .mg[data-at="1"] .mg__row:nth-child(4) .mg__tick { --x: 128px; }
  .mg[data-at="1"] .mg__row:nth-child(5) .mg__tick { --x: -86px; }

  /* steps 2 to 4: divided by the multiplier, every tick near one price */
  .mg:not([data-at="1"]) .mg__row:nth-child(1) .mg__tick { --x: -7px; }
  .mg:not([data-at="1"]) .mg__row:nth-child(2) .mg__tick { --x: 9px; }
  .mg:not([data-at="1"]) .mg__row:nth-child(3) .mg__tick { --x: -3px; }
  .mg:not([data-at="1"]) .mg__row:nth-child(4) .mg__tick { --x: 30px; }
  .mg:not([data-at="1"]) .mg__row:nth-child(5) .mg__tick { --x: 4px; }
  .mg[data-at="2"] .mg__track::before { opacity: 0.3; }

  /* steps 3 and 4: one book against one reference */
  .mg[data-at="3"]::after,
  .mg[data-at="4"]::before { opacity: 1; transform: none; }
  .mg[data-at="3"] .mg__label,
  .mg[data-at="4"] .mg__label,
  .mg[data-at="3"] .mg__track::before,
  .mg[data-at="4"] .mg__track::before,
  .mg[data-at="3"] .mg__tick::after,
  .mg[data-at="4"] .mg__tick::after { opacity: 1; }

  /* step 4: the wallet that paid, sealed at the base of the book */
  .mg[data-at="4"] .mg__wallet { opacity: 1; transform: none; }
  .mg[data-at="4"] .mg__bar { transform: none; }

  /* --------------------------------------------------------- home: the desk -- */
  .section-head { max-width: 44em; }
  .bento {
    list-style: none;
    margin: clamp(28px, 4vw, 48px) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
  }
  .bento__cell {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 290px;
    margin: 0;
    padding: clamp(24px, 3vw, 36px);
    border-radius: var(--r-lg);
    overflow: hidden;
  }
  .bento__cell:nth-child(1) { grid-column: span 5; }
  .bento__cell:nth-child(2) { grid-column: span 7; }
  .bento__cell:nth-child(3) { grid-column: span 7; }
  .bento__cell:nth-child(4) { grid-column: span 5; }
  .bento__cell h3 { font-size: clamp(22px, 2.3vw, 30px); font-weight: 400; letter-spacing: -0.035em; line-height: 1.1; margin-bottom: 14px; max-width: 14em; }
  .bento__cell p { max-width: 32em; color: var(--ink-2); }
  .bento__cell--lavender {
    background: radial-gradient(90% 80% at 100% 0%, rgba(255, 255, 255, 0.7), transparent 60%), var(--v-soft);
  }
  .bento__cell--mint {
    background: radial-gradient(80% 90% at 0% 100%, rgba(255, 255, 255, 0.65), transparent 60%), var(--m-soft);
  }
  .bento__cell--seal {
    color: var(--on-seal);
    background: radial-gradient(46% 56% at 104% -6%, rgba(143, 124, 255, 0.42), transparent 62%), var(--seal);
  }
  .bento__cell--seal p { color: var(--on-seal-2); }
  .bento__flow {
    margin: auto 0 0;
    padding-top: 28px;
    font: 400 12px/1.4 var(--mono);
    letter-spacing: 0.01em;
  }
  .bento__cell p.bento__flow { color: var(--ink-2); }
  .bento__cell--seal p.bento__flow { color: var(--on-seal-2); }
  .desk4__cta { margin: 28px 0 0; }

  /* ------------------------------------------------------ home: the receipt -- */
  .receipt-sec {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(28px, 5vw, 80px);
    align-items: start;
  }
  .receipt-sec__copy { position: sticky; top: 110px; }
  .receipt-sec__copy > p:not(.lead) { color: var(--ink-2); max-width: 32em; }
  .frame-mount {
    min-height: 260px;
    padding: clamp(18px, 2.4vw, 28px);
    border-radius: var(--r-lg);
    background: var(--paper);
    box-shadow: 0 0 0 1px rgba(27, 26, 36, 0.06), var(--shadow-2);
  }

  /* --------------------------------------------------- home: what stays public -- */
  .ledger__table {
    margin-top: clamp(28px, 4vw, 44px);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--paper);
    box-shadow: 0 0 0 1px rgba(27, 26, 36, 0.06), var(--shadow-1);
  }
  .ledger__cols,
  .ledger__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ledger__cols span { padding: 14px 28px; font: 500 13px/1.3 var(--mono); }
  .ledger__cols span:first-child { background: var(--seal); color: var(--on-seal-2); }
  .ledger__cols span:last-child { background: var(--v-mist); color: var(--ink-3); }
  .ledger__sealed,
  .ledger__public { margin: 0; padding: 22px 28px; font-size: 16px; line-height: 1.5; }
  .ledger__sealed { background: var(--seal); color: var(--on-seal); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); }
  .ledger__public { color: var(--ink); box-shadow: inset 0 1px 0 var(--line); }
  /* the column header names the sides on a wide screen; screen readers keep each cell's label */
  @media (min-width: 641px) {
    .ledger__k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  }
  .ledger__foot {
    margin: 0;
    padding: 18px 28px;
    background: var(--v-mist);
    box-shadow: inset 0 1px 0 var(--line);
    color: var(--ink-2);
    font-size: 15px;
  }
  .ledger__foot .link-arrow { margin-left: 6px; }

  /* ------------------------------------------------------------ home: token -- */
  .tokenband {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 24px 48px;
    align-items: end;
    padding: clamp(28px, 5vw, 64px);
    border-radius: var(--r-lg);
    background: radial-gradient(60% 90% at 0% 0%, rgba(255, 255, 255, 0.75), transparent 65%), var(--butter);
  }
  .tokenband__ticker {
    margin: 0;
    font: 300 clamp(52px, 11vw, 156px)/0.9 var(--mono);
    letter-spacing: -0.07em;
    overflow-wrap: normal;
  }
  .tokenband__body p { color: var(--ink-2); font-size: 17px; max-width: 26em; }
  .tokenband__ca { display: flex; align-items: center; gap: 10px; }

  /* -------------------------------------------------------------- home: FAQ -- */
  .faq {
    display: grid;
    grid-template-columns: minmax(0, 0.55fr) minmax(0, 2fr);
    gap: 24px clamp(32px, 5vw, 80px);
    align-items: start;
  }
  .faq > h2 { position: sticky; top: 110px; }
  .faq__list { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 48px; }
  .faq__item dt { font: 500 18px/1.3 var(--sans); letter-spacing: -0.015em; margin-bottom: 10px; }
  .faq__item dd { margin: 0; color: var(--ink-2); }

  /* ----------------------------------------------------------- inner pages -- */
  .page-head { margin-bottom: clamp(28px, 4vw, 48px); }
  .page-head .lead { margin-bottom: 0; }
  .page-head--split {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 28px 56px;
    align-items: end;
  }
  .crumb { margin: 0 0 20px; font-size: 14px; }
  .crumb a { color: var(--ink-2); text-decoration: none; }
  .crumb a::before { content: "\2190"; margin-right: 8px; }
  .crumb a:hover { color: var(--ink); }
  .h1-sym {
    display: inline-block;
    padding: 0.18em 0.55em;
    border-radius: var(--r-pill);
    background: var(--v-soft);
    color: var(--v-text);
    font: 500 0.3em/1.2 var(--mono);
    letter-spacing: 0;
    vertical-align: 0.5em;
  }

  /* the book */
  .legend {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 18px 20px;
    border-radius: var(--r);
    background: rgba(255, 255, 255, 0.6);
    box-shadow: var(--ring);
  }
  .legend__item { display: grid; grid-template-columns: 5.6em minmax(0, 1fr); gap: 12px; align-items: baseline; }
  .legend dt,
  .legend dd { margin: 0; }
  .legend dd { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
  .book-mount {
    min-height: 420px;
    padding: clamp(12px, 2vw, 24px);
    border-radius: var(--r-lg);
    background: var(--paper);
    box-shadow: 0 0 0 1px rgba(27, 26, 36, 0.06), var(--shadow-2);
  }
  .how__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
  .how__cell { padding: clamp(22px, 2.6vw, 32px); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--ring); }
  .how__cell:nth-child(1) { grid-column: span 7; background: var(--v-soft); box-shadow: none; }
  .how__cell:nth-child(2) { grid-column: span 5; }
  .how__cell:nth-child(3) { grid-column: span 5; background: var(--m-soft); box-shadow: none; }
  .how__cell:nth-child(4) { grid-column: span 7; }
  .how__cell h3 { font-size: 22px; font-weight: 400; letter-spacing: -0.03em; margin-bottom: 10px; }
  .how__cell p { margin: 0; color: var(--ink-2); max-width: 36em; }
  .index__group { margin-top: 28px; }
  .index__group h3 { font-size: 14px; color: var(--ink-3); }
  .index__list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
  }
  .index__list li { margin: 0; }
  .index__list a {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 15px 18px;
    border-radius: var(--r);
    background: var(--paper);
    box-shadow: var(--ring), var(--shadow-1);
    text-decoration: none;
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  }
  .index__list a:hover { transform: translateY(-2px); box-shadow: var(--ring), var(--shadow-2); }
  .index__sym { font: 500 15px/1.2 var(--mono); flex: none; }
  .index__name { font-size: 14px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* one underlying */
  .facts { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; margin-top: clamp(28px, 4vw, 48px); align-items: start; }
  .facts__block { padding: clamp(22px, 2.6vw, 32px); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--ring); }
  .facts__block--ref { background: var(--v-soft); box-shadow: none; }
  .facts__block h2 { font-size: 24px; letter-spacing: -0.03em; margin-bottom: 14px; }
  .facts__list { list-style: none; margin: 0; padding: 0; }
  .facts__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin: 0; padding: 14px 0; }
  .facts__row + .facts__row { box-shadow: inset 0 1px 0 var(--line); }
  .facts__who,
  .facts__what { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; min-width: 0; }
  .facts__what { align-items: center; }
  .facts__issuer { font-weight: 500; }
  .facts__label { color: var(--ink-2); }
  .facts__addr { font-size: 12px; color: var(--ink-2); overflow-wrap: anywhere; }
  .facts__feed { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }

  /* the desk */
  .desk-grid {
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
    gap: clamp(16px, 2.4vw, 32px);
    align-items: start;
  }
  .desk-tool { grid-column: 1; grid-row: 1; min-width: 0; }
  .desk-aside {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: 96px;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--paper);
    box-shadow: 0 0 0 1px rgba(27, 26, 36, 0.06), var(--shadow-1);
  }
  .sealbox { padding: 24px; background: var(--seal); color: var(--on-seal); }
  .sealbox p { color: var(--on-seal-2); font-size: 15px; }
  .sealbox h2,
  .publicbox h2 { font-size: 20px; font-weight: 500; letter-spacing: -0.015em; margin-bottom: 10px; }
  .sealbox__bar { margin-top: 16px; }
  .sealbox__bar span:first-child { color: var(--on-seal); }
  .publicbox { padding: 24px; }
  .publicbox > p { font-size: 15px; color: var(--ink-2); }
  .publicbox ul { margin: 0 0 16px; padding-left: 1.1em; font-size: 15px; color: var(--ink-2); }
  .publicbox .hint { margin-bottom: 14px; }
  .desk-mount {
    min-height: 440px;
    padding: clamp(16px, 2.4vw, 28px);
    border-radius: var(--r-lg);
    background: var(--paper);
    box-shadow: 0 0 0 1px rgba(27, 26, 36, 0.06), var(--shadow-2);
  }
  .desk-after {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
  }
  .desk-after h2 { font-size: clamp(26px, 2.8vw, 36px); }
  .desk-after__receipt > p { color: var(--ink-2); max-width: 34em; }

  /* 404 */
  .lost { padding: clamp(24px, 6vw, 72px) 0 0; max-width: 40em; }
  .lost__mark { display: block; width: 104px; height: 104px; margin-bottom: 32px; }
  .lost__links { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; padding: 0; }
  .lost__links li { margin: 0; }

  /* scroll reveals: only when scripting runs and motion is welcome */
  @media (prefers-reduced-motion: no-preference) {
    .js [data-reveal] {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.9s var(--ease), transform 1s var(--ease);
    }
    .js [data-reveal].is-in { opacity: 1; transform: none; }
    .live[data-state="live"] .live__dot::after { animation: ping 2.4s var(--ease) infinite; }
  }
  @keyframes ping {
    0% { opacity: 0.45; transform: scale(0.6); }
    70%, 100% { opacity: 0; transform: scale(1.6); }
  }

  /* ------------------------------------------------------------ responsive -- */
  @media (max-width: 1080px) {
    .zsec { grid-template-columns: minmax(0, 1fr); }
    .zsec__copy { position: static; }
    .faq { grid-template-columns: minmax(0, 1fr); }
    .faq > h2 { position: static; }
  }

  @media (max-width: 900px) {
    .hero,
    .receipt-sec,
    .desk-after,
    .facts,
    .page-head--split,
    .tokenband { grid-template-columns: minmax(0, 1fr); }
    .receipt-sec__copy { position: static; }
    .bento__cell:nth-child(n) { grid-column: 1 / -1; min-height: 0; }
    .how__cell:nth-child(n) { grid-column: 1 / -1; }
    .faq__list { grid-template-columns: minmax(0, 1fr); gap: 28px; }

    .merge__body { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .merge__pin {
      grid-column: 1;
      grid-row: 1;
      top: 76px;
      margin: 0 calc(-1 * var(--gutter));
      padding: 8px var(--gutter) 18px;
      background: var(--ground);
      box-shadow: 0 16px 16px -16px rgba(58, 44, 143, 0.18);
    }
    .merge__steps { grid-column: 1; grid-row: 2; }
    .merge__step { min-height: 52vh; justify-content: flex-start; padding-top: 28px; }
    .merge__step:first-child { min-height: 44vh; padding-top: 28px; }
    .mg { --name-w: 7.4em; --k: 0.62; --wallet-h: 44px; padding: 46px 18px 18px; }
    .mg__label { top: 18px; left: calc(18px + var(--name-w) + 12px + (100% - 36px - var(--name-w) - 12px) / 2); }
    .mg__row { height: 40px; gap: 12px; }
    .mg__name { font-size: 13px; }
    .mg__wallet { gap: 12px; margin: 16px -18px -18px; padding: 14px 18px; }

    .desk-grid { grid-template-columns: minmax(0, 1fr); }
    .desk-aside { grid-column: 1; grid-row: 1; position: static; }
    .desk-tool { grid-column: 1; grid-row: 2; }
  }

  @media (max-width: 640px) {
    .lead,
    .hero__sub { font-size: 17px; }
    .display { font-size: clamp(38px, 10.6vw, 46px); letter-spacing: -0.045em; margin-bottom: 16px; }
    #hero-h { font-size: clamp(30px, 8.4vw, 36px); }
    .hero__sub { margin-bottom: 20px; }
    .hero__cta .btn { flex: 1 1 auto; min-height: 46px; padding: 0 18px; }
    .sealstrip { margin: 0 10px -22px; padding: 14px 18px 36px; }
    .sealstrip__promise { font-size: 16px; }
    .sealstrip__wallet i { width: 64px; }
    .hero__book { min-height: 520px; }

    .statbook { gap: 0 12px; }
    .stat__value { font-size: 24px; min-height: 26px; }
    /* On a phone the first screen holds the headline, the rail with its time, fee and state
       (see the rail-strip block at the end), the promise and the book with its reference and
       first rows. The sub-line moves under the book, where it reads as the book's caption, the
       calls to action follow it, then the counts. The rhythm comes from margins, not the grid gap. */
    .hero { row-gap: 0; padding-top: 4px; }
    .hero__copy { display: contents; }
    .hero__rail { order: 1; margin-top: 14px; }
    .hero__object { order: 2; margin-top: 14px; }
    .hero__sub { order: 3; margin: 28px 0 0; }
    .hero__cta { order: 4; }
    .hero__stats { order: 5; margin-top: 24px; }

    .ledger__cols { display: none; }
    .ledger__row { grid-template-columns: minmax(0, 1fr); }
    .ledger__k { display: block; margin-bottom: 4px; font: 500 12px/1.3 var(--mono); }
    .ledger__sealed .ledger__k { color: var(--on-seal-2); }
    .ledger__public .ledger__k { color: var(--ink-3); }
    .ledger__sealed,
    .ledger__public,
    .ledger__foot { padding: 18px 20px; }

    .foot__top { grid-template-columns: minmax(0, 1fr); }
    .foot__legal { grid-template-columns: minmax(0, 1fr); }
  }

  /* the nav folds into a sheet under the pill */
  @media (max-width: 820px) {
    .bar { padding-top: 8px; }
    .bar__pill { min-height: 56px; padding: 6px 6px 6px 16px; flex-wrap: wrap; }
    .live { margin-left: auto; height: 36px; padding: 0 12px 0 10px; }
    .js .menu { display: inline-block; }
    html:not(.js) .bar__pill { border-radius: 28px; }
    html:not(.js) .nav { order: 5; width: 100%; flex-wrap: wrap; margin: 4px 0 0; }
    .js .nav {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      right: 0;
      z-index: 60;
      flex-direction: column;
      align-items: stretch;
      gap: 2px;
      margin: 0;
      padding: 10px;
      border-radius: 24px;
      background: rgba(255, 255, 255, 0.97);
      -webkit-backdrop-filter: blur(20px) saturate(1.6);
      backdrop-filter: blur(20px) saturate(1.6);
      box-shadow: 0 0 0 1px rgba(27, 26, 36, 0.06), 0 24px 48px -24px rgba(58, 44, 143, 0.45);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-8px) scale(0.98);
      transform-origin: 50% 0;
      transition: opacity 0.35s var(--ease), transform 0.45s var(--ease-2), visibility 0s linear 0.45s;
    }
    .js .nav a { padding: 14px 16px; font-size: 22px; font-weight: 400; letter-spacing: -0.02em; border-radius: 16px; }
    .js .bar[data-open] .nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
    @media (prefers-reduced-motion: no-preference) {
      .js .nav a { opacity: 0; transform: translateY(10px); transition: opacity 0.4s var(--ease), transform 0.5s var(--ease), background-color 0.3s var(--ease); }
      .js .bar[data-open] .nav a { opacity: 1; transform: none; }
      .js .bar[data-open] .nav a:nth-child(2) { transition-delay: 0.04s; }
      .js .bar[data-open] .nav a:nth-child(3) { transition-delay: 0.08s; }
      .js .bar[data-open] .nav a:nth-child(4) { transition-delay: 0.12s; }
      .js .bar[data-open] .nav a:nth-child(5) { transition-delay: 0.16s; }
    }
  }

  /* the text leaves the screen, not the live region */
  @media (max-width: 380px) {
    .live__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .live { padding: 0 14px; }
  }
}

/* The rail-strip in the hero on a phone: one compact card, the line, then the time, fee and
   state wrapping under it in a smaller size, then the source, so the rail shares the first screen
   with the book. Unlayered, so these meet rail.css (unlayered, loaded later) on specificity. */
@media (max-width: 640px) {
  .hero__rail .rl-strip { gap: 4px; padding: 10px 12px; border-radius: 16px; }
  .hero__rail .rl-line { font-size: 15px; line-height: 1.3; }
  .hero__rail .rl-facts { gap: 0 12px; font-size: 12px; line-height: 1.4; }
  .hero__rail .rl-facts .state { padding-top: 0; padding-bottom: 0; }
  .hero__rail .rl-strip > .hint,
  .hero__rail .rl-strip > .src { font: 400 12px/1.35 var(--sans); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}