/* The Aera landing: calm and exact. Live market data is the proof, set on the ordinary Aera
   ground with hairline rules and quiet type. Colour carries market meaning only: mint for bids,
   up and the primary action, pink for asks, Bitcoin orange for Bitcoin in the bridge and merged-mining drawings,
   amber for stale data and the environment. What moves is real data, plus three authored moments: the Bitcoin
   Bridge's crossing, the Rootstock chapter's merged-mining chain and the Security chapter's audit scanner, which run
   on the compositor and only while they are on screen. */
.landing[hidden] { display: none; }
.landing {
  --g: clamp(20px, 4vw, 64px);
  --lb-section: clamp(88px, 10vw, 144px);
  --lb-radius: 6px;
  /* One page grid: twelve columns between the gutters. Every section places its columns on these lines. */
  --lb-cols: repeat(12, minmax(0, 1fr));
  --lb-gap: clamp(24px, 2.6vw, 40px);
  --lb-btc: #ff931e;
  background: var(--ground-fill); color: var(--text);
}
.landing ::selection { background: var(--selection); color: var(--text); }

/* ---------- Shared type ---------- */
.lb-display {
  margin: 0; font: 700 clamp(3rem, 6.2vw, 6rem)/1 var(--font-display); font-stretch: 88%;
  letter-spacing: -.028em; word-spacing: .06em; text-wrap: balance; color: var(--text);
}
#lb-title > span { display: block; }
#lb-title .lb-title-work { color: var(--positive); }
.lb-heading {
  max-width: 18ch; margin: 0; font: 650 clamp(2rem, 3.6vw, 3.25rem)/1.06 var(--font-display); font-stretch: 90%;
  letter-spacing: -.022em; text-wrap: balance; color: var(--text);
}
.lb-num { font-family: var(--fontfam-term); font-variant-numeric: tabular-nums; }
.lb-nowrap { white-space: nowrap; }
.lb-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lb-btn svg, .lb-row-end { flex: none; transition: transform 200ms cubic-bezier(.2, .8, .2, 1); }
.lb-btn:hover svg { transform: translateX(3px); }
.lb-link { margin-top: 28px; }

/* ---------- Hero: headline beside the live depth chart ---------- */
.lb-stage {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: 48px clamp(40px, 6vw, 104px);
  padding: clamp(56px, 8vw, 112px) var(--g) clamp(48px, 6vw, 88px);
}
.lb-hero-copy { display: grid; align-content: start; gap: 28px; min-width: 0; }
.lb-hero-side { display: grid; justify-items: start; gap: 32px; max-width: 46ch; }
.lb-lede { margin: 0; color: var(--text-soft); font-size: 1.125rem; line-height: 1.6; }
.lb-lede .aera-prose-link { color: var(--text); text-underline-offset: 4px; }

.lb-depth { min-width: 0; margin: 0; border: 1px solid var(--rule-strong); border-radius: var(--lb-radius); background: var(--panel-fill); }
.lb-depth-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding: 14px 20px; border-bottom: 1px solid var(--terminal-rule); }
.lb-depth-title { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.lb-depth-pair { color: var(--text); font: 650 1.125rem/1.2 var(--font-display); font-stretch: 92%; letter-spacing: -.005em; }
.lb-depth-status { display: inline-flex; align-items: center; gap: 7px; color: var(--text-soft); font: 400 .75rem/1 var(--fontfam-term); }
.lb-depth-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rule-bright); }
.lb-depth[data-state="live"] .lb-depth-status::before { background: var(--positive); }
.lb-depth[data-state="stale"] .lb-depth-status { color: var(--network-label); }
.lb-depth[data-state="stale"] .lb-depth-status::before { background: var(--network-label); }
.lb-depth-figures { display: flex; gap: 24px; margin: 0; }
.lb-depth-figures div { display: flex; align-items: baseline; gap: 8px; }
.lb-depth-figures dt { color: var(--text-muted); font: 500 .6875rem/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; }
.lb-depth-figures dd { margin: 0; color: var(--text); font: 400 .875rem/1 var(--fontfam-term); font-variant-numeric: tabular-nums; }
/* The plot leaves a gutter on its left for the gridline labels, so no label sits on a curve. */
.lb-depth-plot { position: relative; height: clamp(200px, 21vw, 280px); margin: 20px 20px 0 56px; }
.lb-depth-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lb-depth-svg path, .lb-depth-svg rect { vector-effect: non-scaling-stroke; }
.lb-depth-grid { fill: none; stroke: var(--terminal-rule); stroke-width: 1; }
.lb-depth-band { fill: rgb(236 242 239 / .035); }
.lb-depth-area--bid { fill: url(#lb-depth-bid-fill); }
.lb-depth-area--ask { fill: url(#lb-depth-ask-fill); }
.lb-depth-line { fill: none; stroke-width: 1.5; stroke-linejoin: miter; }
.lb-depth-line--bid { stroke: var(--positive); }
.lb-depth-line--ask { stroke: var(--danger-soft); }
.lb-depth-midline { fill: none; stroke: rgb(236 242 239 / .4); stroke-width: 1; stroke-dasharray: 3 4; }
.lb-depth-cursor { fill: none; stroke: var(--text-soft); stroke-width: 1; }
.lb-depth-ticks { position: absolute; inset: 0; pointer-events: none; }
.lb-depth-ticks span { position: absolute; right: calc(100% + 10px); transform: translateY(-50%); color: var(--text-muted); font: 400 .6875rem/1 var(--fontfam-term); font-variant-numeric: tabular-nums; }
.lb-depth-axis { position: relative; height: 28px; margin: 0 20px 0 56px; color: var(--text-muted); font: 400 .6875rem/28px var(--fontfam-term); font-variant-numeric: tabular-nums; border-top: 1px solid var(--rule-strong); }
.lb-depth-axis span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.lb-depth-tip {
  position: absolute; z-index: 1; margin: 0; padding: 6px 10px; transform: translate(-50%, calc(-100% - 8px)); pointer-events: none; white-space: nowrap;
  border: 1px solid var(--rule-strong); border-radius: 4px; background: var(--panel-fill); color: var(--text); font: 400 .75rem/1.3 var(--fontfam-term);
}
.lb-depth-tip[hidden] { display: none; }
.lb-depth-tip[data-side="bid"] { border-color: rgb(var(--positive-rgb) / .45); }
.lb-depth-tip[data-side="ask"] { border-color: rgb(var(--danger-soft-rgb) / .45); }
.lb-depth-empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--text-muted); font-size: .8125rem; }
.lb-depth-empty[hidden] { display: none; }
.lb-depth-legend { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 12px 20px 16px; color: var(--text-soft); font-size: .8125rem; }
.lb-depth-key { display: inline-flex; align-items: center; gap: 8px; }
.lb-depth-key::before { content: ""; width: 12px; height: 2px; }
.lb-depth-key--bid::before { background: var(--positive); }
.lb-depth-key--ask::before { background: var(--danger-soft); }
.lb-depth-key b { color: var(--text); font: 400 .8125rem var(--fontfam-term); font-variant-numeric: tabular-nums; }
.lb-depth[data-state="stale"] .lb-depth-plot, .lb-depth[data-state="stale"] .lb-depth-legend b { opacity: .6; }

/* The live strip: four instruments, each a real feed. */
.lb-board { --lb-fig: clamp(2.5rem, 4vw, 4.25rem); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0 max(0px, calc(var(--g) - 24px)); list-style: none; border-block: 1px solid var(--terminal-rule); }
.lb-row { position: relative; min-width: 0; border-left: 1px solid var(--terminal-rule); }
.lb-row:first-child { border-left: 0; }
.lb-row, .landing .btn.lb-row-link {
  display: grid; grid-template-columns: minmax(0, 1fr) 20px; grid-template-rows: auto var(--lb-fig) auto; grid-template-areas: "label end" "figure figure" "meta meta";
  align-content: start; gap: 12px; min-height: 0; padding: 24px 24px 22px;
}
.lb-row:has(> .lb-row-link) { display: block; padding: 0; }
.landing .btn.lb-row-link { height: 100%; color: inherit; text-decoration: none; transition: background-color 160ms ease-out; }
.landing .btn.lb-row-link:is(:hover, :focus-visible):not(:disabled) { background: var(--terminal-control); }
.lb-row-link:hover .lb-row-end { transform: translateX(4px); color: var(--positive); }
.lb-row-label { grid-area: label; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.lb-sym { color: var(--text); font: 600 .8125rem/1.3 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; }
.lb-note { color: var(--text-muted); font-size: .8125rem; }
.lb-figure {
  overflow: hidden; height: 1em; white-space: nowrap;
  font-family: var(--font-display); font-stretch: 65%; font-weight: 700; font-feature-settings: "tnum" 1, "lnum" 1;
  font-size: clamp(2.5rem, 4vw, 4.25rem); line-height: 1; letter-spacing: -.01em;
}
/* The figure row keeps one height, so a figure shrunk to fit its column leaves the chips beneath in line. */
.lb-board .lb-figure { grid-area: figure; align-self: end; font-size: var(--lb-fig); color: var(--text); }
.lb-row-meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--text-soft); font-size: .8125rem; line-height: 1.45; }
.lb-row-end { grid-area: end; width: 20px; height: 20px; justify-self: end; color: var(--text-muted); }
.lb-tag { display: inline-flex; align-items: center; min-height: 22px; padding: 1px 8px; border: 1px solid var(--rule-strong); border-radius: 3px; color: var(--text-soft); font: 500 .6875rem/1.3 var(--fontfam-term); letter-spacing: .02em; }
.lb-tag svg { width: 12px; height: 12px; margin: 0 5px; }
.lb-live { display: inline-flex; align-items: center; gap: 7px; color: var(--text); font-family: var(--fontfam-term); font-size: .75rem; }
.lb-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--rule-bright); }
.lb-live[data-state="live"]::before { background: var(--positive); }
.lb-live[data-state="stale"] { color: var(--network-label); }
.lb-live[data-state="stale"]::before { background: var(--network-label); }
/* Before a feed arrives the figures hold a quiet placeholder; a last-known value whose feed is interrupted stays readable, dimmed. */
.lb-figure:not([data-value]) { color: var(--rule-bright) !important; }
.lb-figure[data-stale="true"] { color: var(--text-soft) !important; }

