/* Borro, the clean pass (2026-10-15). Loaded after finish.css on the landing and the Builders page.
   Roy: "mimic the cleanliness of their builders page and the whole site ... while making it our own".

   The rhythm, section by section: a small tracked eyebrow, one headline sentence, a line or two of sub, then the
   content, with a lot of air between sections. Facts sit in hairline-ruled rows (label left, value right), big single
   numbers in tiles, surfaces in a numbered list, cards carry a thin header strip (name left, status right). One accent
   (yellow) on actions only. What stays ours: the navy page, the chrome wordmark and hero headline, the tape stripe as
   the one mark (it opens every eyebrow and tops every card), Instrument Sans for text, Archivo for display, and three
   flat ribbons of yellow tape sweeping off the right edge of the hero. */

/* ---------------------------------------------------------------- the rhythm */

.sec { padding: 104px 0 0; }
.sec:last-of-type { padding-bottom: 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 600 11px/1.4 var(--ui); letter-spacing: .18em; text-transform: uppercase; color: var(--text-3);
}
.eyebrow::before { content: ""; flex: none; width: 18px; height: 2px; background: var(--stripe); }
.sec h2, .sec h1 { max-width: 19em; margin-top: 14px; font-size: clamp(30px, 3.6vw, 44px); font-weight: 700; letter-spacing: -.035em; line-height: 1.06; }
.sec .sub { max-width: 40em; margin-top: 16px; font-size: 16.5px; line-height: 1.55; color: var(--text-2); }
.sec .sub + .sub { margin-top: 6px; }
.sec .sub code { font: 500 .88em/1.4 var(--mono); padding: 1px 6px; border-radius: 5px; background: var(--bg-2); border: 1px solid var(--line); color: var(--text); }
.sec-body { margin-top: 40px; }
.sec-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 48px; }
.go-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 32px; }

/* Hairline key/value rows. */
.kv { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.kv li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 8px 32px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.kv li > span { font: 600 11px/1.8 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.kv li > b, .kv li > div { font-weight: 500; color: var(--text); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.kv li > div p { font-weight: 500; }
.kv li > div .soft { color: var(--text-3); font-size: 13.5px; }
.kv li a { color: var(--text); font-weight: 600; text-decoration-color: rgba(238, 240, 255, .3); }
.kv li a:hover { color: var(--yellow); text-decoration-color: var(--yellow); }
.kv.left li { grid-template-columns: 200px minmax(0, 1fr); }
.kv.left li > b, .kv.left li > div { text-align: left; max-width: 52em; }
.kv.tight li { padding: 11px 0; font-size: 14.5px; }

/* Numbered rows: 01, 02 ... a title, a line, a link to the right. Hidden rows do not count (the weekend gate). */
.num { list-style: none; counter-reset: n; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.num li { counter-increment: n; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 6px 24px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--line); }
.num li::before { content: counter(n, decimal-leading-zero); font: 600 12px/1.6 var(--ui); letter-spacing: .12em; color: var(--text-3); }
.num h3, .num p { grid-column: 2; }
.num h3 { font-size: 19px; font-weight: 650; letter-spacing: -.02em; }
.num p { margin-top: 4px; max-width: 44em; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.num .go { grid-column: 3; grid-row: 1 / span 2; align-self: center; font-size: 14px; font-weight: 600; color: var(--text); text-decoration: none; white-space: nowrap; }
.num .go::after { content: " \2192"; }
.num .go:hover { color: var(--yellow); }
.num .tag { display: inline-block; margin-left: 10px; padding: 2px 7px; border-radius: 5px; font: 600 11px/1.5 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); background: var(--surface-3); vertical-align: 2px; }
.num.compact li { padding: 16px 0; grid-template-columns: 36px minmax(0, 1fr); }
.num.compact h3 { font-size: 15.5px; }
.num.compact p { font-size: 14px; margin-top: 2px; }

/* Cards with a thin header strip: name on the left, a status on the right, the tape stripe along the top edge. */
.ccard { position: relative; border: 1px solid var(--line); border-radius: var(--r3); background: var(--surface); overflow: hidden; }
.ccard::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--stripe); }
.ccard-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px 11px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.ccard-head b, .ccard-head span { font: 600 11px/1.4 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.ccard-head b { color: var(--text-2); }
.ccard-body { padding: 24px; }
.ccard .big { display: block; margin-top: 8px; font-size: clamp(44px, 5vw, 64px); font-weight: 700; letter-spacing: -.045em; line-height: 1; color: var(--text); }
.ccard .big small { display: block; margin-top: 10px; font-size: 13.5px; font-weight: 500; letter-spacing: 0; line-height: 1.4; color: var(--text-3); }
.ccard .lab { font: 600 11px/1.6 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }

/* Big single numbers in a row of tiles. */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 32px; }
.tile span { display: block; font-size: 13px; font-weight: 500; color: var(--text-3); }
.tile b { display: block; margin-top: 8px; font-size: clamp(30px, 3.4vw, 44px); font-weight: 700; letter-spacing: -.04em; line-height: 1; color: var(--text); white-space: nowrap; }
.tile b small { display: block; margin-top: 8px; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--text-3); white-space: normal; }

/* Notes in a column: a bold line and a sentence each, ruled. */
.notes { list-style: none; margin: 0; padding: 0; }
.notes li { padding: 16px 20px; border-top: 1px solid var(--line); }
.notes li:first-child { border-top: 0; }
.notes b { display: block; font-size: 15px; font-weight: 650; }
.notes p { margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--text-2); }

/* Pill buttons: the dark hero's two. */
.btn.pill { border-radius: 999px; padding: 12px 24px; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

/* ---------------------------------------------------------------- the landing */

.hero.clean { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 40px 64px; padding: 64px 0 56px; }
.hero.clean .eyebrow, .sec p.eyebrow { font-size: 11px; max-width: none; margin: 0 0 26px; }
.sec p.eyebrow { margin-bottom: 0; }
.hero.clean h1 { font-size: clamp(40px, 5vw, 66px); max-width: 11em; }
.hero.clean .lede { max-width: 30em; margin-top: 26px; font-size: 18px; }
.hero.clean .go { margin-top: 32px; }
/* The graphic: three flat ribbons of tape (an inline SVG, no outline, no shadow, still), sweeping from the lower left
   up and off the right edge of the page. The SVG is wider than its column and hangs past the wrap's gutter to the
   viewport's edge (the page clips sideways, so nothing scrolls), centred on the headline. The Drip's two chips, in the
   card finish, sit at the foot of the column on the left, under the ribbons' thin ends. */
body.home { overflow-x: clip; }
.hero.clean { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); align-items: center; }
.hero-art { position: relative; align-self: stretch; display: flex; align-items: flex-end; justify-content: flex-start; min-width: 0; min-height: 360px; }
.hero-ribbons {
  position: absolute; top: 40%; right: min(-24px, calc(600px - 50vw)); width: 640px; height: 440px; transform: translateY(-50%);
  display: block; pointer-events: none;
}
.hero-chips { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 8px 10px; }
.hero-chip-set { display: contents; }
.hero-chip-set[hidden] { display: none; }
.hero-chip {
  display: inline-flex; align-items: baseline; gap: 5px; padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--r1);
  background: var(--surface); font-size: 13px; line-height: 1.3; color: var(--text-3); white-space: nowrap;
}
.hero-chip b { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.hero-chip-go { margin-left: 6px; font-size: 13px; font-weight: 600; color: var(--text-2); text-decoration: none; white-space: nowrap; }
.hero-chip-go::after { content: " \2192"; }
.hero-chip-go:hover { color: var(--yellow); }

/* The stocks on the desk: the eyebrow fixed at the left, then a marquee of logo, ticker and price, sliding right to
   left at a slow pace (home.js sets the duration from the group's width, 40 px a second), faded at both edges. The
   track holds the group twice and slides half its width, so the loop never shows a seam. Hover or focus holds it. */
.desk-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 28px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.desk-ticker {
  position: relative; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
}
.dt-track { display: flex; width: max-content; animation: desk-slide 60s linear infinite; will-change: transform; }
.desk-ticker:hover .dt-track, .desk-ticker:focus-within .dt-track { animation-play-state: paused; }
.dt-group { display: flex; align-items: center; gap: 36px; padding-right: 36px; }
.desk-row a { display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 14px; font-weight: 600; color: var(--text); text-decoration: none; white-space: nowrap; }
.desk-row a:hover { color: var(--yellow); }
.desk-row a:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; border-radius: 4px; }
.desk-row img { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-3); }
.desk-row .dt-px { font-weight: 500; color: var(--text-3); font-variant-numeric: tabular-nums; }
.desk-row .dt-px:empty { display: none; }
@keyframes desk-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .desk-ticker { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; }
  .desk-ticker::-webkit-scrollbar { display: none; }
  .dt-track { animation: none; will-change: auto; }
  .dt-group[aria-hidden] { display: none; }
  .dt-group { padding-right: 0; }
  .desk-row a { scroll-snap-align: start; }
}

/* The live slab: four numbers from the chain, then who it is built on. */
.slab { margin-top: 56px; padding: 32px 36px 28px; border: 1px solid var(--line); border-radius: var(--r3); background: var(--surface); box-shadow: var(--e1); }
.slab-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.slab-top .live { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-3); }
.slab-top .live i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px rgba(63, 224, 181, .16); }
.built { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 36px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.built b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--text-3); white-space: nowrap; }

