/*
 * The presentation site shares the explorer's tokens on purpose: somebody who
 * clicks through from here to a block should feel they are still in the same
 * product. Only the type scale is larger — a page read once wants more air than
 * one read every day.
 *
 * No build step and no framework. This is a page of text; anything that needs
 * npm install to render a paragraph is a liability on the one surface that has
 * to load fast for somebody who has never heard of the project.
 */

:root {
  color-scheme: light dark;

  /* Typefaces now come from yamale.css, which loads before this file. The
     stack that was here resolved to whatever the reader's operating system
     installed, so the headline of a payments network for central banks was
     rendered in Segoe UI on Windows and Helvetica on a Mac. */

  /* Brand palette. Navy carries the weight and brass is the accent -- the
     institutional reading the earlier blue did not have. Token names are kept
     so the change is one block rather than a hunt through every rule. */
  --bg: #f6f7f9;        /* paper */
  --surface: #ffffff;
  --surface-2: #f1f4f8;
  --border: #e3e7ee;    /* mist */

  --text: #0b1523;      /* ink */
  --text-muted: #5c6e88; /* slate */

  --accent: #12253f;    /* navy -- links and primary actions */
  --accent-soft: #e8eef7;
  --brass: #a87b3c;     /* reserved for emphasis, never for body text */
  --positive: #0d7a4a;
  --negative: #b02a25;

  --radius: 10px;
  --shadow: 0 1px 2px rgba(16, 20, 30, 0.06), 0 4px 12px rgba(16, 20, 30, 0.04);
  --measure: 62ch;
}

/* Dark, for the two states that reach it, written the way yamale.css writes it:
   the system preference below, GUARDED so an explicit light choice can override
   it, and the explicit dark choice after that. A token redefined in only one of
   the two leaves the other state reading a colour meant for the opposite
   ground — and since this file overrides only SOME of yamale.css's tokens, an
   unguarded block here would have paired this file's dark --bg with that file's
   light --ok. Dark green on a dark ground. That has shipped in this repository
   before. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    /* Dark grounds are the brand's ink lightened in steps, so the two themes
       are the same palette rather than two palettes that happen to coexist.
       Accent lifts to #8fa4c4 because navy on ink fails contrast outright. */
    --bg: #0b1523;        /* ink */
    --surface: #12253f;   /* navy */
    --surface-2: #18304f;
    --border: #24405f;

    --text: #e8eef7;
    --text-muted: #8fa4c4;

    --accent: #8fa4c4;
    --accent-soft: #18304f;
    --brass: #d2a65e;     /* brass lifted for dark grounds */
    --positive: #4cc38a;
    --negative: #f2777a;

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3);
  }
}

:root[data-theme='dark'] {
  --bg: #0b1523;
  --surface: #12253f;
  --surface-2: #18304f;
  --border: #24405f;

  --text: #e8eef7;
  --text-muted: #8fa4c4;

  --accent: #8fa4c4;
  --accent-soft: #18304f;
  --brass: #d2a65e;
  --positive: #4cc38a;
  --negative: #f2777a;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* .prose carries no width of its own.

   It shares an element with .wrap ("class=wrap prose"), so any max-width here
   overrides .wrap's 1060px container. Setting it to none did not widen the
   text — it removed the container, and those sections rendered flush to the
   viewport edge while every other band stayed inset. Leaving the property
   unset is what makes them measure exactly what "What it does" measures. */

a { color: var(--accent); }
a:focus-visible,
.button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------- masthead */

.masthead {
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  position: sticky;
  top: 0;
  backdrop-filter: blur(8px);
  z-index: 10;
}
.masthead__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 60px;
  flex-wrap: wrap;
}
.wordmark {
  font-weight: 650;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--text);
}
.masthead nav {
  display: flex;
  gap: 1.25rem;
  margin-inline-start: auto;
  flex-wrap: wrap;
}
.masthead nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.94rem;
}
.masthead nav a:hover { color: var(--text); }