/* Rolling digits. */
.rl { display: inline-block; height: 1em; overflow: hidden; vertical-align: top; }
.rl-strip { display: block; line-height: 1; transition: transform 900ms cubic-bezier(.2, .8, .2, 1); }
.rl-strip > span { display: block; height: 1em; }
.rl-sep { width: auto; }
.lb-reduced .rl-strip { transition: none; }

/* Ticker: the top spot and note markets by 24h volume, each a real link to its book. */
.lb-ticker { position: relative; overflow: hidden; height: 44px; border-bottom: 1px solid var(--terminal-rule); }
.lb-ticker-track { display: flex; width: max-content; height: 100%; animation: lb-marquee 70s linear infinite; }
.lb-ticker:is(:hover, :focus-within) .lb-ticker-track { animation-play-state: paused; }
.lb-tape { display: flex; align-items: center; gap: 36px; height: 100%; margin: 0; padding: 0 18px 0 36px; list-style: none; }
.lb-tape li { display: flex; align-items: center; height: 100%; white-space: nowrap; }
.lb-tape-label { color: var(--text-muted); font-family: var(--fontfam-term); font-size: .6875rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.lb-tick { display: inline-flex; align-items: center; gap: 10px; height: 100%; color: var(--text-muted); font-size: .8125rem; text-decoration: none; border-radius: 3px; }
.lb-tick:hover { color: var(--text); text-decoration: none; }
.lb-tick:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.lb-tick-pair { font-weight: 500; }
.lb-tick-value { color: var(--text); font-family: var(--fontfam-term); font-weight: 500; }
.lb-tick-change { font-family: var(--fontfam-term); font-style: normal; }
.lb-tick-change[data-tone="up"] { color: var(--positive); }
.lb-tick-change[data-tone="down"] { color: var(--danger-soft); }
.lb-tick-stale { color: var(--network-label); font-family: var(--fontfam-term); font-size: .625rem; text-transform: uppercase; letter-spacing: .04em; }
.landing .lb-tick-stale { font-size: .6875rem; }
.lb-tick[data-stale="true"] .lb-tick-value { color: var(--text-soft); }
@keyframes lb-marquee { to { transform: translateX(-50%); } }

/* ---------- Product chapters ---------- */
.lb-sheet {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 56px clamp(40px, 7vw, 120px);
  padding: var(--lb-section) var(--g); border-bottom: 1px solid var(--terminal-rule);
}
.lb-sheet-copy > p { max-width: 54ch; margin: 24px 0 0; color: var(--text-soft); font-size: 1.0625rem; line-height: 1.62; }
.lb-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; max-width: 640px; margin-top: 32px; }
.lb-split > div { padding-top: 18px; border-top: 1px solid var(--rule-strong); }
.lb-split h3 { margin: 0 0 10px; color: var(--text); font: 600 1rem/1.35 var(--font-sans); }
.lb-split p { margin: 0; color: var(--text-soft); font-size: .9375rem; line-height: 1.6; }
.lb-sheet--notes .lb-demo { order: -1; }
.lb-sheet--minor { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); padding-block: clamp(72px, 8vw, 120px); }
.lb-heading--minor { max-width: 22ch; font-size: clamp(1.75rem, 2.8vw, 2.5rem); }
.lb-sheet--minor .lb-sheet-copy > p { margin-top: 18px; max-width: 58ch; font-size: 1rem; }
.lb-sheet--minor .lb-sheet-copy > p + p { margin-top: 14px; }
.lb-sheet--minor .lb-link { margin-top: 20px; }
/* Three plain facts under the MoC copy, ruled like a spec sheet: the point on the left, the detail beside it. */
.lb-facts { max-width: 640px; margin: 28px 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--terminal-rule); }
.lb-facts li { display: grid; grid-template-columns: minmax(150px, 13rem) minmax(0, 1fr); align-items: baseline; gap: 6px 24px; padding: 16px 0; border-top: 1px solid var(--terminal-rule); }
.lb-facts h3 { margin: 0; color: var(--text); font: 600 .9375rem/1.4 var(--font-sans); }
.lb-facts p { margin: 0; color: var(--text-soft); font-size: .9375rem; line-height: 1.6; }