/* Two feature cards. */
.feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.feat { display: flex; flex-direction: column; gap: 0; padding: 32px 32px 28px; border: 1px solid var(--line); border-radius: var(--r3); background: var(--surface); }
.feat h3 { font-size: 28px; font-weight: 700; letter-spacing: -.035em; line-height: 1.1; }
.feat .n { display: flex; align-items: baseline; gap: 12px; margin-top: 18px; }
.feat .n b { font-size: 40px; font-weight: 700; letter-spacing: -.04em; line-height: 1; white-space: nowrap; }
.feat .n span { font-size: 13.5px; color: var(--text-3); }
.feat p { margin-top: 16px; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.feat .go { margin-top: auto; padding-top: 22px; font-size: 14.5px; font-weight: 600; color: var(--text); text-decoration: none; }
.feat .go::after { content: " \2192"; }
.feat .go:hover { color: var(--yellow); }

/* Why Borro: four short columns. */
.four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; border-top: 1px solid var(--line); padding-top: 28px; }
.four h3 { font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.four p { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }

/* The coin row: the address with Copy and Buy, as chain.js draws it. */
.coin.coin-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 20px; box-shadow: none; }
.coin.coin-row .cn-tag { order: 0; }
.coin.coin-row .cn-words { order: 1; flex: 1 1 320px; min-width: 0; }
.coin.coin-row .cn-words b { display: block; font-size: 15px; }
.coin.coin-row code { display: block; width: 100%; font-size: 14.5px; }
.coin.coin-row .cn-act { order: 2; display: flex; gap: 8px; margin-left: auto; }
.coin.coin-row .cn-act .btn { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.coin.coin-row .cn-act .btn:hover { background: var(--surface-2); }

/* Contact: a line and one button. */
.contact .go-row { margin-top: 28px; }
.contact .mail { font-size: 15px; color: var(--text-2); }
.contact .mail a { color: var(--text); font-weight: 600; }

.home .foot { margin-top: 104px; }
.home .bar nav a { font-size: 14.5px; }

/* ---------------------------------------------------------------- the Builders page */

body.doc .bmain { display: block; margin: 0; }
.bmain p { margin: 0; }
.dhero {
  position: relative; margin-top: 16px; padding: 88px 32px 80px; border: 1px solid var(--line); border-radius: var(--r4); text-align: center; overflow: hidden;
  background: radial-gradient(60% 80% at 50% 0%, rgba(92, 98, 255, .14), transparent 70%), #06081a;
}
.dhero::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--stripe); }
.dhero .eyebrow { justify-content: center; }
.dhero h1 { max-width: 16em; margin: 20px auto 0; font-size: clamp(32px, 4.4vw, 54px); font-weight: 700; letter-spacing: -.04em; line-height: 1.04; }
.dhero .sub { max-width: 36em; margin: 20px auto 0; font-size: 17px; line-height: 1.55; color: var(--text-2); }
.dhero .go-row { justify-content: center; margin-top: 36px; }
.dhero .btn.line { color: var(--text); }
.facts-row { margin: 0; }
.facts-row.kv li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* The economics: the share card and its notes. */
.econ { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.econ .ccard-body { padding: 28px 28px 24px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; margin-top: 4px; }
.split .big { margin-top: 6px; }
.share-bars { display: grid; gap: 10px; margin-top: 28px; }
.share-bar { display: grid; grid-template-columns: 120px minmax(0, 1fr) 36px; align-items: center; gap: 14px; font-size: 12.5px; color: var(--text-3); }
.share-bar > i { display: block; height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.share-bar > i > i { display: block; height: 100%; border-radius: 4px; background: var(--text); }
.share-bar > b { font-weight: 600; color: var(--text-2); text-align: right; }
.econ .notes { padding: 4px 0; }

/* The code card beside the numbered surfaces. */
.integ { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.code-card { border-radius: var(--r3); border: 1px solid var(--line); background: #06081a; overflow: hidden; }
.code-card .ccard-head { background: #04061a; }
.code-card .ccard-head span { letter-spacing: .1em; text-transform: none; font-family: var(--mono); font-size: 11.5px; }
.code-tabs { display: flex; align-items: center; gap: 4px; padding: 12px 14px 0; }
.code-tabs button {
  padding: 7px 14px; border: 0; border-radius: 999px; font: 700 11.5px/1.2 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); background: transparent; cursor: pointer;
}
.code-tabs button:hover { color: var(--text); }
.code-tabs button[aria-selected="true"] { color: var(--on-accent); background: var(--text); }
.code-tabs .copy { margin-left: auto; min-height: 28px; padding: 5px 12px; border-radius: 999px; font: 700 11.5px/1.2 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); background: transparent; border: 1px solid var(--line-2); cursor: pointer; }
.code-tabs .copy:hover { color: var(--text); border-color: rgba(146, 156, 255, .45); }
.code-tabs .copy[data-done] { color: var(--yellow); border-color: rgba(255, 216, 58, .5); }
.code-card pre { margin: 0; padding: 18px 20px 22px; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; }
.code-card code { font: 500 13px/1.6 var(--mono); color: var(--text); }
.code-card [role="tabpanel"][hidden] { display: none; }
.surfaces .ccard-head { padding-left: 0; padding-right: 0; background: none; border-bottom: 0; }
.surfaces .num { border-top: 1px solid var(--line); }
.surfaces .claim { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; font: 700 11.5px/1.4 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--text); text-decoration: none; }
.surfaces .claim::after { content: "\2192"; }
.surfaces .claim:hover { color: var(--yellow); }

/* The founding board: three seats, the first codes registered. */
.board-lead { padding: 24px 24px 22px; border-bottom: 1px solid var(--line); }
.board-lead h3 { font-size: 22px; font-weight: 700; letter-spacing: -.03em; }
.board-lead p { margin-top: 6px; max-width: 44em; font-size: 14px; color: var(--text-2); }
.seats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seat { padding: 20px 24px 22px; border-left: 1px solid var(--line); }
.seat:first-child { border-left: 0; background: rgba(255, 255, 255, .02); }
.seat .lab { display: block; }
.seat b { display: block; margin-top: 10px; font-size: 16px; font-weight: 650; overflow-wrap: anywhere; }
.seat span.v { display: block; margin-top: 4px; font-size: 13.5px; color: var(--text-2); }
.seat.open b { color: var(--text-2); }
.seat.open span.v { color: var(--text-3); }

/* The reference, in the same rhythm but tighter. */
.ref-wrap { max-width: none; } /* spans the container; wells and tables full width (Roy, 2026-10-15) */
.ref-wrap p, .ref-wrap ol, .ref-wrap ul { max-width: 100ch; }
.ref-wrap h3 { font-size: 16px; font-weight: 700; margin: 28px 0 8px; color: var(--text); }
.ref-wrap h3 + p, .ref-wrap h2 + p { margin-top: 0; }
.ref-wrap p + .well, .ref-wrap table + p, .ref-wrap .well + p { margin-top: 12px; }
.ref-wrap p + h3 { margin-top: 28px; }
.ref-wrap p { font-size: 15px; line-height: 1.6; color: var(--text-2); }
.ref-wrap p + p { margin-top: 10px; }
.ref-wrap ol { margin: 0 0 12px; padding-left: 22px; color: var(--text-2); font-size: 15px; line-height: 1.6; }
.ref-wrap ol li { margin-bottom: 8px; }
.ref-wrap ol li b { color: var(--text); }
.ref-wrap p.small, .ref-wrap li.small { font-size: 14px; color: var(--text-3); }
.ref-wrap code { font: 500 13.5px/1.5 var(--mono); color: var(--text); overflow-wrap: anywhere; }
.ref-wrap p code, .ref-wrap li code, .ref-wrap td code { padding: 1px 5px; border-radius: 5px; background: var(--bg-2); border: 1px solid var(--line); font-size: 13px; }
.ref-wrap .well { position: relative; margin: 10px 0 16px; border-radius: var(--r2); background: #06081a; border: 1px solid var(--line); }
.ref-wrap .well pre { margin: 0; padding: 14px 16px; padding-right: 76px; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; }
.ref-wrap .well code { font-size: 13px; line-height: 1.55; }
.well .copy { position: absolute; top: 8px; right: 8px; min-height: 26px; padding: 3px 10px; font: 700 11px/1.2 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); background: transparent; border: 1px solid var(--line-2); border-radius: 999px; cursor: pointer; }
.well .copy:hover { color: var(--text); border-color: rgba(146, 156, 255, .45); }
.well .copy[data-done] { color: var(--yellow); border-color: rgba(255, 216, 58, .5); }
.toc-row { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 28px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.toc-row a { font-size: 13.5px; font-weight: 600; color: var(--text-2); text-decoration: none; }
.toc-row a:hover, .toc-row a.on { color: var(--text); }
.toc-row a::before { content: counter(t, decimal-leading-zero) "  "; counter-increment: t; color: var(--text-3); font-weight: 600; letter-spacing: .08em; font-size: 11px; }
.toc-row { counter-reset: t; }
.ref-sec { padding-top: 56px; }
.ref-sec h2 { display: flex; align-items: baseline; gap: 14px; margin: 0 0 14px; font-size: 26px; letter-spacing: -.03em; }
.ref-sec h2 > span { font: 600 12px/1 var(--ui); letter-spacing: .14em; color: var(--text-3); }
.addr { width: 100%; border-collapse: separate; border-spacing: 0; margin: 6px 0 14px; font-size: 14.5px; }
.addr th, .addr td { padding: 10px 10px 10px 0; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.addr th { font-weight: 600; color: var(--text-2); width: 12em; }
.addr thead th { width: auto; font: 600 11px/1.6 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); padding-top: 0; }
.addr td { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; color: var(--text-2); }
.addr td code { padding: 0; border: 0; background: none; font-size: 13px; }
.addr tbody tr:last-child > * { border-bottom: 0; }
.addr a { font-weight: 500; color: var(--text-2); text-decoration-color: rgba(238, 240, 255, .25); }
.addr a:hover { color: var(--yellow); }
.addr .n { white-space: nowrap; }
.ref td:first-child { white-space: nowrap; }
.doc .foot { margin-top: 104px; }

/* ---------------------------------------------------------------- narrower */

@media (max-width: 1000px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .econ, .integ { grid-template-columns: 1fr; }
  .hero.clean { grid-template-columns: 1fr; padding-top: 40px; }
  /* Under the text: the ribbons on their own band, still bleeding right, the chips beneath them. */
  .hero-art { display: block; align-self: auto; min-height: 0; }
  .hero-ribbons { position: relative; top: auto; right: auto; transform: none; width: calc(100% + 24px); height: 220px; margin: 0 -24px 0 0; }
  .hero-chips { margin-top: 20px; }
}
@media (max-width: 700px) {
  .sec { padding-top: 72px; }
  .feats { grid-template-columns: 1fr; }
  .four { grid-template-columns: 1fr; gap: 20px; }
  .kv li, .kv.left li, .facts-row.kv li { grid-template-columns: 1fr; gap: 4px; }
  .kv.left li > b, .kv.left li > div { max-width: none; }
  .kv li > b, .kv li > div { text-align: left; }
  .num li { grid-template-columns: 36px minmax(0, 1fr); }
  .num .go { grid-column: 2; grid-row: auto; margin-top: 8px; }
  .slab { padding: 22px 20px 20px; }
  .tiles { gap: 20px 16px; }
  .split { grid-template-columns: 1fr; }
  .seats { grid-template-columns: 1fr; }
  .seat { border-left: 0; border-top: 1px solid var(--line); }
  .dhero { padding: 56px 20px 48px; }
  .hero-ribbons { height: 180px; }
  .desk-row { grid-template-columns: 1fr; gap: 10px; }
  .desk-ticker { margin: 0 -24px; }
  .dt-group { gap: 28px; padding-right: 28px; }
  .addr.stack, .addr.stack tbody, .addr.stack tr, .addr.stack th, .addr.stack td { display: block; width: auto; }
  .addr.stack thead { display: none; }
  .addr.stack th { padding-bottom: 0; border-bottom: 0; }
  .addr.stack td { padding-top: 2px; border-bottom: 0; }
  .addr.stack tr { padding: 8px 0; border-bottom: 1px solid var(--line); }
  .addr.stack td[data-l]::before { content: attr(data-l) ": "; color: var(--text-3); font-size: 13px; }
  .ref td:first-child { white-space: normal; }
  .ref-wrap .well pre { padding: 40px 12px 12px; }
  .code-card pre { padding: 14px 14px 18px; }
  .code-tabs { flex-wrap: wrap; }
  .feat { padding: 24px 20px 22px; }
  .feat h3 { font-size: 24px; }
  .coin.coin-row .cn-act { margin-left: 0; }
}

/* ---------------------------------------------------------------- landing graphics (2026-10-15)
   Roy: "longbows has great graphics man why is ours so text heavy". Every section now carries a flat visual object in
   the hero's yellows (#ffd83a, #d9b422, a pale tint), no outline, no shadow, and the prose under each headline is one
   line. The feature cards take an illustration at the right, the surfaces take the app rail's icons, What holds it is
   a diagram card, Why Borro has a glyph over each column, and a Learn more row sits before the contact section. */

/* Feature cards: copy on the left, the illustration (about 140px tall) at the right, at the foot of the card. */
.feat { flex-direction: row; align-items: flex-end; gap: 24px; }
.feat-copy { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; align-self: stretch; }
.feat-art { flex: none; width: 170px; height: 140px; display: block; margin-bottom: -4px; }
.feat .feat-copy p { max-width: 24em; }

/* Surfaces: a 40px line icon in yellow where the row number was. */
.num.icons li { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 4px 24px; align-items: center; }
.num.icons li::before { content: none; }
.num.icons li > svg { grid-column: 1; grid-row: 1 / span 2; width: 40px; height: 40px; fill: none; stroke: var(--yellow); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.num.icons p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: none; }

/* What holds it: four pills on one hairline, a yellow dot travelling it over 6 s, the fact under each. */
.flow-card { position: relative; border: 1px solid var(--line); border-radius: var(--r3); background: var(--surface); overflow: hidden; }
.flow-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--stripe); }
.flow { position: relative; list-style: none; margin: 0; padding: 40px 24px 32px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.flow::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 60px; height: 1px; background: var(--line-2); }
.flow::after {
  content: ""; position: absolute; top: 56px; left: 12.5%; width: 9px; height: 9px; margin-left: -4px; border-radius: 50%; background: var(--yellow);
  box-shadow: 0 0 0 4px rgba(255, 216, 58, .18); animation: flow-dot 6s linear infinite;
}
.flow li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; } /* pills cover the line, so the dot passes behind them */
.flow b {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg-2);
  font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; color: var(--text); white-space: nowrap;
}
.flow p { margin-top: 14px; max-width: 16em; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.flow-foot { display: grid; gap: 8px; padding: 18px 24px 20px; border-top: 1px solid var(--line); background: rgba(255, 255, 255, .015); }
.flow-foot p { font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.flow-foot p span { display: inline-block; min-width: 56px; margin-right: 10px; font: 600 11px/1.8 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.flow-foot a { color: var(--text); font-weight: 600; text-decoration-color: rgba(238, 240, 255, .3); }
.flow-foot a:hover { color: var(--yellow); text-decoration-color: var(--yellow); }
@keyframes flow-dot { from { left: 12.5%; } to { left: 87.5%; } }

/* Why Borro: a 48px glyph above each title, one stroke weight. */
.four.glyphs > div > svg { display: block; width: 48px; height: 48px; margin-bottom: 18px; fill: none; stroke: var(--yellow); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Learn more: three cards, a 300px panel each (200 on phones) holding the illustration, a category label, one title. */
.learn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lcard {
  position: relative; display: flex; flex-direction: column; gap: 0; padding: 12px 12px 22px; border: 1px solid var(--line); border-radius: var(--r3); background: var(--surface);
  color: var(--text); text-decoration: none; overflow: hidden; transition: transform .18s ease, border-color .18s ease;
}
.lcard::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--stripe); }
.lcard:hover { transform: translateY(-2px); border-color: var(--line-2); }
.lcard:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.lcard-art { display: block; height: 300px; border-radius: 10px; background: rgba(255, 216, 58, .06); overflow: hidden; }
.lcard-art svg { display: block; width: 100%; height: 100%; }
.lcard-lab { display: block; margin: 20px 12px 0; font: 600 11px/1.6 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.lcard-title { display: block; margin: 6px 12px 0; font-size: 19px; font-weight: 700; letter-spacing: -.025em; line-height: 1.2; }
.lcard:hover .lcard-title { color: var(--yellow); }
#learn .sec-head-row .btn { margin-bottom: 4px; }

@media (prefers-reduced-motion: reduce) {
  .flow::after { animation: none; left: 12.5%; }
  .lcard { transition: none; }
  .lcard:hover { transform: none; }
}
@media (max-width: 1000px) {
  .learn { grid-template-columns: 1fr; }
  .lcard-art { height: 220px; }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .flow::before, .flow::after { display: none; }
}
@media (max-width: 700px) {
  .feat { flex-direction: column; align-items: flex-start; }
  .feat-art { align-self: flex-end; width: 150px; height: 124px; margin: -16px 0 0; }
  .num.icons li { grid-template-columns: 40px minmax(0, 1fr); }
  .num.icons p { white-space: normal; }
  .num.icons .go { grid-column: 2; }
  .lcard-art { height: 200px; }
  /* The flow stands up: one hairline down the left, the pills beside it, the dot travelling down. */
  .flow { grid-template-columns: 1fr; gap: 22px; padding: 28px 20px 28px 20px; }
  .flow::before, .flow::after { display: block; }
  .flow::before { left: 29px; right: auto; top: 48px; bottom: 48px; width: 1px; height: auto; }
  .flow::after { top: 44px; left: 25px; margin-left: 0; animation-name: flow-dot-down; }
  .flow li { flex-direction: row; flex-wrap: wrap; align-items: center; text-align: left; gap: 2px 14px; }
  .flow b { flex: none; min-height: 36px; }
  .flow p { flex: 1 1 100%; margin: 4px 0 0 34px; max-width: none; }
  .flow li::before { content: ""; position: absolute; left: 6px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line-2); }
  .flow li { padding-left: 34px; }
  .flow li::before { top: 18px; }
  @keyframes flow-dot-down { from { top: 44px; } to { top: calc(100% - 52px); } }
  .flow-foot p span { display: block; min-width: 0; margin: 0 0 2px; }
  #learn .sec-head-row { align-items: flex-start; }
}

/* ---------------------------------------------------------------- reference polish (2026-10-15, v=u) */
/* Roy: the Builders page reads as an ultra professional reference set (Stripe, Vercel, Morpho docs), and every section
   carries a visual object with at most a line of prose under its headline. One type scale for the reference: the
   section number and H2 at 28/700, H3 at 17/650 (32 above, 10 below), body 15.5/1.6 in text-2 to 100ch, inline code
   as a 13px hairline chip, notes as a hairline-left block. Code blocks get a 36px header bar (label left, Copy right,
   both centred in the bar) over 13.5px monospace that scrolls sideways; tables sit in hairline rows with a tracked
   header, addresses short and monospace with the explorer link and a Copy icon. 72px between numbered sections, 24px
   before a code block, 12px after. Everything on the page's navy, yellow only on the hero's two buttons. Selectors are
   prefixed with body.doc to outrank the Builders rules above without editing them. */

body.doc .sec .sub { max-width: 58em; font-size: 16px; }

/* The economics card: the share, two bars, the worked table, one footnote. */
body.doc .econ { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
body.doc .econ-card .ccard-body { padding: 26px 28px 26px; }
body.doc .econ-card .big { margin-top: 10px; font-size: clamp(60px, 7.2vw, 100px); letter-spacing: -.05em; }
body.doc .econ .share-bars { margin-top: 22px; gap: 16px; }
body.doc .econ .share-bar { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: baseline; font-size: 13px; color: var(--text-3); }
body.doc .econ .share-bar > i { grid-column: 1 / -1; height: 10px; border-radius: 5px; background: var(--surface-3); }
body.doc .econ .share-bar > i > i { background: var(--text); }
body.doc .econ .share-bar:not(.main) > i { height: 6px; }
body.doc .econ .share-bar:not(.main) > i > i { background: var(--text-3); }
body.doc .econ .share-bar > b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
body.doc .econ-table-wrap { border-top: 1px solid var(--line); overflow-x: auto; }
body.doc .econ-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
body.doc .econ-table th, body.doc .econ-table td { width: 1%; padding: 14px 20px; border-bottom: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; vertical-align: bottom; }
body.doc .econ-table thead th { padding: 11px 20px; font: 600 11px/1.5 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
body.doc .econ-table thead th:first-child, body.doc .econ-table tbody th { width: auto; text-align: left; padding-left: 28px; white-space: normal; }
body.doc .econ-table tbody th { font-weight: 600; color: var(--text); }
body.doc .econ-table td { font-weight: 500; color: var(--text-2); }
body.doc .econ-table .you { background: rgba(255, 255, 255, .03); color: var(--text); font-weight: 600; }
body.doc .econ-table thead .you { color: var(--text-2); }
body.doc .econ-table tbody tr:last-child > * { border-bottom: 0; }
body.doc .econ-foot { padding: 13px 28px 14px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.5; color: var(--text-3); }
body.doc .econ .notes { display: flex; flex-direction: column; height: 100%; padding: 0; }
body.doc .econ .notes li { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; padding: 20px 22px; }
body.doc .econ .notes b { font-size: 15px; }
body.doc .econ .notes p { font-size: 14px; }

/* Code blocks: the header bar, the Copy button centred in it, the code scrolling sideways below. */
body.doc .code-card .code-tabs { min-height: 44px; margin: 0; padding: 0 8px 0 10px; gap: 2px; background: #04061a; border-bottom: 1px solid var(--line); }
body.doc .code-card .code-tabs [role="tab"] { min-height: 28px; padding: 0 12px; font: 600 12px/1 var(--ui); letter-spacing: .06em; }
body.doc .code-card pre { padding: 16px 18px; white-space: pre; overflow-x: auto; overflow-wrap: normal; }
body.doc .code-card code { font: 500 13.5px/1.6 var(--mono); }
body.doc .ref-wrap .well { margin: 24px 0 12px; border-radius: var(--r2); background: #06081a; border: 1px solid var(--line); overflow: hidden; }
body.doc .ref-wrap h3 + .well { margin-top: 10px; }
body.doc .well-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 36px; padding: 0 4px 0 16px; background: #04061a; border-bottom: 1px solid var(--line); }
body.doc .well-lang { font: 600 11px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
body.doc .ref-wrap .well pre { padding: 16px 18px; white-space: pre; overflow-x: auto; overflow-wrap: normal; }
body.doc .ref-wrap .well.wrap pre { white-space: pre-wrap; overflow-wrap: anywhere; }
body.doc .ref-wrap .well code { font: 500 13.5px/1.6 var(--mono); color: var(--text); }
body.doc .well .copy, body.doc .code-tabs .copy {
  position: static; flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 28px; min-height: 0; padding: 0 12px;
  border: 1px solid var(--line-2); border-radius: 999px; font: 600 12px/1 var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); background: transparent; cursor: pointer;
}
body.doc .well .copy:hover, body.doc .code-tabs .copy:hover { color: var(--text); border-color: rgba(146, 156, 255, .45); }
body.doc .well .copy[data-done], body.doc .code-tabs .copy[data-done] { color: var(--text); border-color: rgba(146, 156, 255, .45); }
body.doc .copy svg { display: block; flex: none; }
body.doc .ln { counter-increment: l; }
body.doc .code-card code, body.doc .well code { counter-reset: l; }
body.doc .ln::before { content: counter(l); display: inline-block; width: 2ch; margin-right: 18px; text-align: right; color: var(--text-3); opacity: .55; user-select: none; }

/* Tables: hairline rows, a tracked header, the first column a label, addresses short and monospace. */
body.doc .ref-wrap .addr { margin: 16px 0 12px; font-size: 13.5px; border-collapse: collapse; }
body.doc .ref-wrap .addr:not(:has(thead)) { border-top: 1px solid var(--line); }
body.doc .ref-wrap .addr th, body.doc .ref-wrap .addr td { padding: 11px 20px 11px 0; line-height: 1.5; vertical-align: top; border-bottom: 1px solid var(--line); text-align: left; }
body.doc .ref-wrap .addr tbody th { width: 16em; font-weight: 600; color: var(--text); white-space: nowrap; }
body.doc .ref-wrap .addr thead th { width: auto; padding: 0 20px 10px 0; font: 600 11px/1.5 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
body.doc .ref-wrap .addr td { color: var(--text-2); font-variant-numeric: tabular-nums; }
body.doc .ref-wrap .addr tbody tr:last-child > * { border-bottom: 1px solid var(--line); }
body.doc .ref-wrap .addr th code, body.doc .ref-wrap .addr td code { padding: 0; border: 0; background: none; font: 500 13px/1.5 var(--mono); color: var(--text); }
body.doc .ref-wrap .addr th .n, body.doc .ref-wrap .addr .n { text-align: right; }
body.doc .ref-wrap .addr a { color: var(--text); font-weight: 500; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
body.doc .ref-wrap .addr a:hover { color: var(--text); text-decoration-color: var(--text-2); }
body.doc .ref-wrap .addr a.addr-link { font: 500 13px/1.5 var(--mono); }
body.doc .copy-ic {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: -4px 0 -4px 6px; vertical-align: middle;
  border: 0; border-radius: 5px; background: transparent; color: var(--text-3); cursor: pointer;
}
body.doc .copy-ic:hover { color: var(--text); background: var(--surface-2); }
body.doc .copy-ic[data-done] { color: var(--text); }
body.doc .copy-ic svg { display: block; }

/* The type scale and the spacing. */
body.doc .toc-row { margin-top: 32px; gap: 8px 26px; padding: 18px 0; }
body.doc .toc-row a { font-size: 13.5px; }
body.doc .ref-sec { padding-top: 72px; }
body.doc .ref-sec h2 { margin: 0 0 16px; font-size: 28px; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
body.doc .ref-sec h2 > span { font: 600 12px/1 var(--ui); letter-spacing: .14em; color: var(--text-3); }
body.doc .ref-wrap h3 { margin: 32px 0 10px; font-size: 17px; font-weight: 650; letter-spacing: -.015em; line-height: 1.3; color: var(--text); }
body.doc .ref-wrap h3 code { font-size: 14px; }
body.doc .ref-wrap p { max-width: 100ch; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
body.doc .ref-wrap p + p { margin-top: 10px; }
body.doc .ref-wrap p + .well { margin-top: 24px; }
body.doc .ref-wrap .well + p, body.doc .ref-wrap .addr + p { margin-top: 12px; }
body.doc .ref-wrap .well + .addr { margin-top: 20px; }
body.doc .ref-wrap p code, body.doc .ref-wrap li code, body.doc .ref-wrap .note code { font: 500 13px/1.4 var(--mono); padding: 2px 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--text); }
body.doc .ref-wrap .note { margin: 16px 0 0; padding: 2px 0 2px 16px; border-left: 2px solid var(--line-2); max-width: 100ch; font-size: 14px; line-height: 1.6; color: var(--text-3); }
body.doc .ref-wrap .note p { font-size: 14px; color: var(--text-3); }
body.doc .ref-wrap .note p + p { margin-top: 8px; }
body.doc .ref-wrap a { color: var(--text); text-decoration-color: var(--line-2); text-underline-offset: 3px; }
body.doc .ref-wrap a:hover { text-decoration-color: var(--text-2); }

/* Anchors: a "#" at the left of each heading, in the gutter, shown on hover or focus. */
body.doc .ref-wrap h2, body.doc .ref-wrap h3 { position: relative; }
body.doc .anchor { position: absolute; left: -22px; top: 0; width: 20px; font: 500 inherit var(--ui); line-height: inherit; text-align: left; color: var(--text-3); text-decoration: none; opacity: 0; transition: opacity .12s; }
body.doc .ref-sec h2 .anchor { font-size: 22px; line-height: 1.15; }
body.doc .ref-wrap h3 .anchor { font-size: 16px; }
body.doc h2:hover .anchor, body.doc h3:hover .anchor, body.doc .anchor:focus-visible { opacity: 1; }
body.doc .anchor:hover { color: var(--text); }

/* Terms: six steps as cards in two columns, the four things to know in a hairline row. */
body.doc .steps { list-style: none; counter-reset: s; margin: 20px 0 0; padding: 0; max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
body.doc .steps li { counter-increment: s; margin: 0; padding: 20px 22px 22px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface); }
body.doc .steps li::before { content: counter(s, decimal-leading-zero); display: block; font: 600 11px/1 var(--ui); letter-spacing: .14em; color: var(--text-3); }
body.doc .steps b { display: block; margin-top: 12px; font-size: 15.5px; font-weight: 650; letter-spacing: -.01em; color: var(--text); }
body.doc .steps p { margin-top: 6px; max-width: none; font-size: 14px; line-height: 1.55; color: var(--text-2); }
body.doc .know { margin-top: 16px; gap: 28px; padding-top: 22px; }
body.doc .know h4 { margin: 0; font-size: 15px; font-weight: 650; letter-spacing: -.01em; color: var(--text); }
body.doc .know p { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--text-2); }

@media (max-width: 1000px) {
  body.doc .econ { grid-template-columns: 1fr; }
  body.doc .know { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  body.doc .ref-sec { padding-top: 56px; }
  body.doc .ref-wrap .well pre, body.doc .code-card pre { padding: 14px 14px; }
  body.doc .anchor { left: -16px; width: 14px; }
  body.doc .steps { grid-template-columns: 1fr; }
  body.doc .know { grid-template-columns: 1fr; gap: 18px; }
  body.doc .econ-card .ccard-body { padding: 22px 18px 22px; }
  body.doc .econ-table { font-size: 13.5px; }
  body.doc .econ-table th, body.doc .econ-table td { padding: 12px 10px; }
  body.doc .econ-table thead th { padding: 10px 8px; letter-spacing: .1em; white-space: normal; }
  body.doc .econ-table td, body.doc .econ-table tbody th { padding-left: 8px; padding-right: 8px; }
  body.doc .econ-table thead th:first-child, body.doc .econ-table tbody th { padding-left: 18px; }
  body.doc .econ .ccard-head { flex-wrap: wrap; gap: 4px 16px; }
  body.doc .econ .notes li { flex: none; }
  body.doc .econ-foot { padding: 12px 18px 13px; }
  body.doc .ref-wrap .addr.stack tbody th { width: auto; white-space: normal; padding: 10px 0 0; border-bottom: 0; }
  body.doc .ref-wrap .addr.stack td { padding: 4px 0 10px; border-bottom: 0; }
  body.doc .ref-wrap .addr.stack tr { display: block; padding: 0; border-bottom: 1px solid var(--line); }
  body.doc .ref-wrap .addr.stack tbody tr:last-child > * { border-bottom: 0; }
  body.doc .ref-wrap .addr.stack td[data-l]::before { font-size: 12px; }
}

/* Learn more, the heading's right side: the insights button and a quiet link to the developer docs (landing graphics). */
.learn-go { display: flex; align-items: center; gap: 22px; margin-bottom: 4px; }
.learn-docs { font-size: 14px; font-weight: 600; color: var(--text-2); text-decoration: none; white-space: nowrap; }
.learn-docs::after { content: " \2192"; }
.learn-docs:hover { color: var(--yellow); }
.feat-art { width: 190px; height: 150px; }
@media (max-width: 700px) { .feat-art { width: 160px; height: 130px; } }

/* ---------------------------------------------------------------- feature cards and Learn more: no drawings (2026-10-15) */
/* The number and its label sit on one baseline; the cards carry no illustration (the number is the graphic). Learn more
   cards carry the studio renders of the tape, the one image set the whole site draws from. */
.feat { align-items: stretch; }
.feat .feat-copy { width: 100%; }
.feat .n { display: flex; align-items: baseline; gap: 10px; flex-wrap: nowrap; margin-top: 18px; }
.feat .n b { font-size: 44px; }
.feat .n span { white-space: nowrap; font-size: 14px; color: var(--text-3); }
.feat p { max-width: 36em; }
.lcard-art { height: 300px; background: #070a22; }
.lcard-art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.lcard:hover .lcard-art img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .lcard-art img { transition: none; } .lcard:hover .lcard-art img { transform: none; } }
@media (max-width: 700px) { .feat .n { flex-wrap: wrap; } .feat .n span { white-space: normal; } }

/* ---------------------------------------------------------------- Insights (2026-10-15)
   Roy: "their learn more explains how longbow works in the market we need that too". site/insights.html (the index: eyebrow,
   one headline, one line, a featured card, the list) and site/insights/<slug>.html (one 46em column: crumb, title, sub,
   author and read time, the flat illustration on a pale panel, the prose, then Keep reading as two Learn more cards).
   The art is the three files site/insights/art-{markets,rules,lenders}.svg, the same drawings as the landing's cards. */

body.insights .ins { display: block; margin: 0; }
.ins p { margin: 0; }
.ins-head { padding: 56px 0 0; }
.ins-head h1 { max-width: 16em; margin-top: 14px; font-size: clamp(32px, 4.4vw, 54px); font-weight: 700; letter-spacing: -.04em; line-height: 1.04; }
.ins-head .sub { max-width: 40em; margin-top: 16px; font-size: 16.5px; line-height: 1.55; color: var(--text-2); }
.ins-meta { display: inline-flex; align-items: baseline; gap: 10px; font-size: 13px; color: var(--text-3); }
.ins-meta b { font-weight: 600; color: var(--text-2); }
.ins-meta > span::before { content: "\00b7"; margin-right: 10px; }
.lcard .ins-meta { margin: 10px 12px 0; }

/* The featured card: the illustration on the left, the copy on the right, the tape stripe along the top. */
.ins-feat {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 0; margin-top: 48px; border: 1px solid var(--line); border-radius: var(--r3);
  background: var(--surface); color: var(--text); text-decoration: none; overflow: hidden; transition: transform .18s ease, border-color .18s ease;
}
.ins-feat::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--stripe); z-index: 1; }
.ins-feat:hover { transform: translateY(-2px); border-color: var(--line-2); }
.ins-feat:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.ins-feat-art { display: block; min-height: 340px; margin: 12px; border-radius: 10px; background: rgba(255, 216, 58, .06); overflow: hidden; }
.ins-feat-art img, .ins-more .lcard-art img, .ins-art img, .ins-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ins-feat-copy { display: flex; flex-direction: column; justify-content: center; padding: 36px 36px 36px 28px; }
.ins-feat-copy .lcard-lab { margin: 0; }
.ins-feat-copy .lcard-lab i, .ins-crumb i { font-style: normal; margin: 0 8px; }
.ins-feat-title { display: block; margin-top: 12px; font-size: clamp(26px, 2.8vw, 34px); font-weight: 700; letter-spacing: -.035em; line-height: 1.1; }
.ins-feat:hover .ins-feat-title { color: var(--yellow); }
.ins-feat-sub { display: block; margin-top: 12px; max-width: 30em; font-size: 15.5px; line-height: 1.55; color: var(--text-2); }
.ins-feat-copy .ins-meta { margin-top: 22px; }

/* The list: ruled rows, a thumbnail, the copy, a link at the right. */
.ins-all { padding-top: 72px; }
.ins-list { list-style: none; margin: 20px 0 0; padding: 0; border-top: 1px solid var(--line); }
.ins-list li { border-bottom: 1px solid var(--line); }
.ins-list a { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; gap: 8px 28px; align-items: center; padding: 22px 0; color: var(--text); text-decoration: none; }
.ins-thumb { display: block; height: 100px; border-radius: 8px; background: rgba(255, 216, 58, .06); overflow: hidden; }
.ins-row-copy { display: flex; flex-direction: column; min-width: 0; }
.ins-row-copy .lcard-lab { margin: 0; }
.ins-row-copy > b { margin-top: 6px; font-size: 20px; font-weight: 700; letter-spacing: -.025em; line-height: 1.2; }
.ins-list a:hover .ins-row-copy > b { color: var(--yellow); }
.ins-row-sub { display: block; margin-top: 6px; max-width: 40em; font-size: 14.5px; line-height: 1.5; color: var(--text-2); }
.ins-row-copy .ins-meta { margin-top: 10px; }
.ins-go { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; }
.ins-go::after { content: " \2192"; }
.ins-list a:hover .ins-go { color: var(--yellow); }

/* One article: a 46em column. */
.ins-article { max-width: 46em; margin: 0 auto; padding-top: 48px; }
.ins-crumb a { color: inherit; text-decoration: none; }
.ins-crumb a:hover { color: var(--yellow); }
.ins-article h1 { margin-top: 18px; font-size: clamp(32px, 4.4vw, 50px); font-weight: 700; letter-spacing: -.04em; line-height: 1.04; }
.ins-sub { margin-top: 16px; font-size: 18px; line-height: 1.5; color: var(--text-2); }
.ins-article > .ins-meta { margin-top: 18px; }
.ins-art { height: 320px; margin-top: 36px; border: 1px solid var(--line); border-radius: var(--r3); background: rgba(255, 216, 58, .06); overflow: hidden; }
.ins-prose { margin-top: 40px; }
.ins-prose p { font-size: 17px; line-height: 1.65; color: var(--text-2); }
.ins-prose p + p { margin-top: 20px; }
.ins-prose strong { font-weight: 650; color: var(--text); }
.ins-prose a { color: var(--text); font-weight: 600; text-decoration-color: rgba(238, 240, 255, .3); }
.ins-prose a:hover { color: var(--yellow); text-decoration-color: var(--yellow); }

/* Keep reading: the other two notes in the landing's cards, two across. */
.ins-more { max-width: 46em; margin: 0 auto; padding-top: 72px; }
.ins-more .learn.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ins-more .lcard-art { height: 220px; background: rgba(255, 216, 58, .06); }
.ins-back { margin-top: 28px; }
.ins-back a { font-size: 14.5px; font-weight: 600; color: var(--text); text-decoration: none; }
.ins-back a::before { content: "\2190  "; }
.ins-back a:hover { color: var(--yellow); }
.insights .foot { margin-top: 104px; }

@media (prefers-reduced-motion: reduce) {
  .ins-feat { transition: none; }
  .ins-feat:hover { transform: none; }
}
@media (max-width: 1000px) {
  .ins-feat { grid-template-columns: 1fr; }
  .ins-feat-art { min-height: 240px; height: 240px; }
  .ins-feat-copy { padding: 8px 24px 28px; }
}
@media (max-width: 700px) {
  .ins-head { padding-top: 36px; }
  .ins-feat { margin-top: 32px; }
  .ins-feat-art { height: 200px; min-height: 0; }
  .ins-list a { grid-template-columns: 1fr; gap: 12px; }
  .ins-thumb { height: 120px; }
  .ins-go { display: none; }
  .ins-all { padding-top: 56px; }
  .ins-article { padding-top: 32px; }
  .ins-art { height: 220px; margin-top: 28px; }
  .ins-prose p { font-size: 16.5px; }
  .ins-more { padding-top: 56px; }
  .ins-more .learn.two { grid-template-columns: 1fr; }
  .ins-more .lcard-art { height: 200px; }
}

/* ---------------------------------------------------------------- the hero: the studio render of the tape (Roy picked A, 2026-10-15) */
.hero { overflow: visible; }
.hero-art { position: relative; min-height: 420px; align-items: flex-end; }
.hero-photo {
  position: absolute; right: min(-40px, calc(600px - 50vw)); top: 50%; transform: translateY(-54%); width: min(62vw, 980px); max-width: none; height: auto; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.hero-chip-set { position: relative; z-index: 1; }
@media (max-width: 1000px) {
  .hero-art { min-height: 0; }
  .hero-photo { position: relative; right: auto; top: auto; transform: none; width: calc(100% + 48px); margin: 8px -24px 0; display: block; }
}

/* ---------------------------------------------------------------- feature cards carry the studio renders (2026-10-15) */
.feat { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 42%; gap: 0; padding: 0; }
.feat .feat-copy { padding: 28px 28px 28px 28px; }
.feat-photo { display: block; position: relative; min-height: 100%; }
.feat-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
.feat .n { margin-top: 14px; }
@media (max-width: 700px) {
  .feat { grid-template-columns: 1fr; }
  .feat-photo { height: 200px; }
  .feat-photo img { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 25%); mask-image: linear-gradient(180deg, transparent 0, #000 25%); }
}
/* the hero copy sits above the photo; the photo starts right of the text column */
.hero > .hero-copy, .hero .hero-text, .hero h1, .hero .hero-sub, .hero .hero-cta { position: relative; z-index: 2; }
.hero-photo { z-index: 0; width: min(56vw, 900px); right: min(-48px, calc(600px - 50vw)); }
/* the number's label sits under the number, never behind the photo */
.feat .n { flex-wrap: wrap; row-gap: 2px; }
.feat .n span { display: block; width: 100%; white-space: normal; }
.feat .feat-copy { padding-right: 20px; }

/* ================================================================ the hero, designed around the tape (2026-10-16) */
/* One object, one glow, a plain white headline. The tape is a transparent cutout, so it sits on the page itself; a soft
   violet glow behind it is the only effect. The headline drops the chrome and the pink shadow: a product shot wants
   quiet type beside it. The Drip chips left the hero; the stats slab below carries the numbers. */
.hero.clean { grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); gap: 32px 48px; padding: 72px 0 64px; align-items: center; min-height: 0; }
.hero.clean h1 { font-family: var(--ui); font-stretch: 100%; font-weight: 700; font-size: clamp(42px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -.035em; max-width: 11em; filter: none; }
.hero.clean h1 span { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--text); -webkit-text-fill-color: var(--text); padding-bottom: 0; text-wrap: balance; white-space: normal; }
.hero.clean .lede { max-width: 28em; margin-top: 24px; font-size: 17.5px; line-height: 1.55; color: var(--text-2); }
.hero.clean .go { margin-top: 34px; }
.hero.clean .hero-art { position: relative; display: block; min-height: 0; align-self: center; }
.hero.clean .hero-art::before { content: ""; position: absolute; inset: -12% -16%; background: radial-gradient(52% 48% at 56% 52%, rgba(138, 128, 255, .34), rgba(138, 128, 255, 0) 70%); filter: blur(10px); pointer-events: none; }
.hero.clean .hero-photo { position: relative; display: block; width: 112%; max-width: none; height: auto; margin: 0 -6%; transform: none; right: auto; top: auto; -webkit-mask-image: none; mask-image: none; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .55)); }
@media (max-width: 1000px) {
  .hero.clean { grid-template-columns: 1fr; padding-top: 40px; }
  .hero.clean .hero-photo { width: 100%; margin: 8px 0 0; }
}
/* the ticker: its label on its own line, the row full width with fades at both ends */
.desk-row { grid-template-columns: 1fr; gap: 10px; padding: 16px 0 14px; }
.desk-eyebrow { margin: 0; }
/* insights carry the studio renders, like the landing's Learn more cards */
.ins-feat-art img, .ins-more .lcard-art img, .ins-art img, .ins-thumb img { object-fit: cover; }
.ins-art, .ins-feat-art, .ins-more .lcard-art, .ins-thumb { background: #070a22; }

/* "Built on": the names spread across the slab's full width, the label at the left (Roy, 2026-10-15) */
.slab .built, .built { display: flex; align-items: center; gap: 0 24px; width: 100%; }
.built .eyebrow { flex: none; margin: 0 8px 0 0; }
.built b { flex: 1 1 0; text-align: center; white-space: nowrap; font-weight: 500; font-size: 16px; color: var(--text-2); }
.built b:last-child { text-align: right; }
@media (max-width: 900px) { .built { flex-wrap: wrap; gap: 10px 24px; } .built b { flex: none; text-align: left; } }

/* ---------------------------------------------------------------- the Builders earnings calculator (2026-10-16) */
body.doc .calc { padding: 22px 28px 18px; border-top: 1px solid var(--line); }
body.doc .calc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
body.doc .calc-row label { font: 600 11px/1.5 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
body.doc .calc-row output { font-size: 34px; font-weight: 700; letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; }
body.doc .calc input[type="range"] { width: 100%; margin: 14px 0 6px; accent-color: var(--yellow); height: 6px; }
body.doc .calc-ticks { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
body.doc .calc-mkt { margin-top: 16px; align-items: center; }
body.doc .calc-mkt select { min-width: 200px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); font: 500 14px/1.2 var(--ui); }
body.doc .calc-table tbody th small { display: block; margin-top: 3px; font-size: 12px; font-weight: 500; color: var(--text-3); }
body.doc .calc-table td.you { color: var(--text); font-weight: 650; }
@media (max-width: 700px) { body.doc .calc { padding: 18px; } body.doc .calc-row output { font-size: 26px; } }

/* ---------------------------------------------------------------- the economics card fits one screen (2026-10-16) */
body.doc .econ-shares { display: grid; grid-template-columns: 1fr 1fr; }
body.doc .econ-shares .es { padding: 20px 28px 18px; }
body.doc .econ-shares .es + .es { border-left: 1px solid var(--line); }
body.doc .econ-shares .es b { display: block; font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -.045em; color: var(--text); }
body.doc .econ-shares .es + .es b { color: var(--text-2); }
body.doc .econ-shares .es span { display: block; margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--text-3); }
body.doc .calc { padding: 18px 28px 14px; }
body.doc .calc-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
body.doc .calc-amt, body.doc .calc-mkt { display: flex; flex-direction: column; gap: 6px; }
body.doc .calc-mkt { margin: 0; align-items: flex-end; }
body.doc .calc-row output { font-size: 32px; line-height: 1; }
body.doc .calc input[type="range"] { margin: 16px 0 6px; }
body.doc .calc-table th, body.doc .calc-table td { padding-top: 12px; padding-bottom: 12px; }
@media (max-width: 700px) {
  body.doc .econ-shares .es { padding: 16px 18px; }
  body.doc .econ-shares .es b { font-size: 34px; }
  body.doc .calc-row { flex-wrap: wrap; }
  body.doc .calc-mkt { align-items: flex-start; }
}
/* tighter rhythm so the whole economics section sits in one 800px screen */
body.doc #economics { padding-top: 72px; scroll-margin-top: 64px; }
body.doc #economics .sec-body { margin-top: 28px; }
body.doc .econ-card .ccard-head { padding-top: 10px; padding-bottom: 10px; }
body.doc .econ-shares .es { padding: 16px 28px 14px; }
body.doc .econ-shares .es b { font-size: 40px; }
body.doc .calc { padding: 14px 28px 10px; }
body.doc .calc input[type="range"] { margin: 12px 0 4px; }
body.doc .calc-table thead th { padding-top: 9px; padding-bottom: 9px; }
body.doc .calc-table tbody th, body.doc .calc-table tbody td { padding-top: 10px; padding-bottom: 10px; }
body.doc .econ-foot { padding-top: 10px; padding-bottom: 11px; }

/* ---------------------------------------------------------------- the calculator: two sliders, two big results (2026-10-16) */
body.doc .calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
body.doc .calc-head { display: flex; flex-direction: column; gap: 6px; }
body.doc .calc-head label { font: 600 11px/1.5 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
body.doc .calc-head output { font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; }
body.doc .calc-in input[type="range"] { width: 100%; margin: 14px 0 6px; accent-color: var(--yellow); }
body.doc .calc-result { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); background: rgba(255, 216, 58, .045); }
body.doc .calc-result .cr { padding: 18px 28px 20px; }
body.doc .calc-result .cr + .cr { border-left: 1px solid var(--line); }
body.doc .calc-result span { display: block; font: 600 11px/1.5 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
body.doc .calc-result b { display: block; margin-top: 6px; font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -.045em; color: var(--yellow); font-variant-numeric: tabular-nums; }
body.doc .calc-result .cr + .cr b { color: var(--text); }
@media (max-width: 700px) {
  body.doc .calc-grid { grid-template-columns: 1fr; gap: 18px; }
  body.doc .calc-result .cr { padding: 16px 18px; }
  body.doc .calc-result b { font-size: 32px; }
}

/* ---------------------------------------------------------------- the Builders Drip in the economics card (2026-10-16) */
body.doc .econ-shares { grid-template-columns: 1fr 1fr 1fr; }
body.doc .econ-shares .es-drip b { color: var(--yellow); }
body.doc .calc-drip { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 28px; border-top: 1px solid var(--line); background: rgba(255, 216, 58, .045); }
body.doc .calc-drip span { font: 600 11px/1.5 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
body.doc .calc-drip b { font-size: 15px; font-weight: 650; color: var(--yellow); text-align: right; }
@media (max-width: 700px) {
  body.doc .econ-shares { grid-template-columns: 1fr 1fr; }
  body.doc .econ-shares .es-drip { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }
  body.doc .calc-drip { flex-direction: column; gap: 4px; padding: 12px 18px; }
  body.doc .calc-drip b { text-align: left; }
}

/* ================================================================ the Agents page (2026-10-16), site/agents.html */
/* Roy: "we need a very premium and dedicated agents tab ... catering to them as if they're as important as liquidity
   partners", with Longbow's MCP page as the bar. The Builders page's language, reused: the dark hero with its two pills
   (three live numbers along its foot), the endpoint card, hairline facts, two-column cards with header strips, client
   cards with Stripe-style code wells, the code card beside the numbered list, the tools as a filtered grid of cards
   (name in monospace, a Read or Prepare chip, one line, the arguments as a two-column table), number tiles, a recipes
   table, the safety rows beside the rules illustration, and the reference: each tool's schema on the left, its
   request on the right. Yellow stays on the hero's primary button. Scoped to body.agents-page. */

body.agents-page { --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; }
body.agents-page .bmain .btn { text-decoration: none; }
body.agents-page .dhero .sub { max-width: 40em; }

/* The hero: the live strip runs edge to edge along its foot. */
body.agents-page .ag-hero { padding-bottom: 0; }
.ag-live { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 64px -32px 0; padding: 0; border-top: 1px solid var(--line); background: rgba(255, 255, 255, .018); }
.ag-live li { padding: 24px 16px 26px; text-align: center; border-left: 1px solid var(--line); }
.ag-live li:first-child { border-left: 0; }
.ag-live b { display: block; font-size: clamp(26px, 2.8vw, 34px); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; color: var(--text); font-variant-numeric: tabular-nums; }
.ag-live span { display: block; margin-top: 8px; font: 600 11px/1.4 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.ag-live.off b { color: var(--text-3); }

/* The endpoint card, then the facts. */
.ag-endpoint { margin-top: 40px; }
.ag-endpoint-body { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; padding: 26px 24px 8px; }
.ag-endpoint .ag-url { font: 600 clamp(19px, 2.2vw, 26px)/1.3 var(--mono); letter-spacing: -.01em; color: var(--text); overflow-wrap: anywhere; }
body.agents-page .ag-copy-url { flex: none; min-height: 0; height: 36px; padding: 0 18px; font-size: 12px; }
body.agents-page .ag-copy-url svg { display: inline-block; margin-right: 6px; vertical-align: -1px; }
.ag-endpoint-foot { padding: 0 24px 22px; font-size: 14px; color: var(--text-3); }
.ag-endpoint .ccard-head span { font-family: var(--mono); letter-spacing: .02em; text-transform: none; font-size: 11.5px; }
body.agents-page .ag-facts { margin-top: 24px; }

/* Scope: two cards, what it does and what it doesn't, one ruled line each. */
.ag-scope { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ag-list { list-style: none; margin: 0; padding: 4px 0; }
.ag-list li { position: relative; padding: 14px 22px 14px 48px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.5; color: var(--text); }
.ag-list li:first-child { border-top: 0; }
.ag-list li::before { content: ""; position: absolute; left: 22px; top: 21px; width: 10px; height: 6px; border-left: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2); transform: rotate(-45deg); }
.ag-list.no li { color: var(--text-2); }
.ag-list.no li::before { top: 23px; width: 11px; height: 0; border-left: 0; border-bottom: 2px solid var(--text-3); transform: none; }

/* Quickstart: one card, a row per client: its name and path on the left, its line in a code well on the right. */
.ag-client { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 12px 32px; align-items: center; padding: 22px 24px; border-top: 1px solid var(--line); }
.ag-clients .ccard-head + .ag-client { border-top: 0; }
.ag-client-head h3 { font-size: 17px; font-weight: 650; letter-spacing: -.015em; }
.ag-client-head span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: var(--text-3); }
.ag-client .well { min-width: 0; border: 1px solid var(--line); border-radius: var(--r2); background: #06081a; overflow: hidden; }
.ag-client .well pre { margin: 0; padding: 14px 16px; white-space: pre; overflow-x: auto; }
.ag-client .well code { font: 500 13px/1.6 var(--mono); color: var(--text); }

/* The worked example: the code card beside the numbered list. */
body.agents-page .ag-flow { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; }
body.agents-page .ag-flow .code-card code { font-size: 13px; }
body.agents-page .ag-flow .code-card .ccard-head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The tools: a legend, a filter row, then each desk's cards. */
body.agents-page .ag-legend { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 13.5px; color: var(--text-3); }
.ag-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; }
.ag-filter button {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 999px;
  background: transparent; color: var(--text-2); font: 600 13px/1 var(--ui); cursor: pointer;
}
.ag-filter button b { font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ag-filter button:hover { color: var(--text); border-color: rgba(146, 156, 255, .45); }
.ag-filter button[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--on-accent); }
.ag-filter button[aria-pressed="true"] b { color: rgba(11, 14, 43, .55); }
.ag-filter button:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.ag-group { margin-top: 40px; }
.ag-group[hidden] { display: none; }
.ag-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.ag-group-head h3 { font-size: 18px; font-weight: 650; letter-spacing: -.015em; }
.ag-group-head span { font: 600 11px/1.4 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.ag-grid { columns: 3; column-gap: 12px; margin-top: 16px; } /* masonry: each card its own height, no empty boxes */
.ag-tool { display: flex; flex-direction: column; min-width: 0; margin: 0 0 12px; break-inside: avoid; border: 1px solid var(--line); border-radius: var(--r3); background: var(--surface); overflow: hidden; transition: border-color .15s ease; }
.ag-tool:hover { border-color: var(--line-2); }
.ag-tool-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.ag-tool-head a { min-width: 0; color: var(--text); text-decoration: none; }
.ag-tool-head code { font: 600 14px/1.3 var(--mono); color: var(--text); overflow-wrap: anywhere; }
.ag-tool-head a:hover code { color: var(--yellow); }
.ag-line { padding: 14px 16px 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.ag-args { width: calc(100% - 32px); margin: 12px 16px 16px; border-collapse: collapse; }
.ag-args th, .ag-args td { padding: 6px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: baseline; font-weight: 400; }
.ag-args td { text-align: right; white-space: nowrap; }
.ag-args th code { font: 500 12.5px/1.4 var(--mono); color: var(--text); }
body.agents-page .ag-none { margin: 12px 16px 16px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--text-3); }
.ag-type { font: 500 12px/1.4 var(--mono); color: var(--text-3); }
.ag-req, .ag-opt { margin-left: 8px; font: 600 10px/1.4 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.ag-opt { color: var(--text-3); }
.ag-kind { flex: none; display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 999px; font: 600 10px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.ag-kind.prep { border-color: transparent; background: var(--surface-3); color: var(--text); }

/* Number tiles: Only on Borro (four) and the Builders deal (three). */
.ag-only { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ag-bd { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ag-cap { display: flex; flex-direction: column; color: var(--text); text-decoration: none; }
.ag-cap .ccard-head span { font-family: var(--mono); letter-spacing: .02em; text-transform: none; font-size: 11.5px; }
.ag-bd .ag-cap .ccard-head span { font-family: var(--ui); letter-spacing: .14em; text-transform: uppercase; font-size: 11px; }
.ag-cap .ccard-body { flex: 1 1 auto; display: flex; flex-direction: column; padding: 28px 24px 26px; }
body.agents-page .ag-cap .big { margin-top: 0; font-size: clamp(40px, 4.4vw, 58px); white-space: nowrap; }
.ag-tile-lab { display: block; margin-top: 14px; font-size: 16px; font-weight: 650; letter-spacing: -.01em; color: var(--text); }
.ag-tile-line { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.ag-tile-go { transition: border-color .15s ease, transform .18s ease; }
.ag-tile-go:hover { border-color: var(--line-2); transform: translateY(-2px); }
.ag-tile-go .ag-tile-line::after { content: "\00a0\2192"; color: var(--text); }
.ag-tile-go:hover .ag-tile-line::after { color: var(--yellow); }
.ag-tile-go:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
body.agents-page .ag-bd-foot { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; margin-top: 18px; }
.ag-bd-foot > span { font-size: 13.5px; color: var(--text-3); }

/* Automation: a recipes table in a card, the note under it. */
.ag-recipes ul { list-style: none; margin: 0; padding: 0; }
.ag-recipes li { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; align-items: baseline; gap: 6px 28px; padding: 18px 22px; border-top: 1px solid var(--line); }
.ag-recipes li:first-child { border-top: 0; }
.ag-recipes li > b { font-size: 15.5px; font-weight: 650; letter-spacing: -.01em; }
.ag-r-line { font-size: 14.5px; line-height: 1.5; color: var(--text-2); }
.ag-r-tools { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ag-r-tools code { padding: 2px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-2); font: 500 12.5px/1.5 var(--mono); color: var(--text); }
.ag-r-tools i { font-style: normal; color: var(--text-3); }
.ag-recipes-foot { padding: 16px 22px 18px; border-top: 1px solid var(--line); background: rgba(255, 255, 255, .02); font-size: 14px; line-height: 1.55; color: var(--text-2); }

/* Safety: the rules illustration beside the rows. */
.ag-safe { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.ag-art { position: relative; margin: 0; border: 1px solid var(--line); border-radius: var(--r3); background: #070a22; overflow: hidden; }
.ag-art::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--stripe); z-index: 1; }
.ag-art img { display: block; width: 100%; height: auto; }
body.agents-page .ag-rows li { grid-template-columns: 150px minmax(0, 1fr); }
body.agents-page .ag-rows li > b { font-weight: 500; }

/* The reference: request and answer side by side; each tool's schema on the left, its request on the right. */
body.doc .ref-wrap .ag-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; margin-top: 24px; }
body.doc .ref-wrap .ag-pair .well { margin: 0; }
body.doc .ref-wrap .ag-pair.stack { grid-template-columns: minmax(0, 1fr); }
body.doc .ref-wrap .ag-ref-tool { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px 40px; align-items: start; padding: 32px 0; border-top: 1px solid var(--line); }
body.doc .ref-wrap .ag-ref-tool:last-child { padding-bottom: 8px; }
body.doc .ref-wrap .ag-ref-tool h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
body.doc .ref-wrap .ag-ref-tool h3 code { font: 600 17px/1.3 var(--mono); padding: 0; border: 0; background: none; }
body.doc .ref-wrap .ag-ref-tool .well { position: sticky; top: 20px; margin: 0; }
.ag-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; padding: 0; font-size: 13px; line-height: 1.6; }
.ag-meta span { margin-right: 8px; font: 600 10.5px/1.6 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.ag-meta b { font-weight: 500; color: var(--text-2); }
body.doc .ref-wrap .ag-schema { margin-top: 18px; }
body.doc .ref-wrap .ag-schema tbody th { width: 40%; white-space: normal; }
body.doc .ref-wrap .ag-schema tbody th code { margin-right: 8px; font-weight: 600; }
body.doc .ref-wrap .ag-schema .ag-type { white-space: nowrap; }
body.doc .ref-wrap .ag-schema .ag-req, body.doc .ref-wrap .ag-schema .ag-opt { display: block; margin: 2px 0 0; }
body.doc .ref-wrap .ag-noargs { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; color: var(--text-3); }

/* Contact: the address beside the illustration of one source fanning out. */
.ag-contact { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: stretch; }
.ag-contact-copy { display: flex; flex-direction: column; justify-content: center; padding: 52px 48px 48px; }
body.agents-page .ag-contact h2 { max-width: 15em; }
body.agents-page .ag-mail { margin-top: 20px; font-size: clamp(20px, 2.2vw, 26px); font-weight: 650; letter-spacing: -.02em; }
.ag-mail a { color: var(--text); text-decoration-color: var(--line-2); text-underline-offset: 5px; }
.ag-mail a:hover { text-decoration-color: var(--text-2); }
.ag-contact .go-row { margin-top: 28px; }
.ag-more { font-size: 14.5px; font-weight: 600; color: var(--text); text-decoration: none; white-space: nowrap; }
.ag-more::after { content: " \2192"; }
.ag-more:hover { color: var(--yellow); }
.ag-contact-art { position: relative; min-height: 340px; margin: 0; border-left: 1px solid var(--line); background: #070a22; }
.ag-contact-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
body.agents-page .foot { margin-top: 104px; }

@media (prefers-reduced-motion: reduce) {
  .ag-tile-go, .ag-tool { transition: none; }
  .ag-tile-go:hover { transform: none; }
}
@media (max-width: 1000px) {
  .ag-grid { columns: 2; }
  .ag-bd { grid-template-columns: 1fr; }
  .ag-client { grid-template-columns: 1fr; }
  body.agents-page .ag-flow { grid-template-columns: 1fr; }
  .ag-recipes li { grid-template-columns: minmax(0, 1fr) auto; }
  .ag-recipes li > .ag-r-line { grid-column: 1 / -1; grid-row: 2; }
  .ag-safe { grid-template-columns: 1fr; gap: 28px; }
  .ag-art { max-width: 520px; }
  body.doc .ref-wrap .ag-pair, body.doc .ref-wrap .ag-ref-tool { grid-template-columns: 1fr; }
  body.doc .ref-wrap .ag-ref-tool .well { position: static; }
  .ag-contact { grid-template-columns: 1fr; }
  .ag-contact-art { min-height: 240px; border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 700px) {
  .ag-live { margin: 44px -20px 0; }
  .ag-live li { padding: 18px 6px 20px; }
  .ag-live b { font-size: 22px; }
  .ag-live span { font-size: 10px; letter-spacing: .08em; }
  .ag-endpoint-body { padding: 20px 18px 6px; }
  .ag-endpoint-foot { padding: 0 18px 18px; font-size: 13.5px; }
  .ag-scope, .ag-only { grid-template-columns: 1fr; }
  .ag-list li { padding: 13px 18px 13px 42px; font-size: 14.5px; }
  .ag-list li::before { left: 18px; }
  .ag-client { padding: 18px; }
  .ag-grid { columns: 1; }
  .ag-filter { gap: 6px; margin-top: 28px; }
  .ag-filter button { height: 34px; padding: 0 12px; font-size: 12.5px; }
  .ag-legend { margin-top: 4px; }
  .ag-recipes li { grid-template-columns: 1fr; padding: 16px 18px; }
  .ag-recipes li > .ag-r-line { grid-row: auto; }
  .ag-r-tools { flex-wrap: wrap; white-space: normal; }
  .ag-recipes-foot { padding: 14px 18px 16px; }
  body.agents-page .ag-rows li { grid-template-columns: 1fr; }
  .ag-contact-copy { padding: 32px 20px 28px; }
  .ag-contact-art { min-height: 200px; }
  body.doc .ref-wrap .ag-schema tbody th { width: auto; }
  body.agents-page .bar > nav a { padding: 8px 10px; } /* four links fit at 390 in every language */
}
/* ================================================================ end of the Agents page */
/* headlines never leave one word alone on a line */
h1, h2, .h-balance { text-wrap: balance; }

/* ---------------------------------------------------------------- the dark hero's glow drifts slowly (Roy, 2026-10-16) */
/* Two soft lights (violet, and a faint pink) wander behind the copy on a long loop. Composited only (transform on a
   pseudo-element), so it costs nothing while scrolling; still under reduced motion. */
.dhero { isolation: isolate; }
.dhero::after {
  content: ""; position: absolute; inset: -40%; z-index: -1; pointer-events: none; will-change: transform;
  background:
    radial-gradient(28% 34% at 38% 30%, rgba(124, 116, 255, .24), transparent 70%),
    radial-gradient(24% 30% at 66% 62%, rgba(255, 79, 154, .10), transparent 70%),
    radial-gradient(30% 36% at 52% 46%, rgba(63, 224, 181, .06), transparent 72%);
  animation: dhero-drift 22s ease-in-out infinite alternate;
}
.dhero > * { position: relative; z-index: 1; }
.dhero::before { z-index: 2; }
@keyframes dhero-drift {
  0%   { transform: translate3d(-6%, -3%, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(5%, 4%, 0) rotate(8deg) scale(1.06); }
  100% { transform: translate3d(-2%, 6%, 0) rotate(-6deg) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) { .dhero::after { animation: none; } }
/* a touch more presence for the drifting glow (Roy, 2026-10-16) */
.dhero::after {
  background:
    radial-gradient(30% 36% at 38% 30%, rgba(124, 116, 255, .34), transparent 70%),
    radial-gradient(26% 32% at 66% 62%, rgba(255, 79, 154, .16), transparent 70%),
    radial-gradient(32% 38% at 52% 46%, rgba(63, 224, 181, .09), transparent 72%);
  animation-duration: 18s;
}
@keyframes dhero-drift {
  0%   { transform: translate3d(-8%, -4%, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(7%, 5%, 0) rotate(10deg) scale(1.08); }
  100% { transform: translate3d(-3%, 8%, 0) rotate(-8deg) scale(1.03); }
}
/* one header everywhere: the sound toggle stays off the bar on the marketing pages too */
.bar > .snd { display: none; }

/* ---------------------------------------------------------------- phones: nothing scrolls sideways (2026-10-16) */
@media (max-width: 760px) {
  /* the five-link nav drops to its own row under the logo and swipes if it must */
  .bar { flex-wrap: wrap; row-gap: 8px; }
  .bar > nav[aria-label="Site"] { order: 3; flex: 1 0 100%; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin: 0 -4px; padding-bottom: 2px; }
  .bar > nav[aria-label="Site"]::-webkit-scrollbar { display: none; }
  .bar > nav[aria-label="Site"] a { flex: none; padding: 6px 10px; font-size: 14px; }
  .desk-ticker { margin-left: 0; margin-right: 0; max-width: 100%; }
}
html, body { overflow-x: clip; }

/* ---------------------------------------------------------------- live numbers hold their place (2026-10-16) */
/* The marketing pages' numbers show from the stats snapshot at once (stats-cache.js) and the page's own chain read
   rewrites them a moment later: every digit the same width, and the card rates keep room for four, so a refreshed
   figure (or one arriving after "...") never moves what sits beside it. */
.tile b, .feat .n b { font-variant-numeric: tabular-nums; }
.feat .n b { min-width: 3.6ch; }

/* ---------------------------------------------------------------- the depositors' rate in the calculator (Roy, 2026-10-16) */
body.doc .calc-result { grid-template-columns: 1.15fr 1fr 1fr; }
body.doc .calc-result .cr { padding: 18px 22px 20px; }
body.doc .calc-result b { font-size: 38px; }
body.doc .calc-result .cr-apr b { color: var(--mint); }
body.doc .calc-result .cr small { display: block; margin-top: 6px; font-size: 12px; color: var(--text-3); }
@media (max-width: 700px) {
  body.doc .calc-result { grid-template-columns: 1fr; }
  body.doc .calc-result .cr + .cr { border-left: 0; border-top: 1px solid var(--line); }
  body.doc .calc-result b { font-size: 32px; }
}
body.doc .calc-result .cr.cr-apr b { color: var(--mint, #3fe0b5); }

/* ---------------------------------------------------------------- the hero CRT (Roy, 2026-10-16) */
/* A 90s television whose screen runs a VCR on-screen display of the live markets (crt.js). The screen box is the
   render's blue glass, measured on art/hero-crt.png: 12.79% / 13.8% / 74.07% x 64.02%. Sizes in cqw so the display
   scales with the set. */
.hero.clean .hero-art.crt-art { display: flex; align-items: center; justify-content: flex-end; min-height: 0; }
.crt { position: relative; display: block; width: 100%; max-width: 560px; container-type: inline-size; color: inherit; text-decoration: none; filter: drop-shadow(0 36px 54px rgba(0, 0, 0, .55)); transition: transform .3s ease; }
.crt:hover { transform: translateY(-3px); }
.crt:focus-visible { outline: 2px solid var(--yellow); outline-offset: 6px; border-radius: 16px; }
.crt-set { display: block; width: 100%; height: auto; }
.crt-screen { position: absolute; left: 13.3%; top: 14.3%; width: 73.1%; height: 63%; border-radius: 5.5% / 7.5%; overflow: hidden; display: block;
  background: radial-gradient(120% 95% at 50% 45%, rgba(40, 70, 255, 0) 55%, rgba(0, 0, 40, .5) 100%); }
.osd { position: absolute; inset: 7.5% 8.5% 7%; display: flex; flex-direction: column; justify-content: space-between; font-family: 'VT323', ui-monospace, monospace; color: #f2f5ff; text-transform: uppercase; letter-spacing: .03em; line-height: 1;
  text-shadow: .35cqw .35cqw 0 rgba(0, 0, 50, .85), 0 0 1.6cqw rgba(170, 200, 255, .55); animation: osd-flicker 7s steps(1) infinite; }
.osd-top, .osd-bot, .osd-sym, .osd-row { display: flex; justify-content: space-between; align-items: baseline; gap: 4cqw; }
.osd-top, .osd-bot { font-size: 5.4cqw; }
.osd-top b, .osd-ctr { font-weight: 400; font-variant-numeric: tabular-nums; }
.osd-sym { margin-top: 1cqw; }
.osd-sym b { font-size: 12.5cqw; font-weight: 400; letter-spacing: .02em; }
.osd-sym span { font-size: 6.6cqw; font-variant-numeric: tabular-nums; }
.osd-rows { display: flex; flex-direction: column; gap: 1.8cqw; font-size: 5.6cqw; }
.osd-row b { font-weight: 400; font-variant-numeric: tabular-nums; }
.osd-row .osd-k { opacity: .92; }
.osd-row:first-child b { color: #ffe866; }
.osd[data-kind="stock"] .k-usdg, .osd[data-kind="usdg"] .k-stock { display: none; }
.crt-lines { position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, rgba(0, 0, 30, .22) 0 1px, transparent 1px 3px); pointer-events: none; }
.crt-glass { position: absolute; inset: 0; background: radial-gradient(70% 45% at 30% 12%, rgba(255, 255, 255, .10), transparent 70%); pointer-events: none; }
.crt-track { position: absolute; left: 0; right: 0; top: -30%; height: 26%; opacity: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .5) 0 1px, rgba(255, 255, 255, .05) 1px 3px, rgba(255, 255, 255, .28) 3px 4px, transparent 4px 7px); filter: blur(.4px); }
.crt-screen.is-tracking .crt-track { animation: crt-track .42s ease-in 1; }
.crt-screen.is-tracking .osd { animation: crt-jitter .42s steps(6) 1; }
@keyframes crt-track { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: .9; } 100% { opacity: .2; transform: translateY(560%); } }
@keyframes crt-jitter { 0% { transform: none; } 20% { transform: translateX(-1.2cqw) skewX(-3deg); opacity: .6; } 40% { transform: translateX(.9cqw); } 60% { transform: translateX(-.4cqw); opacity: .85; } 100% { transform: none; opacity: 1; } }
@keyframes osd-flicker { 0%, 100% { opacity: 1; } 47% { opacity: .94; } 48% { opacity: 1; } 81% { opacity: .97; } }
@media (max-width: 900px) {
  .hero.clean .hero-art.crt-art { justify-content: center; }
  .crt { max-width: 440px; margin: 8px auto 0; }
}
@media (prefers-reduced-motion: reduce) {
  .osd, .crt-screen.is-tracking .osd, .crt-screen.is-tracking .crt-track { animation: none; }
  .crt { transition: none; }
}
/* the CRT never outgrows the hero: capped by the column, 500px, and the window's height */
.crt { width: min(100%, 500px, 66vh); max-width: none; }
@media (max-width: 900px) { .crt { width: min(100%, 420px, 52vh); } }
/* the CRT hero stays side by side down to 861px; stacked below that, the set centred and smaller */
@media (min-width: 861px) and (max-width: 1100px) {
  .hero.clean { grid-template-columns: minmax(0, 1fr) minmax(0, 42%); gap: 32px; padding-top: 56px; }
  .hero.clean h1 { font-size: clamp(36px, 4.4vw, 52px); }
}
@media (max-width: 860px) {
  .hero.clean { grid-template-columns: 1fr; }
  .hero.clean .hero-art.crt-art { justify-content: center; }
  .crt { width: min(100%, 400px, 46vh); margin: 4px auto 0; }
}
/* stacked: the copy and its buttons first, the set under them (the copy is display: contents with ordered children) */
@media (max-width: 860px) { .hero.clean .hero-art.crt-art { order: 20; margin-top: 8px; } }
/* the CRT's numbers keep their width while they fill in (no shift when "..." becomes "$217.89") */
.osd-sym span, .osd-row b { min-width: 7.5ch; text-align: right; }

/* ---------------------------------------------------------------- no flash on links to a section, or from the TV (2026-10-16) */
/* i18n.js holds the page unpainted until it is scrolled to the linked section (/#holds, /#surfaces). */
html.jumping body > :not(.wrap), html.jumping .wrap > :not(header.bar) { visibility: hidden; }   /* the header stays painted: no blink */
/* The TV's screen text shows only once the set's picture is in (crt.js adds .is-ready), never floating on its own. */
.crt .crt-screen { opacity: 0; transition: opacity .25s ease; }
.crt.is-ready .crt-screen { opacity: 1; }
/* the Security section's contract list (home.js fills it) keeps its height from the first frame: nine rows */
#trustList { min-height: 413px; }
@media (max-width: 700px) { #trustList { min-height: 0; } }

/* ---------------------------------------------------------------- /products and /security, pages of their own (2026-10-16) */
/* Their sections start right under the header, as on Builders and Agents. */
body.sub-page main > .sec:first-child { padding-top: 56px; }
/* the TV's bottom line (the chain's live block) is a status line: a little smaller and quieter, with room above */
.osd-bot { font-size: 4.6cqw; opacity: .78; padding-top: 1.6cqw; }
.osd-rows { gap: 1.4cqw; }