/* -------------------------------------------------------------------- hero */

.hero { padding: 5rem 0 4rem; }

.eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

h1 {
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-size: var(--step-6);
  line-height: 1.06;
  letter-spacing: -0.028em;
  font-weight: 700;
  text-wrap: balance;
  /* No cap: the heading was 547px inside a 906px section, which read as the
     hero being a different width from every band below it. */
}

.lede {
  margin: 0 0 2rem;
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  line-height: 1.55;
  color: var(--text-muted);

}

/* ------------------------------------------------------------------ bands */

.band { padding: 4rem 0; border-top: 1px solid var(--border); }
.band--alt { background: var(--surface-2); }
.band--cta { background: var(--accent-soft); }

h2 {
  margin: 0 0 1.5rem;
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1.16;
  letter-spacing: -0.02em;
  font-weight: 600;
  text-wrap: balance;
}

/* A band is a section, and it should read as one before it is read. The rule
   is short and brass rather than full-width and grey: a hairline across the
   whole column reads as a divider between equals, which is what the page had
   and why every band looked like more of the same page. */
.band > .wrap > h2::after,
.band > .wrap > .band-head > h2::after {
  content: '';
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-top: 0.85rem;
  background: var(--brass);
}

.prose h3 {
  margin: 2rem 0 0.5rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: -0.008em;
}
.prose p { margin: 0 0 1rem; }

/* ------------------------------------------------------------------- grid */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.1rem;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem;
  box-shadow: var(--shadow);
  /* A column, so the refusal at the foot of each card can be pushed to the
     bottom. The seven descriptions are different lengths, so the one line the
     grid exists to be scanned for — what each module will NOT do — started at a
     different height in every card and stopped being a row at all. */
  display: flex;
  flex-direction: column;
}
.card h3 {
  margin: 0 0 0.6rem;
  font-size: 1.05rem;
  font-weight: 620;
}
.card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.96rem;
}

/* --------------------------------------------------------------- statuses */

/* Each row carries a word as well as a mark, and the marks differ in shape as
   well as colour — the list says what is and is not done, which is not a thing
   to communicate by hue alone. */
.status { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.status li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}
.status li:last-child { border-bottom: 0; }
.tick { color: var(--positive); font-weight: 700; }
.cross { color: var(--negative); font-weight: 700; }

/* ---------------------------------------------------------------- buttons */