/* Panels: one hairline border, one radius, no shadow. */
.lb-demo { position: relative; justify-self: center; width: min(100%, 500px); margin: 0; border: 1px solid var(--rule-strong); border-radius: var(--lb-radius); background: var(--panel-fill); font-size: .875rem; }
.lb-demo-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; padding: 4px 20px;
  border-bottom: 1px solid var(--terminal-rule); color: var(--text-muted); font: 500 .75rem/1.4 var(--font-sans); letter-spacing: .08em; text-transform: uppercase;
}
.lb-demo-head > span:first-child { color: var(--text-soft); }
.lb-sheet--minor .lb-demo { order: 0; width: min(100%, 420px); font-size: .8125rem; }
.lb-demo dl { margin: 0; padding: 4px 20px; }
.lb-demo dl div { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--terminal-rule); }
.lb-demo dl div:last-child { border-bottom: 0; }
.lb-demo dt { color: var(--text-soft); }
.lb-demo dt small { display: block; margin-top: 3px; color: var(--text-muted); font-size: .75rem; line-height: 1.4; }
.lb-demo dd { margin: 0; text-align: right; color: var(--text); }
.lb-demo .lb-receive { align-items: flex-start; }
.lb-demo .lb-receive dd { padding-top: 1px; white-space: nowrap; }
.lb-note-principal { display: block; color: var(--text); font: 700 3rem/1 var(--font-display); font-stretch: 65%; font-variant-numeric: tabular-nums; }
.lb-note-principal + span { display: block; margin-top: 6px; color: var(--text-soft); font-size: .75rem; }

/* Example charts: labelled, static. */
.lb-chart { margin: 0; padding: 20px 20px 8px; border-bottom: 1px solid var(--terminal-rule); }
.lb-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* Labels are HTML over the drawing, so they hold 11px at every width. */
.lb-chart-art { position: relative; width: 100%; }
.lb-chart-tag { position: absolute; left: var(--x); top: var(--y); color: var(--text-soft); font: 500 .6875rem/1.3 var(--font-sans); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.lb-chart-tag--end { transform: translateX(-100%); }
.lb-chart-tag--accent { color: var(--positive); }
.lb-chart-tag--bright { color: var(--text); }
.lb-chart-tag--num { color: var(--text-muted); font-family: var(--fontfam-term); letter-spacing: 0; text-transform: none; }
.lb-chart-caption { margin: 14px 0 0; color: var(--text-muted); font-size: .8125rem; line-height: 1.45; }
.lb-chart-grid { fill: none; stroke: var(--terminal-rule); stroke-width: 1; }
.lb-par-fill { fill: rgb(var(--positive-rgb) / .06); }
.lb-par-line { fill: none; stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 4 5; }
.lb-par-gap { fill: none; stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 2 4; }
.lb-par-curve { fill: none; stroke: var(--positive); stroke-width: 2; stroke-linecap: round; }
.lb-par-buy { fill: var(--text); }
.lb-par-end { fill: var(--positive); }
.lb-par-ring { fill: none; stroke: rgb(var(--positive-rgb) / .4); stroke-width: 1; }
.lb-trigger-line { fill: none; stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 5 5; }
.lb-trigger-path { fill: none; stroke: var(--text-muted); stroke-width: 1.5; stroke-linejoin: round; }
.lb-trigger-after { fill: none; stroke: var(--positive); stroke-width: 2; stroke-linejoin: round; }
.lb-trigger-hit { fill: var(--positive); }
.lb-trigger-ring { fill: none; stroke: rgb(var(--positive-rgb) / .45); stroke-width: 1; }

/* ---------- Bitcoin Bridge: the Powpeg as a two-deck span ---------- */
/* A flat elevation in a 640 x 250 drawing: the span stands on a stack of Bitcoin blocks at one end and Rootstock
   blocks at the other, with the Powpeg as its tower. BTC crosses on the upper deck and RBTC crosses back on the lower
   one; each changes identity at the tower while its signers light. The drawing is still SVG. Only HTML marks move,
   by transform and opacity on the compositor, and only while the figure is on screen (`data-run="running"`, set in
   landing.js); otherwise, and under reduced motion, each crossing waits at its first stop. */
.lb-sheet--bridge .lb-span-panel { justify-self: start; width: min(100%, 720px); }
.lb-span-panel dd { white-space: nowrap; }
.lb-span { margin: 0; padding: 24px 20px 16px; border-bottom: 1px solid var(--terminal-rule); }
.lb-span-art { --u: calc(100cqw / 640); position: relative; aspect-ratio: 640 / 250; overflow: hidden; container-type: inline-size; }
.lb-span-art svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.lb-span-art path { fill: none; vector-effect: non-scaling-stroke; }
.lb-span-ground { stroke: var(--rule-bright); stroke-width: 1; }
.lb-span-gap { stroke: var(--rule-strong); stroke-width: 1; stroke-dasharray: 2 6; }
.lb-span-cables { stroke: var(--rule-bright); stroke-width: 1; }
.lb-span-truss { stroke: var(--rule-strong); stroke-width: 1; }
.lb-span-pylon { stroke: var(--text-soft); stroke-width: 1.5; }
.lb-span-deck { stroke: var(--text-muted); stroke-width: 2; }
.lb-span-block { fill: var(--lb-btc); }
.lb-span-core { fill: rgb(4 6 5 / .55); }
.lb-span-rsk { fill: rgb(170 181 175 / .75); }
.lb-span-signers { fill: var(--rule-bright); }
.lb-span-lamp { position: absolute; left: calc(317 * var(--u)); top: calc((67 - var(--i) * 10) * var(--u)); width: calc(6 * var(--u)); height: calc(6 * var(--u)); background: var(--text); opacity: 0; }
.lb-span-lane { position: absolute; color: var(--text-muted); font: 500 .6875rem/1.3 var(--fontfam-term); white-space: nowrap; }
.lb-span-lane--in { left: calc(8 * var(--u)); top: calc(120 * var(--u) - 8px); translate: 0 -100%; }
.lb-span-lane--out { right: calc(84 * var(--u)); top: calc(152 * var(--u) + 10px); }
@container (max-width: 480px) { .lb-span-lane { display: none; } }
/* The crossings fade in and out over the approach roads beyond each end of the span. */
.lb-span-cars { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); }
.lb-span-car { position: absolute; inset: 0; }
.lb-span-car--in { transform: translateX(18.75%); }
.lb-span-car--out { transform: translateX(84.375%); }
.lb-span-coin { position: absolute; left: 0; translate: -50% -100%; }
.lb-span-car--in .lb-span-coin { top: calc(120 * var(--u) - 1px); }
.lb-span-car--out .lb-span-coin { top: calc(152 * var(--u) - 1px); }
.lb-span-coin--btc { width: max(7px, calc(11 * var(--u))); aspect-ratio: 1; background: rgb(117 69 16); box-shadow: inset 0 0 0 max(2px, calc(3 * var(--u))) var(--lb-btc); }
.lb-span-coin--rbtc { width: max(10px, calc(15 * var(--u))); height: max(4px, calc(5 * var(--u))); background: var(--text); }
.lb-span-to { opacity: 0; }
.lb-span-names { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; margin-top: 10px; color: var(--text-soft); font: 500 .6875rem/1.3 var(--font-sans); letter-spacing: .05em; text-transform: uppercase; }
.lb-span-names > :last-child { justify-self: end; }
.lb-span-name--btc { color: var(--lb-btc); }
#lb-span[data-run="running"] .lb-span-car--in { animation: lb-span-in 16s linear -2.4s infinite; }
#lb-span[data-run="running"] .lb-span-car--out { animation: lb-span-out 16s linear -2.4s infinite; }
#lb-span[data-run="running"] .lb-span-from { animation: lb-span-from 16s linear -2.4s infinite; }
#lb-span[data-run="running"] .lb-span-to { animation: lb-span-to 16s linear -2.4s infinite; }
#lb-span[data-run="running"] .lb-span-lamp { animation: lb-span-sign 16s linear calc(var(--i) * .2s - 2.4s) infinite; }
/* One 16s crossing: in from the approach, wait at the first stop, cross to the tower, wait while the signers light,
   change identity, carry on to the far stop, then leave over the far approach. */
@keyframes lb-span-in {
  0% { transform: translateX(-4%); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  10%, 20% { transform: translateX(18.75%); animation-timing-function: cubic-bezier(.55, 0, .2, 1); }
  31%, 45% { transform: translateX(50%); animation-timing-function: cubic-bezier(.55, 0, .2, 1); }
  56%, 66% { transform: translateX(84.375%); animation-timing-function: cubic-bezier(.55, 0, .7, 1); }
  76%, 100% { transform: translateX(104%); }
}
@keyframes lb-span-out {
  0% { transform: translateX(104%); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  10%, 20% { transform: translateX(84.375%); animation-timing-function: cubic-bezier(.55, 0, .2, 1); }
  31%, 45% { transform: translateX(50%); animation-timing-function: cubic-bezier(.55, 0, .2, 1); }
  56%, 66% { transform: translateX(18.75%); animation-timing-function: cubic-bezier(.55, 0, .7, 1); }
  76%, 100% { transform: translateX(-4%); }
}
@keyframes lb-span-from { 0%, 41% { opacity: 1; } 45%, 90% { opacity: 0; } 92%, 100% { opacity: 1; } }
@keyframes lb-span-to { 0%, 41% { opacity: 0; } 45%, 90% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes lb-span-sign { 0%, 31% { opacity: 0; } 33%, 44% { opacity: 1; } 48%, 100% { opacity: 0; } }

/* ---------- Live order book ---------- */
.lb-book-market { color: var(--text); font-weight: 500; text-decoration: none; }
.lb-book-market:hover { color: var(--positive); text-decoration: none; }
.lb-book-market:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.lb-book { position: relative; }
.lb-book ol { margin: 0; padding: 8px 0; list-style: none; transition: opacity 300ms ease-out; }
.lb-book li { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 20px; isolation: isolate; overflow: clip; font-family: var(--fontfam-term); font-variant-numeric: tabular-nums; }
/* Depth: a full-width wash slid in from the right edge, so it glides on the compositor, with the same quiet 1px leading
   edge as the Trading order book. The bar sits behind the figures. */
.lb-book li > i { position: absolute; z-index: -1; inset: 1px 0; transform: translateX(calc((1 - var(--w, 0)) * 100%)); transition: transform 800ms cubic-bezier(.2, .8, .2, 1); }
.lb-book li > i { --edge: rgb(var(--positive-rgb) / .55); --wash: rgb(var(--positive-rgb) / .12); background: var(--wash); box-shadow: inset 1px 0 var(--edge); }
.lb-book .ask { color: var(--danger-soft); } .lb-book .ask > i { --edge: rgb(var(--danger-soft-rgb) / .55); --wash: rgb(var(--danger-soft-rgb) / .12); }
.lb-book .bid { color: var(--positive); }
/* The depth a snapshot added or removed at a level, lit while the bar glides through it. */
.lb-book-delta { position: absolute; z-index: -1; top: 1px; bottom: 1px; pointer-events: none; }
.lb-book .ask > .lb-book-delta { background: rgb(var(--danger-soft-rgb) / .38); }
.lb-book .bid > .lb-book-delta { background: rgb(var(--positive-rgb) / .34); }
.lb-book li > span:last-of-type { color: var(--text-soft); }
.lb-book li.empty, .lb-book li.empty > span:last-of-type { color: var(--rule-bright); }
/* Sizes and the spread slide to a new value inside their own clip. */
.lb-book-size, .lb-book-spread { position: relative; display: inline-flex; justify-content: flex-end; overflow: hidden; }
.lb-v { display: block; white-space: nowrap; }
.lb-v--out { position: absolute; top: 0; right: 0; }
.lb-book .mid { margin: 4px 0; padding-block: 18px; border-block: 1px solid var(--terminal-rule); color: var(--text); font-family: var(--font-display); font-stretch: 65%; font-size: 2.5rem; font-weight: 700; line-height: 1; font-feature-settings: "tnum" 1, "lnum" 1; }
.lb-book-mid-fig { display: block; height: 1em; white-space: nowrap; }
.lb-book .mid > .lb-book-spread { color: var(--text-muted); font: .75rem/1.4 var(--fontfam-term); }
/* Departing levels play out in a copy above the list, outside the accessibility tree. */
.lb-book-ghosts { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.lb-book-ghosts li { position: absolute; box-sizing: border-box; }
/* A market's first levels wait for the reveal until the book is in view. */
.lb-book[data-reveal="pending"] #lb-book-rows > li { opacity: 0; }
.lb-book[data-state="stale"] ol { opacity: .6; }
.lb-book-note { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 20px; border-top: 1px solid var(--terminal-rule); color: var(--text-muted); font-family: var(--fontfam-term); font-size: .6875rem; }
.lb-book-note::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--rule-bright); }
.lb-book[data-state="live"] .lb-book-note::before { background: var(--positive); }
.lb-book[data-state="stale"] .lb-book-note { color: var(--network-label); } .lb-book[data-state="stale"] .lb-book-note::before { background: var(--network-label); }
.lb-reduced .lb-book li > i { transition: none; }

/* ---------- Rootstock: merged-mining diagram, ruler and milestones ---------- */
.lb-chain { position: relative; padding: var(--lb-section) 0 0; border-bottom: 1px solid var(--terminal-rule); overflow: hidden; }
.lb-chain-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .9fr); align-items: end; gap: 24px clamp(40px, 7vw, 120px); padding: 0 var(--g) clamp(40px, 5vw, 64px); }
.lb-chain-title { max-width: 16ch; margin: 0; color: var(--text); font: 650 clamp(2rem, 3.6vw, 3.25rem)/1.06 var(--font-display); font-stretch: 90%; letter-spacing: -.022em; text-wrap: balance; }
.lb-chain-lede { max-width: 54ch; margin: 0 0 .3em; color: var(--text-soft); font-size: 1.0625rem; line-height: 1.6; }
.lb-field { position: relative; margin: 0; height: clamp(280px, 30vw, 400px); overflow: hidden; border-top: 1px solid var(--terminal-rule); border-bottom: 1px solid var(--terminal-rule); }
/* The strip is one cycle wider than the view and moves only by transform (see landing.js). The track fades it in on
   the left and cuts it just past the tip, so each new block comes out from under the fixed mint tip. */