.cta { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.button {
  display: inline-block;
  padding: 0.7rem 1.2rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-size: 0.97rem;
  font-weight: 550;
}
.button:hover { border-color: var(--accent); }
.button--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
@media (prefers-color-scheme: dark) {
  .button--primary { color: #0e1014; }
}

/* ----------------------------------------------------------------- footer */

footer {
  border-top: 1px solid var(--border);
  padding: 2.5rem 0;
  color: var(--text-muted);
  font-size: 0.92rem;
}
footer p { margin: 0; max-width: var(--measure); }

@media (prefers-reduced-motion: no-preference) {
  a, .button { transition: color 120ms ease, border-color 120ms ease; }
}

/* Mark beside the wordmark in the masthead. */
.wordmark { display: inline-flex; align-items: center; gap: 0.5rem; }
.brand__mark { width: 1.3rem; height: 1.3rem; flex: none; }

/* Footer.
   Full container width like every other band — the old single paragraph was
   capped at the reading measure and sat visibly narrower than the page. */
footer p { max-width: none; }
.foot__grid {
  display: grid; gap: 2rem 2.5rem;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  padding-bottom: 2rem;
}
@media (max-width: 780px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .foot__grid { grid-template-columns: 1fr; } }
.foot__col h3 {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em;
  margin: 0 0 0.75rem; color: var(--text-muted);
}
.foot__col ul { list-style: none; padding: 0; margin: 0; }
.foot__col li { margin-bottom: 0.4rem; font-size: 0.9rem; }
.foot__col--brand .wordmark { margin-bottom: 0.75rem; }

/* The notices are long by necessity. Two columns keeps them readable without
   turning the page into a wall, and they collapse to one on narrow screens. */
.foot__legal { border-top: 1px solid var(--border); padding: 1.75rem 0; }
.foot__legal h3 {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em;
  margin: 0 0 1rem; color: var(--text-muted);
}
.foot__legal p {
  font-size: 0.82rem; line-height: 1.6; color: var(--text-muted);
  margin: 0 0 0.9rem; break-inside: avoid;
}
@media (min-width: 900px) { .foot__legal { columns: 2; column-gap: 2.5rem; } .foot__legal h3 { column-span: all; } }
.foot__base {
  border-top: 1px solid var(--border); padding-top: 1.25rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.foot__base p { margin: 0; }

/* The Apps menu.
   details/summary rather than a hover menu: keyboard-reachable and usable on a
   touch screen with no JavaScript. A hover-only menu simply does not open on a
   phone. */
/* The panel is anchored to the MASTHEAD, not to the button.
   Anchoring it to the button makes its available width the distance from the
   button's right edge to the viewport's left edge — a number CSS cannot name,
   so a wide panel simply ran off the left and clipped its first column. Against
   the masthead's inner wrap, "as wide as there is room for" is exactly
   max-width: 100%, which is a number CSS can name. */
.masthead__inner { position: relative; }
.menu { display: inline-block; }
.menu > summary {
  list-style: none; cursor: pointer; user-select: none;
  color: var(--text-muted); font-size: inherit;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after { content: " ▾"; opacity: 0.6; }
.menu[open] > summary { color: var(--text); }
.menu__panel {
  /* Anchored to the inline end, not the start: the menu sits near the closing edge of the
     masthead, so a left-anchored panel ran off the viewport and clipped every
     description. */
  position: absolute; top: calc(100% + 0.6rem); inset-inline-end: 0; inset-inline-start: auto; z-index: 40;
  min-width: 20rem; padding: 0.4rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 14px 34px rgb(0 0 0 / 0.22);
}
.app-link {
  display: block; padding: 0.55rem 0.7rem; border-radius: 7px;
  text-decoration: none; color: var(--text);
}
.app-link:hover { background: var(--bg); }
.app-link strong { display: block; font-weight: 600; font-size: 0.94rem; }
.app-link span { display: block; font-size: 0.82rem; color: var(--text-muted); }

/* Fourteen consoles, grouped by who opens them.
   A single column stopped being scannable somewhere around seven, and ten of
   these were previously reachable only by typing the URL — which is not a menu
   problem so much as it is the reason nobody knew the land register existed. */
.menu__panel--wide {
  /* Wide when there is room, and never wider than the masthead it hangs from.
     auto-fit rather than a fixed three, so the columns collapse to two and then
     to one on their own instead of at a breakpoint guessed from one viewport. */
  width: 56rem; max-width: 100%;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.2rem 0.8rem; padding: 0.8rem;
}
.menu__group { min-width: 0; }
/* The tour spans the row above the three groups: it is the one destination a
   first-time visitor should take, and burying it as the fifteenth link in a
   column would be the same mistake in a tidier form. */
.menu__group--lead { grid-column: 1 / -1; }
.app-link--lead {
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); margin-bottom: 0.5rem;
}
/* Each group is an area rather than a run of links under a caption. The rule
   under the heading is what makes three audiences read as three, which is the
   whole point of grouping them — fourteen links in three unmarked columns is
   fourteen links. */
.menu__group h4 {
  margin: 0.6rem 0 0.35rem; padding: 0 0.7rem 0.35rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
/* The lead spans the row above them and is a destination, not a group, so it
   takes no rule. */
.menu__group--lead h4 { border-bottom: 0; }
@media (max-width: 640px) {
  /* In the flow rather than floating: an absolutely positioned panel on a phone
     covers the page it is a menu for. width:auto rather than a reset of
     min-width — the wide panel sets an explicit width now, and a min-width reset
     leaves that width in place and overflows the screen by 500px. */
  .menu__panel { position: static; min-width: 0; box-shadow: none; margin-top: 0.4rem; }
  .menu__panel--wide { width: auto; padding: 0.4rem; }
}

/* The same destinations in the footer, as a plain column. */
.foot__col .app-link { padding: 0.2rem 0; }
.foot__col .app-link span { display: none; }

/* Brass earns its place as the identity's second colour rather than sitting
   unused in a token. The mark's descender is brass, so the same stroke reappears
   as the active-state marker and the eyebrow -- sparing, and always structural
   rather than decorative. Never body text: it fails contrast at small sizes. */
.eyebrow { color: var(--brass); letter-spacing: .06em; }
.nav a[aria-current="page"],
.nav a.active { box-shadow: inset 0 -2px 0 var(--brass); }
.brand__mark { border-radius: 6px; }

/* ------------------------------------------------------- the proof band ---
 *
 * Four figures read off the running chain, directly under the headline.
 *
 * The claim above them is that money moves in seconds between approved
 * institutions. This is where a visitor checks it, and a page that asserts a
 * settlement time without showing one is asking to be taken on faith by the
 * audience least willing to grant it.
 *
 * Values are mono and tabular so the digits sit in columns and a changing
 * height does not shift the layout under the reader's eye. */

.proof {
  margin: 2.25rem 0 2rem;
  padding: 1.25rem 1.4rem 1.1rem;
  border: 1px solid var(--border);
  border-top: 2px solid var(--brass);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.proof__state {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

/* The dot carries the state in shape as well as colour: a filled ring when the
   chain answers, a hollow one when it does not. Colour alone would say nothing
   to a reader who cannot distinguish these two greens. */
.proof__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--text-faint);
  background: transparent;
}
.proof.is-live .proof__dot { border-color: var(--ok); background: var(--ok); }
.proof.is-live .proof__state { color: var(--ok); }
.proof.is-down .proof__dot { border-color: var(--bad); background: transparent; }
.proof.is-down .proof__state { color: var(--bad); }

.proof__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0;
}
@media (max-width: 720px) {
  .proof__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
}

.proof__item { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }

.proof__item dt {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.proof__value {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--text);
  /* A figure never breaks across two lines. A height of 1,366,584 split after
     the comma is not a smaller height, it is a different one — and this band is
     the one place on the site where a visitor checks a claim against the
     running chain. In a four-up grid at a narrow width the box scrolls; the
     digits stay together. */
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

.proof__note {
  margin: 0;
  font-size: 0.76rem;
  color: var(--text-muted);
}

/* The primary action should look like the thing to press. It was a pale panel
   with a hairline border, indistinguishable from the secondary beside it. */
.button--primary {
  background: var(--brass);
  border-color: var(--brass);
  color: #12100c;
  font-weight: 600;
}
.button--primary:hover { filter: brightness(1.06); }

/* ================================================================ bands ===
 *
 * The page was five full-width bands of prose stacked down the screen — 474,
 * 985, 858, 648 and 328 pixels tall — alternating between two greys four steps
 * apart and separated by a one-pixel hairline. Nothing had more weight than
 * anything else, so nothing read as more important than anything else, and a
 * reader arriving with a question had no way to find where it was answered.
 *
 * Three changes, in order of how much they do:
 *
 *  1. One band goes dark. A single reversal breaks a long page into a before
 *     and an after and gives the eye somewhere to land, which alternating two
 *     near-identical greys cannot do at any length.
 *  2. Sections get a label and a number in the margin, so their order is
 *     visible rather than merely present. Numbered because these four decisions
 *     ARE presented as a set of four and referred to by count.
 *  3. Cards get a mono eyebrow and real elevation instead of being paragraphs
 *     with headings inside a hairline box.
 */

/* A section header that occupies the empty left margin at wide viewports
   instead of leaving 270px of nothing beside every heading. */
.band-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.35rem;
  margin-bottom: 2rem;
}
@media (min-width: 1100px) {
  .band-head {
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 0 2.25rem;
    align-items: baseline;
  }
  .band-head > .band-num { grid-row: 1 / span 2; text-align: right; }
}

.band-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
  padding-top: 0.4rem;
}

.band-head > h2 { margin: 0; }
.band-head > .band-sub {
  margin: 0.5rem 0 0;
  color: var(--text-muted);
  max-width: 62ch;
}

/* The reversal. Its own tokens rather than a filter, so the text, the rules and
   the cards inside it are each chosen against this ground rather than inverted
   and hoped for. */
.band--dark {
  background: var(--navy);
  border-top: 0;
  --text: #eef3fa;
  --text-muted: #9db2ce;
  --border: #24405f;
  --surface: #162943;
  color: var(--text);
}
/* Deepened only where the surrounding page is already dark, so the reversal
   still reads as a reversal. Written as a media query plus an explicit stamp,
   because `:root:not([data-theme='light'])` on its own is true in the default
   un-stamped state — which is most readers — and would apply the dark-mode
   shade to a light page. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .band--dark { background: #0d1a2c; }
}
:root[data-theme='dark'] .band--dark { background: #0d1a2c; }
.band--dark h2, .band--dark h3 { color: #ffffff; }
.band--dark .card { background: var(--surface); border-color: var(--border); box-shadow: none; }

/* Cards carry a label so a reader scanning the grid gets the shape of the
   product without reading seven paragraphs. */
.card__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 0.45rem;
}
.card {
  box-shadow: var(--shadow-1);
  transition: box-shadow 120ms ease, transform 120ms ease;
}
.card h3 { margin: 0 0 0.5rem; font-size: var(--step-1); }

/* The four decisions read as a set, so they are numbered and ruled rather than
   left as four h3s in a column of prose. */
.decisions { display: grid; gap: 1.6rem; counter-reset: decision; margin-top: 0.5rem; }
.decision {
  counter-increment: decision;
  display: grid;
  gap: 0.3rem 1.5rem;
  grid-template-columns: minmax(0, 1fr);
  padding-top: 1.4rem;
  border-top: 1px solid var(--border);
}
@media (min-width: 800px) {
  .decision { grid-template-columns: 3rem minmax(0, 1fr); }
  .decision::before { grid-row: 1 / span 2; }
}
.decision::before {
  content: counter(decision, decimal-leading-zero);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  color: var(--brass);
}
.decision h3 { margin: 0; font-size: var(--step-2); }
.decision p { margin: 0.4rem 0 0; }

/* Status as a table of states rather than a list of ticks: the audience for
   this section is deciding whether to trust the rest of the page, and "built,
   not audited" is a different answer from "not built". A tick and a cross
   cannot say that, and colour alone must not be what does. */
.state-table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; }
.state-table th, .state-table td {
  text-align: left;
  padding: 0.7rem 0.9rem 0.7rem 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.state-table thead th {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.state-table td:first-child { width: 11rem; }

.state {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.67rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  white-space: nowrap;
}
.state--live { background: var(--wash-ok); color: var(--ok); }
.state--built { background: var(--wash-mute); color: var(--text-muted); }
.state--open { background: var(--wash-warn); color: var(--warn); }
.state--none { background: var(--wash-bad); color: var(--bad); }

/* ============================================================ the hero ===
 *
 * The hero was a headline, a paragraph and two buttons in a 1060px column with
 * 270px of nothing either side, on a page that never once drew what it sells.
 * It now runs in two columns at desktop width: the claim on the left, the claim
 * *drawn* on the right.
 *
 * The drawing is the point. A payment leaving one named institution and
 * arriving at another with its reference and purpose still attached is the
 * entire product, and it was being explained in four paragraphs by a page whose
 * readers decide in seconds whether to keep reading.
 */

/* The hero is centred and stacked: the claim, the figures, then the payment
   drawn at full width beneath them. Chosen over a two-column arrangement, which
   left the drawing and the text fighting for the same optical weight and never
   settled. */
.hero > .wrap { display: block; }

.wire { margin: 0; align-self: center; }
.wire svg { width: 100%; height: auto; display: block; }

.wire figcaption {
  margin-top: 0.9rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 44ch;
}

/* Every colour from a token, so the drawing follows the theme rather than
   being a picture of one theme pasted onto the other. */
.wire__node rect {
  fill: var(--surface);
  stroke: var(--border);
  stroke-width: 1;
}
.wire__packet rect {
  fill: var(--wash-brass);
  stroke: var(--brass);
  stroke-width: 1;
}
.wire__node--chain rect {
  fill: var(--navy);
  stroke: var(--navy);
}
:root[data-theme='dark'] .wire__node--chain rect { fill: #0d1a2c; stroke: #24405f; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .wire__node--chain rect { fill: #0d1a2c; stroke: #24405f; }
}

.wire__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.1px;
  fill: var(--text-muted);
}
.wire__node--chain .wire__label { fill: #9db2ce; }
.wire__live { fill: #e8eef7; }

.wire__name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  fill: var(--text);
}
.wire__amount {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 500;
  fill: var(--text);
}
.wire__mono {
  font-family: var(--font-mono);
  font-size: 11px;
  fill: var(--text);
}
.wire__note {
  font-size: 10px;
  fill: var(--text-muted);
}
.wire__rail line {
  stroke: var(--brass);
  stroke-width: 1.5;
  color: var(--brass);
}

/* ========================================================== comparison ===
 *
 * The audience decides by comparison and the page had been asking them to hold
 * three models in their head from prose. Dense on purpose: a treasurer reading
 * this is scanning rows, not sentences.
 */
.compare { width: 100%; border-collapse: collapse; min-width: 780px; font-size: 0.92rem; }
.compare th, .compare td {
  text-align: left;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.compare thead th {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom-width: 2px;
}
.compare tbody th {
  font-weight: 600;
  color: var(--text);
  width: 12rem;
}
.compare td { color: var(--text-muted); }

/* Our column is marked once, in the header, and then simply carries more
   contrast — rather than being coloured in, which would read as a claim the
   table is making rather than one the rows support. */
.compare thead .compare__ours { color: var(--brass); }
.compare td.compare__ours { color: var(--text); background: var(--wash-brass); }
.compare__strong { font-weight: 600; }
.compare__foot { margin-top: 1.2rem; color: var(--text-muted); max-width: 70ch; }

/* ======================================================== constitution ===
 *
 * Thirteen values read from the running chain. Mono and tabular so a reader can
 * compare two of them by eye, which is what a supervisor does with numbers.
 */
.rules__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.rule {
  background: var(--surface);
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.rule dt {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.rule dd {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--text);
  word-break: break-all;
}
.rule dd.rule__addr { font-size: 0.76rem; line-height: 1.45; }
.rule__note { font-size: 0.76rem; color: var(--text-muted); }
.rules__pending, .rules__foot { color: var(--text-muted); max-width: 70ch; }
.rules__foot { margin-top: 1.3rem; }

/* =========================================================== the cards ===
 * Seven headings-with-paragraphs read as one texture. A number beside each one
 * gives the grid a scannable spine and says how many there are without
 * counting. */
.card { position: relative; }
.card__n {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  color: var(--text-faint);
}

.hero--stack { padding: 4.5rem 0 3.5rem; }
.hero--stack > .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.3rem; }
.hero--stack h1 { max-width: 17ch; font-size: clamp(2.4rem, 5.6vw, 4rem); }
.hero--stack .lede { max-width: 62ch; margin: 0; }
.hero--stack .cta { justify-content: center; }
.hero--stack .proof { width: 100%; margin: 0.8rem 0 0; }
.hero--stack .wire { width: 100%; max-width: 780px; margin: 1rem auto 0; }
.hero--stack .wire figcaption { margin-left: auto; margin-right: auto; text-align: center; max-width: 56ch; }

/* ========================================================== refusals ===
 * A list of seven capabilities reads like every other chain's feature list.
 * What distinguishes this one is what each module will not do, and that was
 * buried mid-paragraph or missing. Set apart so the grid can be scanned for it. */
/* `.card .card__refuses`, not `.card__refuses`: the grid card sets `.card p {
   margin: 0 }`, which at (0,1,1) beat the class on its own — so the 0.9rem this
   rule has always asked for was never applied, and neither was the auto that
   pushes the refusal to the foot of the card. The gap came from padding-top
   instead, which is why nobody noticed. */
.card .card__refuses {
  margin: auto 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.card__refuses-k {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bad);
  margin-bottom: 0.2rem;
}

/* ======================================================== the chain ===
 * Five steps, each refused until the one before it has happened. Drawn because
 * it is a sequence, and a sequence in prose is a sequence the reader has to
 * hold in their head. */
.chainfig { margin: 0; }
.chainfig svg { width: 100%; height: auto; display: block; }
.chainfig figcaption {
  margin-top: 1rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  max-width: 74ch;
}
.cf__step rect { fill: var(--surface); stroke: var(--border); stroke-width: 1; }
.cf__step--end rect { fill: var(--wash-brass); stroke: var(--brass); }
.cf__n {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.2px;
  fill: var(--brass);
}
.cf__who {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  fill: var(--text);
}
.cf__do { font-size: 11.5px; fill: var(--text-muted); }
.cf__arrow { stroke: var(--brass); stroke-width: 1.5; color: var(--brass); }
.cf__rule { font-size: 11px; fill: var(--text-muted); }

/* The footer had five columns and four tracks, so Contact wrapped onto a row of
   its own and the whole thing read as broken. Five tracks, and the brand column
   keeps the extra width because it carries a sentence rather than a list. */
.foot__grid { grid-template-columns: 1.7fr repeat(4, 1fr); }
@media (max-width: 1000px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot__grid { grid-template-columns: 1fr; } }

/* Each app says what it is for. Seven bold links said nothing except that there
   were seven of them. */
.foot__apps { display: flex; flex-direction: column; gap: 0.6rem; }
.foot__apps a { display: block; font-weight: 600; color: var(--text); text-decoration: none; }
.foot__apps a:hover { color: var(--brass); }
.foot__apps a span {
  display: block;
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

/* 515 pixels of disclaimers sat between the footer links and the copyright —
   more than half the footer — pushing everything a visitor came for off the
   screen. Every word is kept, because they are securities and pre-production
   notices and trimming them would be the wrong kind of tidying. They are simply
   not the first thing in the footer any more.

   The summary names what is inside rather than saying "legal", so somebody
   looking for the offer disclaimer knows it is there without opening it. */
.foot__legal { margin: 0 0 1.5rem; border-top: 1px solid var(--border); padding-top: 1.2rem; }
.foot__legal > summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  list-style: none;
}
.foot__legal > summary::-webkit-details-marker { display: none; }
.foot__legal > summary::before { content: '+ '; color: var(--brass); font-weight: 700; }
.foot__legal[open] > summary::before { content: '– '; }
.foot__legal > summary:hover { color: var(--text); }
.foot__legal-body { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.9rem; }
.foot__legal-body p { font-size: 0.82rem; line-height: 1.6; max-width: 90ch; }