.lb-field-track {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 var(--cut, 95%), transparent var(--cut, 95%));
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 var(--cut, 95%), transparent var(--cut, 95%));
}
.lb-field canvas { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; }
.lb-field-tip { position: absolute; left: var(--tip-x, -99px); top: var(--tip-y, 0); width: var(--tip-w, 0); height: var(--tip-h, 0); background: var(--positive); }
.lb-field-legend { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto; padding: 18px var(--g) 16px; pointer-events: none; font-size: .8125rem; line-height: 1.45; color: var(--text-soft); }
.lb-field-legend p { max-width: 38ch; margin: 0; }
.lb-field-legend strong { font-weight: 600; }
.lb-field-btc { grid-row: 1; }
.lb-field-btc strong { color: var(--lb-btc); }
.lb-field-rsk { grid-row: 3; align-self: end; }
.lb-field-rsk strong { color: var(--text); }
.lb-ruler { position: relative; height: 56px; margin: clamp(40px, 5vw, 64px) var(--g) 0; }
.lb-ruler-line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule-strong); }
.lb-ruler-mark { position: absolute; top: 0; left: var(--at); display: grid; justify-items: start; gap: 10px; transform: translateX(-50%); color: var(--text-muted); font-family: var(--fontfam-term); font-size: .75rem; }
.lb-ruler-mark:first-of-type { transform: none; }
.lb-ruler-mark--now { transform: translateX(-100%); justify-items: end; color: var(--positive); }
.lb-ruler-mark i { display: block; width: 1px; height: 12px; background: currentColor; justify-self: center; }
.lb-ruler-mark:first-of-type i { justify-self: start; }
.lb-ruler-mark--now i { justify-self: end; width: 7px; height: 7px; margin-top: -3px; border-radius: 50%; }
.lb-milestones { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.25fr); gap: 28px clamp(24px, 3vw, 48px); margin: 12px 0 0; padding: 0 var(--g) clamp(72px, 8vw, 112px); list-style: none; }
.lb-milestones li { display: grid; align-content: start; gap: 10px; }
.lb-year { font-family: var(--fontfam-term); font-size: .75rem; color: var(--text-muted); }
.lb-milestones h3 { margin: 0; color: var(--text); font: 600 1.0625rem/1.3 var(--font-sans); }
.lb-milestones p { margin: 0; color: var(--text-soft); font-size: .9375rem; line-height: 1.55; max-width: 34ch; }
.lb-milestone--now { padding-left: clamp(16px, 2vw, 28px); border-left: 1px solid var(--terminal-rule); }
.lb-milestone--now .lb-year { color: var(--positive); }
.lb-days { display: grid; gap: 4px; margin: 0; }
.lb-days-figure { color: var(--text); font-size: clamp(2.75rem, 4.6vw, 4.5rem); }
.lb-days-unit { color: var(--text); font-size: 1rem; font-weight: 600; }
.lb-milestone--now > p:last-child { max-width: 40ch; }

/* ---------- Security ---------- */
.lb-security {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-areas: "copy audit" "guards guards"; align-items: start; gap: 56px clamp(40px, 6vw, 112px);
  padding: var(--lb-section) var(--g); border-bottom: 1px solid var(--terminal-rule);
}
.lb-security-copy { grid-area: copy; }
.lb-security-lede { max-width: 50ch; margin: 24px 0 0; color: var(--text-soft); font-size: 1.125rem; line-height: 1.6; }
.lb-audit { grid-area: audit; justify-self: stretch; width: 100%; }
/* The audit scanner: a block of contract bytecode read by three models at once. Each reader is a hairline with a
   short mint wash behind it, and the bytes it has just passed are lit. Readers and their lit copies move only by
   transform, on the compositor, and only while the panel is on screen (`data-scan="running"`); otherwise, and
   under reduced motion, they stand still at their resting places. No canvas and no frame loop. */
.lb-scan {
  --lane: 40px; --line: 20px; --lines: 12; --x0: calc(16px + 6ch); --trail: clamp(88px, 26cqw, 180px);
  position: relative; height: calc(var(--lane) + var(--lines) * var(--line) + 4px); overflow: hidden;
  border-bottom: 1px solid var(--terminal-rule);
  font: 400 12px/20px var(--fontfam-term); font-variant-numeric: tabular-nums; font-feature-settings: "zero" 1;
}
.lb-scan pre { margin: 0; font: inherit; white-space: pre; }
.lb-scan-bytes {
  position: absolute; top: var(--lane); left: 0; right: 0; padding: 0 16px; color: color-mix(in srgb, var(--text-soft) 30%, transparent);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent);
}
.lb-scan-bytes .o { color: color-mix(in srgb, var(--text-muted) 70%, transparent); }
.lb-scan::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--lane) - 6px); height: 1px; background: var(--terminal-rule); }
.lb-scan-lane {
  position: absolute; top: 0; bottom: 0; left: var(--x0); right: 0; overflow: hidden; container-type: inline-size;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 40px), transparent);
}
.lb-scan-reader { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; transform: translateX(var(--rest)); pointer-events: none; }
.lb-scan-reader::before { content: ""; position: absolute; left: 0; top: calc(var(--lane) - 6px); bottom: 0; width: 1px; background: color-mix(in srgb, var(--text) 62%, transparent); }
.lb-scan-trail {
  position: absolute; top: var(--lane); bottom: 0; right: 100%; width: var(--trail); overflow: hidden;
  background: linear-gradient(to right, rgb(var(--positive-rgb) / 0), rgb(var(--positive-rgb) / .09));
  -webkit-mask-image: linear-gradient(to right, transparent, #000 80%); mask-image: linear-gradient(to right, transparent, #000 80%);
}
/* The lit copy sits where the bytes are: it starts at the lane's origin and counter-moves against its reader. */
.lb-scan-lit { position: absolute; top: 0; left: var(--trail); width: 100cqw; color: var(--text); transform: translateX(calc(var(--rest) * -1)); }
.lb-scan-plate {
  position: absolute; top: 9px; left: 0; transform: translateX(-50%); padding: 3px 8px; border: 1px solid var(--rule-bright); border-radius: 3px;
  background: var(--panel-fill); color: var(--text); font: 600 .6875rem/1.3 var(--font-sans); white-space: nowrap;
}
#lb-audit[data-scan="running"] .lb-scan-reader { animation: lb-scan-read 18s linear var(--delay) infinite; }
#lb-audit[data-scan="running"] .lb-scan-lit { animation: lb-scan-hold 18s linear var(--delay) infinite; }
@keyframes lb-scan-read { from { transform: translateX(-5%); } to { transform: translateX(105%); } }
@keyframes lb-scan-hold { from { transform: translateX(5%); } to { transform: translateX(-105%); } }
/* Each model that has reviewed the contracts, with a mint check mark beside its name. */
.lb-auditors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.lb-auditor { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 4px 10px; padding: 16px 20px; border-left: 1px solid var(--terminal-rule); }
.lb-auditor:first-child { border-left: 0; }
.lb-auditor::before {
  content: ""; grid-row: 1; width: 18px; height: 18px; background: var(--positive);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lb-auditor-name { grid-column: 2; color: var(--text); font: 650 1.0625rem/1.2 var(--font-display); font-stretch: 92%; white-space: nowrap; }
.lb-auditor-state { grid-column: 2; color: var(--text-muted); font: 400 .75rem/1.2 var(--fontfam-term); }
.lb-guards { grid-area: guards; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(24px, 3vw, 48px); margin: 0; padding: 0; list-style: none; }
.lb-guards li { padding-top: 18px; border-top: 1px solid var(--rule-strong); }
.lb-guards h3 { margin: 0 0 10px; color: var(--text); font: 600 1rem/1.35 var(--font-sans); }
.lb-guards p { max-width: 48ch; margin: 0; color: var(--text-soft); font-size: .9375rem; line-height: 1.6; }

/* ---------- DAO ---------- */
.lb-custody {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: clamp(56px, 6vw, 88px) clamp(40px, 6vw, 112px);
  grid-template-areas: "copy register" "change change" "holds holds" "dao dao";
  padding: var(--lb-section) var(--g) 0;
}
.lb-custody-copy { grid-area: copy; }
.lb-custody .lb-heading { max-width: 15ch; }
.lb-custody-lede { max-width: 52ch; margin: 24px 0 0; color: var(--text-soft); font-size: 1.125rem; line-height: 1.6; }
.lb-custody-lede + .lb-custody-lede { margin-top: 16px; }
.lb-subhead { margin: 0; color: var(--text); font: 650 1.375rem/1.2 var(--font-display); font-stretch: 92%; letter-spacing: -.01em; }

/* Who controls what: a register, one row per power. A filled mint dot is a power held by the DAO's vote; a hollow
   dot is one of the two powers outside a vote. */
.lb-register { grid-area: register; justify-self: stretch; width: 100%; }
.lb-register table { width: 100%; border-collapse: collapse; }
.lb-register tr + tr { border-top: 1px solid var(--terminal-rule); }
.lb-register th { padding: 13px 12px 13px 20px; text-align: left; color: var(--text); font: 500 .9375rem/1.35 var(--font-sans); }
.lb-register th span { display: block; margin-top: 3px; color: var(--text-muted); font: 400 .8125rem/1.45 var(--font-sans); }
.lb-register td { padding: 13px 20px 13px 12px; text-align: right; vertical-align: top; white-space: nowrap; color: var(--text); font: 600 .875rem/1.35 var(--font-sans); }
.lb-register td::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: var(--positive); vertical-align: 1px; }
.lb-register [data-control="fixed"] td::before { background: var(--rule-bright); }
.lb-register [data-control="outside"] td { color: var(--text-soft); }
.lb-register [data-control="outside"] td::before { box-sizing: border-box; border: 1px solid var(--text-muted); background: none; }

/* How a change happens: four numbered steps on one rule, each with its live setting. */
.lb-change { grid-area: change; }
.lb-track { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 36px 0 0; padding: 0; list-style: none; counter-reset: lb-step; }
.lb-track::before { content: ""; position: absolute; left: 14px; right: 0; top: 14px; height: 1px; background: var(--rule-strong); }
.lb-track li { position: relative; display: grid; align-content: start; gap: 6px; padding-right: 24px; counter-increment: lb-step; }
.lb-track i { position: relative; display: grid; place-items: center; width: 29px; height: 29px; margin-bottom: 14px; border: 1px solid var(--rule-bright); border-radius: 50%; background: var(--ground-fill); color: var(--text-soft); font: 500 .75rem/1 var(--fontfam-term); font-style: normal; }
.lb-track i::before { content: counter(lb-step); }
.lb-track strong { color: var(--text); font: 600 1.125rem/1.3 var(--font-sans); }
.lb-track span { max-width: 30ch; color: var(--text-soft); font-size: .9375rem; line-height: 1.55; }
.lb-track .lb-track-fig { max-width: none; margin-bottom: 4px; color: var(--text-muted); font-size: .8125rem; line-height: 1.45; }
.lb-track-fig b { color: var(--text); font: 500 .8125rem/1.45 var(--fontfam-term); font-variant-numeric: tabular-nums; }
.lb-notice {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 8px 24px;
  margin: 44px 0 0; padding-top: 20px; border-top: 1px solid var(--rule-strong);
}
.lb-notice-label { color: var(--text-soft); font: 500 .75rem/1.4 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; }
.lb-notice-figure { color: var(--text-soft); font-size: 1rem; white-space: nowrap; }
.lb-notice-figure b { margin-right: 4px; color: var(--text); font: 700 2.25rem/1 var(--font-display); font-stretch: 65%; font-feature-settings: "tnum" 1, "lnum" 1; }
#lb-gov[data-state="stale"] .lb-track-fig b, #lb-gov[data-state="stale"] .lb-notice-figure b { opacity: .55; }

.lb-holds { grid-area: holds; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px var(--lb-gap); margin: 0; padding: 0; list-style: none; }
.lb-holds li { padding-top: 18px; border-top: 1px solid var(--rule-strong); }
.lb-holds h3 { margin: 0 0 10px; color: var(--text); font: 600 1rem/1.35 var(--font-sans); }
.lb-holds p { max-width: 44ch; margin: 0; color: var(--text-soft); font-size: .9375rem; line-height: 1.6; }

.lb-dao { grid-area: dao; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; padding: 0 0 clamp(80px, 9vw, 120px); }

/* ---------- Close ---------- */
.lb-close { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 48px; padding: clamp(96px, 11vw, 160px) var(--g); border-top: 1px solid var(--terminal-rule); }
.lb-close-copy { display: grid; justify-items: start; gap: 40px; }
.lb-display--close { max-width: 14ch; font-size: clamp(2.75rem, 5.6vw, 5.5rem); }
.lb-mint { color: var(--positive); }
.lb-close-mark { width: clamp(120px, 16vw, 220px); height: auto; color: var(--text); }

/* ---------- Footer ---------- */
.lb-footer { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); align-items: start; gap: 32px; padding: 48px var(--g) 40px; border-top: 1px solid var(--terminal-rule); font-size: .875rem; }
.lb-footer-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.lb-footer-nav .btn { gap: 10px; }
.lb-footer-nav a:hover { color: var(--text); }
.lb-footer-env { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 0; padding-top: 20px; border-top: 1px solid var(--terminal-rule); color: var(--text-muted); font-size: .8125rem; }
/* The dot stays beside the first line when the note wraps on narrow screens. */
.lb-env-dot { flex: none; width: 7px; height: 7px; margin-top: calc((1lh - 7px) / 2); border-radius: 50%; background: var(--network-label); }
.lb-footer-env a { color: var(--network-label); text-underline-offset: 3px; }
.lb-footer-env[hidden] { display: none; }

/* Wide screens: every section sits on the twelve-column page grid. Copy takes columns 1–6 and its companion
   starts on column 7; Trade stands the live book on columns 5–8 between its two features; Series Notes
   runs one wide panel across 1–8 with Borrow and Lend on 9–12. */
@media (min-width: 1101px) {
  .lb-stage, .lb-sheet, .lb-chain-head, .lb-security, .lb-close, .lb-footer { grid-template-columns: var(--lb-cols); column-gap: var(--lb-gap); }
  .lb-hero-copy { grid-column: 1 / 7; }
  .lb-depth { grid-column: 7 / 13; }
  .lb-sheet-copy { grid-column: 1 / 7; }
  .lb-sheet .lb-demo { grid-column: 7 / 13; justify-self: stretch; width: auto; }
  .lb-sheet--minor .lb-demo { grid-column: 8 / 13; width: auto; }
  .lb-sheet--bridge .lb-sheet-copy { grid-column: 7 / 13; grid-row: 1; }
  .lb-sheet--bridge .lb-span-panel { grid-column: 1 / 7; grid-row: 1; width: auto; }
  .lb-sheet--bridge .lb-facts li { grid-template-columns: minmax(0, 1fr); }
  .lb-chain-title { grid-column: 1 / 7; }
  .lb-chain-lede { grid-column: 7 / 13; }
  .lb-security-copy { grid-column: 1 / 7; }
  .lb-audit { grid-column: 7 / 13; }
  .lb-security { grid-template-areas: none; }
  .lb-security-copy, .lb-audit, .lb-guards { grid-row: auto; }
  .lb-guards { grid-column: 1 / 13; grid-template-columns: var(--lb-cols); column-gap: var(--lb-gap); }
  .lb-guards li { grid-column: span 4; }
  .lb-track { grid-template-columns: var(--lb-cols); column-gap: var(--lb-gap); }
  .lb-track li { grid-column: span 3; }
  .lb-custody { grid-template-columns: var(--lb-cols); column-gap: var(--lb-gap); grid-template-areas: none; }
  .lb-custody > * { grid-row: auto; }
  .lb-custody-copy { grid-column: 1 / 7; }
  .lb-register { grid-column: 7 / 13; }
  .lb-change, .lb-holds, .lb-dao { grid-column: 1 / 13; }
  .lb-holds { grid-template-columns: var(--lb-cols); column-gap: var(--lb-gap); }
  .lb-holds li { grid-column: span 3; }
  .lb-close-copy { grid-column: 1 / 9; }
  .lb-close-mark { grid-column: 11 / 13; justify-self: end; }
  .lb-footer-brand { grid-column: 1 / 7; }
  .lb-footer-nav:nth-of-type(1) { grid-column: 7 / 10; }
  .lb-footer-nav:nth-of-type(2) { grid-column: 10 / 13; }

  .lb-sheet--notes { grid-template-areas: none; align-items: start; }
  .lb-sheet--notes .lb-sheet-copy { display: contents; }
  .lb-sheet--notes .lb-heading { grid-column: 1 / 13; grid-row: 1; max-width: 26ch; margin-bottom: 8px; }
  .lb-sheet--notes .lb-demo { grid-column: 1 / 9; grid-row: 2 / span 2; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "head head" "chart terms"; }
  .lb-sheet--notes .lb-split { grid-column: 9 / 13; grid-row: 2; grid-template-columns: minmax(0, 1fr); gap: 24px; margin: 0; }
  .lb-sheet--notes .lb-link { grid-column: 9 / 13; grid-row: 3; align-self: start; margin: 8px 0 0; }
  .lb-sheet--notes .lb-demo-head { grid-area: head; }
  .lb-sheet--notes .lb-chart { grid-area: chart; display: flex; flex-direction: column; justify-content: center; padding: 28px; border-bottom: 0; border-right: 1px solid var(--terminal-rule); }
  .lb-sheet--notes .lb-demo dl { grid-area: terms; align-self: center; padding: 8px 28px; }
}
@media (min-width: 1280px) {
  .lb-sheet--bridge .lb-sheet-copy { grid-column: 8 / 13; }
  .lb-sheet--bridge .lb-span-panel { grid-column: 1 / 8; }
  .lb-sheet--trade { align-items: start; row-gap: 48px; }
  .lb-sheet--trade .lb-sheet-copy, .lb-sheet--trade .lb-split { display: contents; }
  .lb-sheet--trade .lb-heading { grid-column: 1 / 7; grid-row: 1 / span 2; }
  .lb-sheet--trade .lb-sheet-copy > p { grid-column: 7 / 13; grid-row: 1; max-width: 60ch; margin: 0; }
  .lb-sheet--trade .lb-link { grid-column: 7 / 13; grid-row: 2; justify-self: start; margin: -24px 0 0; }
  /* The two features stand either side of the book on one shared rule, level with its top. */
  .lb-sheet--trade .lb-split > div { grid-row: 3; align-self: start; }
  .lb-sheet--trade .lb-split > div:first-child { grid-column: 1 / 5; }
  .lb-sheet--trade .lb-split > div:last-child { grid-column: 9 / 13; }
  .lb-sheet--trade .lb-book { grid-column: 5 / 9; grid-row: 3; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1279px) { .lb-milestones { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1199px) { .lb-ruler-mark--recent { display: none; } }
@media (max-width: 1100px) {
  .lb-sheet--bridge { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
  .lb-sheet--bridge .lb-sheet-copy { display: contents; }
  .lb-sheet--bridge .lb-span-panel { order: 1; margin-top: 36px; }
  .lb-sheet--bridge .lb-facts, .lb-sheet--bridge .lb-link { order: 2; }
  .lb-sheet--bridge .lb-facts { margin-top: 40px; }
  .lb-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lb-row:nth-child(odd) { border-left: 0; }
  .lb-row:nth-child(n + 3) { border-top: 1px solid var(--terminal-rule); }
  .lb-security { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "audit" "guards"; }
  .lb-audit { max-width: 720px; }
  .lb-custody { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "register" "change" "holds" "dao"; }
  .lb-register { max-width: 720px; }
  .lb-holds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .lb-stage { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .lb-sheet { grid-template-columns: minmax(0, 1fr); }
  .lb-sheet--notes .lb-demo { order: 0; }
  .lb-demo { justify-self: start; }
  .lb-sheet--minor .lb-demo { width: min(100%, 500px); }
  .lb-milestones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lb-chain-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .lb-field { height: clamp(300px, 80vw, 380px); }
  .lb-field-legend { font-size: .75rem; }
  .lb-guards { grid-template-columns: minmax(0, 1fr); }
  .lb-track { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .lb-track::before { display: none; }
  .lb-close { grid-template-columns: minmax(0, 1fr); }
  .lb-close-mark { order: -1; width: 96px; }
}
@media (max-width: 640px) {
  .lb-stage { padding-top: 40px; }
  .lb-display { font-size: clamp(2.75rem, 13vw, 4.5rem); }
  .lb-hero-side { gap: 24px; }
  .lb-hero-side .lb-btn { width: 100%; }
  .lb-depth-head { padding: 12px 16px; }
  .lb-depth-figures { gap: 16px; }
  .lb-depth-plot { height: 190px; margin: 16px 16px 0 48px; }
  .lb-depth-axis { margin: 0 16px 0 48px; }
  .lb-depth-legend { padding: 12px 16px 14px; }
  .lb-board { grid-template-columns: minmax(0, 1fr); }
  .lb-row { border-left: 0; }
  .lb-row:nth-child(n + 2) { border-top: 1px solid var(--terminal-rule); }
  .lb-row, .landing .btn.lb-row-link { gap: 8px 12px; padding: 18px var(--g); }
  .lb-row:has(> .lb-row-link) { padding: 0; }
  .lb-board { --lb-fig: clamp(2.5rem, 13vw, 3.5rem); padding: 0; }
  .lb-row-meta > span:not(.lb-tag):not(.lb-live) { display: none; }
  .lb-board .lb-row--lead .lb-row-meta > span:not(.lb-live) { display: inline; }
  .lb-split, .lb-facts li { grid-template-columns: minmax(0, 1fr); }
  .lb-holds { grid-template-columns: minmax(0, 1fr); }
  .lb-custody-lede { font-size: 1.0625rem; }
  .lb-register th { padding-left: 16px; }
  .lb-register td { padding-right: 16px; }
  .lb-notice { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .lb-milestones { grid-template-columns: minmax(0, 1fr); }
  .lb-milestone--now { padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--terminal-rule); }
  .lb-ruler { display: none; }
  .lb-field-legend p { max-width: 30ch; }
  .lb-security-lede { font-size: 1.0625rem; }
  .lb-scan { --lines: 9; --x0: calc(16px + 2ch); }
  .lb-scan-bytes .o { display: none; }
  .lb-scan-lane { -webkit-mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 20px), transparent); }
  .lb-scan-plate { padding: 2px 6px; font-size: .625rem; }
  .lb-demo-head { flex-wrap: wrap; row-gap: 2px; padding-block: 10px; }
  .lb-demo-head > span { white-space: nowrap; }
  .lb-span { padding: 18px 12px 14px; }
  .lb-track { grid-template-columns: minmax(0, 1fr); }
  .lb-auditors { grid-template-columns: minmax(0, 1fr); }
  .lb-auditor { grid-template-columns: 18px minmax(0, 1fr) auto; padding: 13px 16px; border-left: 0; }
  .lb-auditor + .lb-auditor { border-top: 1px solid var(--terminal-rule); }
  .lb-auditor-state { grid-column: 3; grid-row: 1; }
  .lb-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lb-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 380px) {
  .lb-row-label .lb-note { font-size: .75rem; }
  .lb-demo dl { padding-inline: 14px; }
  .lb-demo dl div { gap: 12px; }
  .lb-chart { padding-inline: 12px; }
  .lb-depth-figures dt { display: none; }
  .lb-track { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .lb-ticker { overflow-x: auto; scrollbar-width: thin; }
  .lb-ticker-track { animation: none; }
  #lb-tape-copy { display: none; }
  .rl-strip, .lb-book li > i, .lb-btn svg, .lb-row-end { transition: none; }
  #lb-audit .lb-scan-reader, #lb-audit .lb-scan-lit { animation: none; }
  #lb-span .lb-span-car, #lb-span .lb-span-coin, #lb-span .lb-span-lamp { animation: none; }
}