/* Landing page (/), loaded after site.css on that page only. White is the ground of the page; colour comes in bands:
   navy for the ledger and the agents, a cobalt tint for the proof, cream for the point in time, and cobalt for the
   last call. The dark theme keeps each band in its role. Motion is decoration only: every element is complete and
   in place without it (prefers-reduced-motion, or no scripts). */
:root {
  --lp-navy: #0A1230; --lp-navy-2: #111B42; --lp-navy-3: #070D24; --lp-navy-line: rgba(255, 255, 255, .1);
  --lp-on-navy: #EEF1FA; --lp-on-navy-2: #AEB8D6; --lp-on-navy-3: #8590B5;
  --lp-cobalt: #3550D6; --lp-cobalt-2: #5B74F0; --lp-sky: #9DB0FF; --lp-amber: #F0A15A; --lp-mint: #5BD7A3; --lp-coral: #FF9173;
  --lp-tint: #F3F5FE; --lp-tint-line: #E0E5F8; --lp-cream: #FBF6EE; --lp-cream-line: #EEE2CD;
  --lp-ease: cubic-bezier(.16, 1, .3, 1);
  --lp-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 32px 64px -28px rgba(10, 18, 48, .3), 0 12px 28px -14px rgba(10, 18, 48, .16);
  --lp-glow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 -1px 0 rgba(0, 0, 0, .18) inset, 0 12px 26px -12px rgba(53, 80, 214, .8);
}
:root[data-theme="dark"] {
  --lp-navy: #0D1636; --lp-navy-2: #152049; --lp-navy-3: #080E26;
  --lp-tint: #111730; --lp-tint-line: #1D2646; --lp-cream: #15120D; --lp-cream-line: #2B2419;
  --lp-shadow: 0 32px 64px -28px rgba(0, 0, 0, .8), 0 12px 28px -14px rgba(0, 0, 0, .55);
  --lp-glow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 12px 26px -12px rgba(143, 162, 255, .55);
}
body[data-page="landing"] footer { margin-top: 0; }
[data-count] { font-variant-numeric: tabular-nums lining-nums; }

/* header: glass over the page, a hairline once the page scrolls, and the progress of the page on top ------------------ */
[data-page="landing"] .top { background: color-mix(in srgb, var(--bg) 72%, transparent); border-bottom-color: transparent;
  -webkit-backdrop-filter: saturate(1.8) blur(16px); backdrop-filter: saturate(1.8) blur(16px); transition: border-color .3s, background-color .3s; }
[data-page="landing"] .top.scrolled { border-bottom-color: var(--line); background: color-mix(in srgb, var(--bg) 86%, transparent); }
/* the landing page links to the app only, so it has no menu of 1 item at any width */
[data-page="landing"] .menu-btn { display: none; }
.nav .nav-app { display: none; }
.mobile-nav .nav-app { color: var(--accent); font-weight: 500; }
.top .btn.launch { height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #4562EC, #2E47CC);
  color: #fff; box-shadow: var(--lp-glow); transition: transform .3s var(--lp-ease), filter .2s; }
.top .btn.launch:hover { color: #fff; filter: brightness(1.06); transform: translateY(-1px); }
:root[data-theme="dark"] .top .btn.launch { background: linear-gradient(180deg, #AFBDFF, #8095F6); color: #0A1230; }
.lp-progress { position: fixed; left: 0; right: 0; top: 0; z-index: 45; height: 2px; pointer-events: none; }
.lp-progress i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--lp-amber), var(--lp-cobalt-2) 55%, var(--lp-sky)); }

/* shared marks ------------------------------------------------------------------------------------------------------ */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 600 12px/1 var(--sans); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.eyebrow i { width: 7px; height: 7px; background: var(--warm); flex: none; }
.eyebrow .ix { font: 500 12px/1 var(--mono); letter-spacing: .02em; color: var(--accent); }
.cn { position: absolute; width: 5px; height: 5px; background: var(--ink-3); z-index: 2; pointer-events: none; }
.cn.tl { left: -3px; top: -3px; } .cn.tr { right: -3px; top: -3px; } .cn.bl { left: -3px; bottom: -3px; } .cn.br { right: -3px; bottom: -3px; }
.sec-h { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; }
.sec-h .rule { flex: 1; height: 1px; min-width: 24px; background: var(--line-2); transform-origin: 0 50%; }
.sec-h.rv { transition: none; }
.sec-h.rv .rule { transition: transform 1.1s var(--lp-ease) .1s; }
.sec-h.rv.pre { opacity: 1; transform: none; }
.sec-h.rv.pre .rule { transform: scaleX(0); }
.rv { transition-duration: .8s; transition-timing-function: var(--lp-ease); }
.rv.pre { transform: translateY(22px); }
.l-block { padding: clamp(84px, 10vw, 140px) 0 0; }
.l-h2 { margin: 0 0 22px; max-width: 18ch; font: 400 clamp(36px, 4.6vw, 62px)/1.02 var(--serif); font-variation-settings: "opsz" 72;
  letter-spacing: -.032em; text-wrap: balance; }
.l-msg { max-width: 58ch; margin: 0 0 30px; color: var(--ink-2); font-size: clamp(16px, 1.2vw, 17.5px); line-height: 1.65; }
.l-msg b { color: var(--ink); font-weight: 600; }
.l-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap; margin-bottom: 30px; }
.l-head .l-h2 { margin: 0; }
.l-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* buttons ----------------------------------------------------------------------------------------------------------- */
.btn-x { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 22px;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--ink); font: 500 15px var(--sans);
  white-space: nowrap; box-shadow: 0 1px 2px rgba(20, 23, 28, .06);
  transition: transform .35s var(--lp-ease), box-shadow .35s var(--lp-ease), border-color .2s, background-color .2s, color .2s; }
.btn-x:hover { color: var(--ink); text-decoration: none; border-color: var(--ink-3); transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(20, 23, 28, .28); }
.btn-x .ar { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .35s var(--lp-ease); }
.btn-x:hover .ar { transform: translateX(3px); }
.btn-x.primary { border: 0; color: #fff; background: linear-gradient(180deg, #4562EC, #2E47CC); box-shadow: var(--lp-glow); }
.btn-x.primary:hover { color: #fff; box-shadow: var(--lp-glow), 0 18px 34px -14px rgba(53, 80, 214, .7); }
:root[data-theme="dark"] .btn-x.primary { background: linear-gradient(180deg, #AFBDFF, #8095F6); color: #0A1230; }
.btn-x.sm { height: 38px; padding: 0 16px; font-size: 13.5px; }
.btn-x.light { border: 0; background: #fff; color: #0A1230; box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 14px 30px -14px rgba(0, 0, 0, .6); }
.btn-x.light:hover { color: #0A1230; background: #fff; }
.btn-x.ghost { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .26); color: #fff; box-shadow: none; }
.btn-x.ghost:hover { color: #fff; border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .1); }

/* hero -------------------------------------------------------------------------------------------------------------- */
.hx { position: relative; isolation: isolate; overflow: clip; padding: clamp(52px, 8vw, 104px) 0 0; }
.hx-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hx-bg i { position: absolute; display: block; }
.orb { border-radius: 50%; will-change: transform; }
.hx-bg .o1 { width: 860px; height: 860px; right: -300px; top: -420px; background: radial-gradient(circle, color-mix(in srgb, var(--lp-cobalt-2) 36%, transparent), transparent 62%); }
.hx-bg .o2 { width: 600px; height: 600px; left: -280px; top: 60px; background: radial-gradient(circle, color-mix(in srgb, var(--lp-amber) 26%, transparent), transparent 64%); }
.hx-bg .o3 { width: 640px; height: 640px; left: 50%; top: 560px; margin-left: -320px; background: radial-gradient(circle, color-mix(in srgb, var(--lp-sky) 32%, transparent), transparent 64%); }
:root[data-theme="dark"] .hx-bg .o1 { background: radial-gradient(circle, rgba(91, 116, 240, .3), transparent 62%); }
:root[data-theme="dark"] .hx-bg .o2 { background: radial-gradient(circle, rgba(240, 161, 90, .14), transparent 64%); }
:root[data-theme="dark"] .hx-bg .o3 { background: radial-gradient(circle, rgba(157, 176, 255, .16), transparent 64%); }
.hx-lines { inset: 0; opacity: .8; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px; background-position: center -1px;
  -webkit-mask-image: radial-gradient(70% 58% at 50% 24%, #000 16%, transparent 74%); mask-image: radial-gradient(70% 58% at 50% 24%, #000 16%, transparent 74%); }
.hx-spot { inset: 0; opacity: 0; transition: opacity .6s;
  background: radial-gradient(380px circle at var(--mx, 68%) var(--my, 30%), color-mix(in srgb, var(--lp-cobalt-2) 13%, transparent), transparent 70%); }
.hx.pointer .hx-spot { opacity: 1; }
.hx-grain { inset: 0; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.09 0 0 0 0 0.11 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .hx-grain { opacity: .08; filter: invert(1); }
.hx-copy { position: relative; text-align: center; }
.hx-pill { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; height: 34px; padding: 0 14px 0 12px; border: 1px solid var(--line-2);
  border-radius: 999px; background: color-mix(in srgb, var(--surface) 82%, transparent); color: var(--ink-2); font: 500 13px var(--sans);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 1px 2px rgba(20, 23, 28, .05); white-space: nowrap; }
.hx-pill i { width: 7px; height: 7px; flex: none; background: var(--warm); }
.hx-pill .ar { color: var(--ink-3); transition: transform .3s var(--lp-ease); }
.hx-pill:hover { color: var(--ink); text-decoration: none; border-color: var(--ink-3); }
.hx-pill:hover .ar { transform: translateX(3px); }
.hx-h1 { margin: 28px auto 0; font: 400 clamp(42px, 6.6vw, 98px)/.97 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -.035em; }
/* each line rises from under its own edge; the italic keeps its overhang on either side */
.hx-h1 .ln { display: block; overflow-x: visible; overflow-y: clip; padding: .02em .12em .14em; margin-bottom: -.14em; }
.hx-h1 .ln > span { display: inline-block; }
.hx-h1 em { font-style: italic; color: var(--accent); }
.tw { position: relative; display: inline-block; padding-right: .04em; }
/* the line runs 0.3em under the baseline, below the descenders, which stands 0.258em above the foot of the box, and
   ends in the square */
.tw-u { position: absolute; left: .04em; bottom: -.087em; width: calc(100% - .26em); height: .09em; overflow: visible; }
.tw-u path { fill: none; stroke: currentColor; stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.tw-sq { position: absolute; right: .06em; bottom: -.107em; width: .13em; height: .13em; background: var(--warm); }
@media (prefers-reduced-motion: no-preference) {
  .hx-bg .o1 { animation: orb1 26s ease-in-out infinite alternate; }
  .hx-bg .o2 { animation: orb2 30s ease-in-out infinite alternate; }
  .hx-bg .o3 { animation: orb3 34s ease-in-out infinite alternate; }
  .hx-h1 .ln > span { animation: lnup 1.05s var(--lp-ease) both; animation-delay: calc(var(--i, 0) * 110ms + 60ms); }
  .tw-u path { animation: undraw .9s var(--lp-ease) .75s both; }
  .tw-sq { animation: pop .5s var(--lp-ease) 1.5s both; }
  .hx-pill, .hx-lede, .hx .l-cta { animation: lift .9s var(--lp-ease) both; }
  .hx-lede { animation-delay: .34s; } .hx .l-cta { animation-delay: .44s; }
  .hx-panel { animation: stage 1.2s var(--lp-ease) .3s both; }
  .l-marks li { animation: lift .9s var(--lp-ease) both; animation-delay: calc(var(--k, 0) * 120ms + .7s); }
}
@keyframes orb1 { to { transform: translate3d(-90px, 70px, 0) scale(1.08); } }
@keyframes orb2 { to { transform: translate3d(100px, -50px, 0) scale(.92); } }
@keyframes orb3 { to { transform: translate3d(-70px, -80px, 0) scale(1.12); } }
@keyframes lnup { from { transform: translateY(110%); } }
@keyframes undraw { from { stroke-dashoffset: 1; } }
@keyframes pop { from { transform: scale(0) rotate(-45deg); } }
@keyframes lift { from { opacity: 0; transform: translateY(16px); } }
/* no scale: the cursor of the source panel aims by the positions of the cells, which a scale would shift */
@keyframes stage { from { opacity: 0; transform: translateY(28px); } }
.hx-lede { max-width: 56ch; margin: 28px auto 36px; color: var(--ink-2); font-size: clamp(16.5px, 1.35vw, 19.5px); line-height: 1.6; }
.hx .l-cta { justify-content: center; }
/* the 3 marks: cards under the source panel, and around it where the screen is wide */
.l-marks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 780px; margin: 34px auto 0; padding: 0; list-style: none; text-align: left; }
.l-marks li { --k: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 11px; align-items: start; padding: 13px 14px;
  border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--surface) 88%, transparent); box-shadow: 0 10px 30px -18px rgba(10, 18, 48, .35); }
.l-marks li:nth-child(2) { --k: 1; } .l-marks li:nth-child(3) { --k: 2; }
.l-marks svg { grid-row: span 2; width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink);
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.l-marks li:nth-child(2) svg { background: color-mix(in srgb, var(--lp-amber) 16%, var(--surface)); color: var(--warm); }
.l-marks li:nth-child(3) svg { background: color-mix(in srgb, var(--s3) 13%, var(--surface)); color: var(--s3); }
.l-marks b { font: 600 13.5px/1.35 var(--sans); color: var(--ink); }
.l-marks span { font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
/* the cards stand on the sheets, clear of the figures of the panel, where the margins have room for them */
@media (min-width: 1240px) {
  .hx-stage .l-marks { position: absolute; inset: 0; z-index: 2; display: block; max-width: none; margin: 0; pointer-events: none; }
  .hx-stage .l-marks li { position: absolute; width: 232px; pointer-events: auto; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--lp-shadow); }
  .hx-stage .l-marks li:nth-child(1) { left: -218px; top: 76px; }
  .hx-stage .l-marks li:nth-child(2) { right: -220px; top: 44%; }
  .hx-stage .l-marks li:nth-child(3) { left: -206px; bottom: 26px; }
}

/* hero: the source panel on 2 sheets of colour, which follow the pointer a little */
.hx-stage { position: relative; max-width: 780px; margin: clamp(56px, 7vw, 92px) auto 0; }
.hx-panel { position: relative; min-width: 0; }
.hx-panel:not(:has(.trace)) { display: none; }
.hx-stage .sheet { position: absolute; inset: 0; border-radius: 22px; pointer-events: none; transition: transform .8s var(--lp-ease); }
.hx-stage .s1 { background: linear-gradient(140deg, #7F95FF, #C3CEFF 60%, #E9EDFF); opacity: .62;
  transform: translate3d(calc(20px + var(--px, 0px)), calc(18px + var(--py, 0px)), 0) rotate(3deg); }
.hx-stage .s2 { background: linear-gradient(140deg, #FFD3A8, #FBEBDB 60%, var(--lp-cream)); opacity: .8;
  transform: translate3d(calc(-16px - var(--px, 0px)), calc(26px - var(--py, 0px)), 0) rotate(-2.4deg); }
:root[data-theme="dark"] .hx-stage .s1 { background: linear-gradient(140deg, #24336F, #18214A); opacity: .9; }
:root[data-theme="dark"] .hx-stage .s2 { background: linear-gradient(140deg, #4A3018, #241A10); opacity: .8; }
.trace { position: relative; z-index: 1; min-width: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--line-2) 85%, transparent); border-radius: 20px;
  background: var(--surface); box-shadow: var(--lp-shadow); }
.trace::before { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 4; height: 2px; background: linear-gradient(90deg, var(--lp-amber), var(--lp-cobalt-2) 50%, var(--lp-sky)); }
.tr-tabs { display: flex; gap: 4px; padding: 10px 10px 0; border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.tr-tabs button { position: relative; flex: 1; height: 40px; border: 0; border-radius: 10px 10px 0 0; background: transparent; color: var(--ink-3);
  font: 500 13.5px var(--sans); cursor: pointer; transition: color .2s, background-color .2s; }
.tr-tabs button:hover { color: var(--ink); }
.tr-tabs button[aria-selected="true"] { color: var(--ink); background: var(--surface); box-shadow: 0 -1px 0 var(--line), 1px 0 0 var(--line), -1px 0 0 var(--line); }
.tr-tabs button b { position: absolute; left: 14px; bottom: 0; width: 0; height: 2px; border-radius: 2px; background: var(--accent); }
.tr-tabs button[aria-selected="true"] b { width: calc(100% - 28px); }
.trace.auto .tr-tabs button[aria-selected="true"] b { animation: fill var(--cycle, 6200ms) linear both; }
@keyframes fill { from { width: 0; } to { width: calc(100% - 28px); } }
.tr-body { position: relative; padding: 18px 20px 20px; }
.tr-body.stack { display: grid; }
.tr-body.stack > .tr-ex { grid-area: 1 / 1; min-width: 0; }
.tr-body.stack > .tr-ex.is-off { visibility: hidden; }
.tr-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.tr-name { font: 500 19px/1.2 var(--serif); color: var(--ink); }
.tr-name:hover { color: var(--accent); }
.tr-unit { font: 400 11.5px var(--mono); color: var(--ink-3); text-align: right; }
.tr-t { font-size: 13.5px; }
.tr-t thead th { text-align: right; padding: 6px 0 8px 10px; font: 500 11.5px var(--mono); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.tr-t thead th:first-child { text-align: left; padding-left: 0; }
.tr-t tbody th { text-align: left; font: 400 13.5px var(--sans); color: var(--ink-2); padding: 9px 10px 9px 0; border-bottom: 1px solid var(--line); }
.tr-t tbody td { padding: 9px 0 9px 10px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
.tr-t .c { font: 400 13.5px var(--mono); font-variant-numeric: tabular-nums; padding: 2px 6px; margin: -2px -6px; border-radius: 6px;
  transition: background-color .25s, color .25s, box-shadow .25s; }
.tr-t .c.hit { background: var(--accent-soft); color: var(--accent-ink); box-shadow: 0 0 0 1px var(--accent), 0 6px 16px -6px color-mix(in srgb, var(--accent) 60%, transparent); }
.tr-t.anim tbody tr { animation: rise .45s var(--lp-ease) both; }
.tr-t.anim tbody tr:nth-child(2) { animation-delay: 70ms; } .tr-t.anim tbody tr:nth-child(3) { animation-delay: 140ms; } .tr-t.anim tbody tr:nth-child(4) { animation-delay: 210ms; }
.tr-src { position: relative; margin-top: 16px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--bg-soft);
  transition: opacity .35s var(--lp-ease), transform .35s var(--lp-ease); }
.tr-src::before { content: ""; position: absolute; left: 16px; top: -1px; width: 32px; height: 2px; background: var(--warm); }
.tr-src.off { opacity: 0; transform: translateY(6px); }
.tr-src .k { font-size: 12px; color: var(--ink-3); }
.tr-src .v { margin: 3px 0 10px; font: 500 19px var(--mono); color: var(--ink); }
.tr-src .v small { margin-left: 8px; font: 400 12px var(--sans); color: var(--ink-3); }
.tr-src dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 14px; margin: 0; font-size: 13px; }
.tr-src dt { color: var(--ink-3); }
.tr-src dd { margin: 0; min-width: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.tr-src dd code { font-size: 12px; color: var(--ink); }
.tr-src.on dl > * { animation: rise .35s var(--lp-ease) both; }
.tr-src.on dl > :nth-child(n+3) { animation-delay: 60ms; } .tr-src.on dl > :nth-child(n+5) { animation-delay: 120ms; } .tr-src.on dl > :nth-child(n+7) { animation-delay: 180ms; }
.cursor { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; opacity: 0; transform: translate(var(--x, 0), var(--y, 0));
  transition: transform .7s var(--lp-ease), opacity .3s; }
.cursor.on { opacity: 1; }
.cursor svg { display: block; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.cursor path { fill: var(--ink); stroke: var(--bg); stroke-width: 1.2; }
.cursor .ring { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; }
.cursor.click .ring { animation: ring .5s var(--lp-ease); }
@keyframes ring { from { opacity: .9; transform: scale(.3); } to { opacity: 0; transform: scale(1.7); } }
.trace .tr-line { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.trace .tr-line path { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); opacity: 0; }
.trace .tr-line.on path { opacity: 1; animation: draw .7s var(--lp-ease) forwards; }
.trace .tr-line circle { fill: var(--warm); opacity: 0; }
.trace .tr-line.on circle { animation: dot .3s var(--lp-ease) .6s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes dot { to { opacity: 1; } }

/* hero: coverage in figures */
.hx-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: clamp(60px, 7vw, 92px) 0 0; border-top: 1px solid var(--line); }
.hx-stats > div { position: relative; min-width: 0; padding: 26px 20px 34px 0; }
.hx-stats > div + div { padding-left: 22px; border-left: 1px solid var(--line); }
.hx-stats > div::before { content: ""; position: absolute; left: 0; top: -1px; width: 30px; height: 2px; background: var(--accent); }
.hx-stats > div + div::before { left: 22px; }
.hx-stats > div:nth-child(2)::before { background: var(--warm); } .hx-stats > div:nth-child(3)::before { background: var(--s3); }
.hx-stats > div:nth-child(4)::before { background: var(--lp-sky); } .hx-stats > div:nth-child(5)::before { background: var(--ink-3); }
.hx-stats b { display: block; font: 400 clamp(36px, 3.7vw, 54px)/1 var(--serif); letter-spacing: -.03em; color: var(--ink); }
.hx-stats span { display: block; margin-top: 12px; font: 500 11.5px/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }

/* bands of colour --------------------------------------------------------------------------------------------------- */
.band { position: relative; overflow: clip; }
.band.navy { background: var(--lp-navy); color: var(--lp-on-navy); }
.band.tint, .band.cream { margin-top: clamp(84px, 10vw, 140px); padding: clamp(84px, 10vw, 132px) 0; }
.band.tint { background: var(--lp-tint); border-top: 1px solid var(--lp-tint-line); border-bottom: 1px solid var(--lp-tint-line); }
.band.cream { background: var(--lp-cream); border-top: 1px solid var(--lp-cream-line); border-bottom: 1px solid var(--lp-cream-line); }
.band.tint::before, .band.cream::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .7;
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px); background-size: 96px 100%;
  -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); }
.band > .wrap { position: relative; }

/* the ledger tape on the navy band */
.l-tape { padding: 18px 0 22px; }
.l-tape::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 140% at 85% 0%, rgba(91, 116, 240, .32), transparent 70%), radial-gradient(40% 120% at 0% 100%, rgba(240, 161, 90, .12), transparent 70%); }
.tape-h { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.l-tape .eyebrow { color: var(--lp-on-navy-2); }
.l-tape .eyebrow i { background: var(--lp-amber); }
.tape-more { font-size: 13px; color: var(--lp-sky); }
.tape-more:hover { color: #fff; }
.tape { position: relative; overflow: hidden; margin-top: 14px; padding: 2px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.tape-track { display: flex; gap: 10px; width: max-content; padding: 0 24px; }
.tape.run .tape-track { animation: tape var(--tape-s, 60s) linear infinite; }
.tape:hover .tape-track, .tape:focus-within .tape-track { animation-play-state: paused; }
@keyframes tape { to { transform: translateX(-50%); } }
.tp { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 15px; border: 1px solid var(--lp-navy-line); border-radius: 999px;
  background: rgba(255, 255, 255, .045); color: var(--lp-on-navy-2); font-size: 13.5px; white-space: nowrap; transition: background-color .2s, border-color .2s; }
.tp:hover { color: #fff; text-decoration: none; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); }
.tp b { font: 500 13px var(--mono); color: #fff; }
.tp .mk { font: 500 12px var(--mono); }
.tp .st { font-size: 12.5px; }
.tp .tt { color: var(--lp-on-navy); }
.tp small { font: 400 12px var(--mono); color: var(--lp-on-navy-3); }
.tp.st-strengthened .mk, .tp.st-new .mk { color: var(--lp-mint); }
.tp.st-weakened .mk { color: var(--lp-coral); }
.tp.st-retired .mk { color: var(--lp-on-navy-3); }
.tp.st-confirmed .mk { color: var(--lp-sky); }
.tp.none { border: 0; background: transparent; color: var(--lp-on-navy-2); }
@media (prefers-reduced-motion: reduce) {
  .tape { -webkit-mask-image: none; mask-image: none; }
  .tape-track { flex-wrap: wrap; width: auto; }
  .tape.run .tape-track { animation: none; }
}

/* 01 analysis: a credit update and the changes of the latest reports ------------------------------------------------- */
.la { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 4.5vw, 64px); align-items: start; }
.la-mini { position: relative; overflow: hidden; padding: 18px; border: 1px solid var(--line-2); border-radius: 20px; background: var(--surface); box-shadow: var(--lp-shadow); }
.la-mini::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--accent), var(--lp-sky)); }
.la-mini .hd { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; font-size: 12.5px; color: var(--ink-3); }
.la-mini .hd b { font: 400 20px/1.2 var(--serif); color: var(--ink); }
.la-mini .g { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--line); }
.la-mini .g div { padding: 13px 15px; background: var(--surface); }
.la-mini .g span { display: block; font-size: 11.5px; color: var(--ink-3); }
.la-mini .g b { display: block; margin-top: 4px; font: 400 26px/1.1 var(--serif); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: lining-nums; }
.la-mini .g em { font: 400 10.5px var(--mono); font-style: normal; color: var(--ink-3); }
.la-open { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 13.5px; font-weight: 500; }
#feed { position: relative; border-radius: 22px; box-shadow: var(--lp-shadow); }
#feed::before { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: 2px; background: linear-gradient(90deg, var(--lp-amber), var(--accent)); }
#feed .feed-h { padding: 15px 18px; background: var(--bg-soft); }
#feed .feed-h .live i { background: var(--ok); animation: pulse 2.2s infinite; }
#feed .feed-list { height: 520px; padding: 0 18px; }
#feed .feed-list li { padding: 14px 0; }
@media (prefers-reduced-motion: reduce) { #feed .feed-list { height: auto; } }

/* 02 proof on the cobalt tint --------------------------------------------------------------------------------------- */
#proof .sec-h .btn-x { flex: none; }
.proof { position: relative; padding: clamp(24px, 3.4vw, 44px); border: 1px solid var(--lp-tint-line); border-radius: 26px; background: var(--surface); box-shadow: var(--lp-shadow); }
.proof-nums { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px 24px; }
.proof-nums > div { min-width: 0; }
.proof-nums b { display: block; font: 400 clamp(34px, 3.5vw, 52px)/1 var(--serif); letter-spacing: -.03em; color: var(--ink); }
.proof-nums > div:nth-child(2) b { color: var(--s3); } .proof-nums > div:nth-child(3) b { color: var(--accent); }
.proof-nums span { display: block; margin-top: 10px; font-size: 13px; line-height: 1.4; color: var(--ink-3); }
.pbar { display: flex; height: 20px; margin: clamp(26px, 3vw, 38px) 0 14px; overflow: hidden; border-radius: 8px; background: var(--bg-soft); }
.pbar i { display: block; width: 0; transition: width 1.4s var(--lp-ease); }
.pbar i + i { box-shadow: inset 2px 0 0 var(--surface); }
.pbar.on i { width: var(--w); }
.pbar .a, .proof-legend .a { background: var(--s3); }
.pbar .b, .proof-legend .b { background: var(--s1); }
.pbar .c, .proof-legend .c { background: var(--line-2); }
.proof-legend { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--ink-2); }
.proof-legend span { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-soft); }
.proof-legend i { width: 10px; height: 10px; border-radius: 3px; }
.proof-note { max-width: 92ch; margin: 22px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-3); }

/* 03 coverage: one tile per company --------------------------------------------------------------------------------- */
#cov-seg { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 4px; border-radius: 999px; background: var(--bg-soft); }
#cov-seg button { height: 34px; padding: 0 15px; border-radius: 999px; white-space: nowrap; transition: background-color .2s, color .2s; }
#cov-seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); box-shadow: none; }
#cov-seg button[aria-pressed="true"] .c { color: inherit; opacity: .7; }
.tk-wrap { position: relative; }
.tk-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.tk { position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 13px 13px 12px; border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line); color: var(--ink); transition: background-color .25s; }
.tk::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: radial-gradient(140px circle at var(--x, 50%) var(--y, 50%), color-mix(in srgb, var(--accent) 16%, transparent), transparent 72%); }
.tk:hover, .tk:focus-visible { color: var(--ink); text-decoration: none; background: var(--bg-soft); }
.tk:hover::after { opacity: 1; }
/* the market filter sets hidden on tiles, and display: flex above would keep them visible */
.tk[hidden] { display: none; }
.tk b { font: 500 13.5px var(--mono); color: var(--ink); }
.tk .n { overflow: hidden; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; text-overflow: ellipsis; }
.tk .s, .tk .p { overflow: hidden; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; text-overflow: ellipsis; }
.tk .p { display: none; color: var(--accent-ink); }
.tk:hover .s, .tk:focus-visible .s { display: none; }
.tk:hover .p, .tk:focus-visible .p { display: block; }
.tk.lit { animation: lit 1.1s var(--lp-ease) backwards; animation-delay: var(--d, 0ms); }
.tk.lit b { animation: litb 1.1s var(--lp-ease) backwards; animation-delay: var(--d, 0ms); }
@keyframes lit { 0%, 100% { background-color: transparent; } 30% { background-color: var(--accent-soft); } }
@keyframes litb { 0%, 100% { color: var(--ink); } 30% { color: var(--accent-ink); } }
.tk-note { max-width: 110ch; margin: 16px 0 0; font-size: 13px; color: var(--ink-3); }

/* 04 point in time on the cream band: a receipt of one snapshot over the earlier ones -------------------------------- */
.l-pit { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(36px, 5vw, 72px); align-items: center; }
.l-pit .l-msg { max-width: 52ch; }
.pit-stack { position: relative; min-width: 0; margin: 0 26px 28px 0; }
.pit-stack:not(:has(.pit)) { display: none; }
.pit-stack .ghost { position: absolute; inset: 0; border: 1px solid var(--lp-cream-line); border-radius: 20px; background: var(--surface); pointer-events: none; }
.pit-stack .g1 { opacity: .7; transform: translate(13px, 13px) rotate(1.4deg); }
.pit-stack .g2 { opacity: .4; transform: translate(26px, 27px) rotate(2.8deg); }
.pit { position: relative; z-index: 1; min-width: 0; padding: 24px 26px; border: 1px solid var(--lp-cream-line); border-radius: 20px; background: var(--surface); box-shadow: var(--lp-shadow); }
.pit::before { content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--warm), var(--accent)); }
.pit-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.pit-id code { padding: 5px 10px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-ink); font: 500 14px var(--mono); }
.pit-co { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 16px 0 14px; padding-bottom: 14px; border-bottom: 1px dashed var(--line-2); }
.pit-co a { font: 400 26px/1.15 var(--serif); letter-spacing: -.015em; color: var(--ink); }
.pit-co span { font-size: 13px; color: var(--ink-3); }
.pit-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px 18px; margin: 0; font-size: 13.5px; }
.pit-dl dt { color: var(--ink-3); }
.pit-dl dd { margin: 0; min-width: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.pit-dl .hash { font: 400 12.5px var(--mono); color: var(--ink); }
.pit-dl .hash .dim { color: var(--ink-3); }
.pit-cite { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line-2); }
.pit-cite .k { display: block; margin-bottom: 5px; font-size: 11.5px; color: var(--ink-3); }
.pit-cite code { display: block; font: 400 12px/1.55 var(--mono); color: var(--ink-2); overflow-wrap: anywhere; }

/* 05 agents: a navy panel with the MCP terminal --------------------------------------------------------------------- */
.l-agents { position: relative; isolation: isolate; overflow: clip; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(30px, 4.5vw, 64px); align-items: center; padding: clamp(28px, 4.6vw, 64px); border-radius: 30px; background: var(--lp-navy); color: var(--lp-on-navy);
  box-shadow: 0 40px 80px -40px rgba(10, 18, 48, .6); }
.l-agents::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(55% 80% at 100% 0%, rgba(91, 116, 240, .42), transparent 70%), radial-gradient(45% 70% at 0% 100%, rgba(240, 161, 90, .14), transparent 70%); }
.l-agents::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(60% 70% at 80% 30%, #000, transparent 75%); mask-image: radial-gradient(60% 70% at 80% 30%, #000, transparent 75%); }
.ag-copy { min-width: 0; }
.l-agents .eyebrow { color: var(--lp-on-navy-2); }
.l-agents .eyebrow i { background: var(--lp-amber); }
.l-agents .eyebrow .ix { color: var(--lp-sky); }
.l-agents .l-h2 { margin: 18px 0 18px; color: #fff; }
.l-agents .l-msg { margin: 0 0 24px; color: var(--lp-on-navy-2); }
.l-mcp { display: grid; gap: 12px; }
.l-mcp code { padding: 13px 15px; border: 1px solid var(--lp-navy-line); border-radius: 12px; background: rgba(255, 255, 255, .05); color: #fff; font: 400 15px var(--mono); overflow-wrap: anywhere; }
.l-mcp code .host { white-space: nowrap; } /* the address breaks at its slashes, not inside the host name (L11) */
.l-mcp > div { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.l-agents .copy { height: 38px; border-radius: 999px; border-color: var(--lp-navy-line); background: rgba(255, 255, 255, .06); color: var(--lp-on-navy); }
.l-agents .copy:hover { color: #fff; border-color: rgba(255, 255, 255, .4); }
.ag-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.ag-tools code { padding: 4px 9px; border: 1px solid var(--lp-navy-line); border-radius: 7px; color: var(--lp-on-navy-2); font: 400 12px var(--mono);
  transition: background-color .25s, color .25s, border-color .25s; }
.ag-tools code.on { border-color: transparent; background: var(--lp-sky); color: var(--lp-navy); }
.term { min-width: 0; overflow: hidden; border: 1px solid var(--lp-navy-line); border-radius: 16px; background: var(--lp-navy-3); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
.term-h { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--lp-navy-line); font: 500 12.5px var(--sans); color: var(--lp-on-navy-2); }
.term-h .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lp-mint); animation: pulse 2.2s infinite; }
.term-h .ro { margin-left: auto; padding: 1px 7px; border: 1px solid var(--lp-navy-line); border-radius: 6px; font: 400 11.5px var(--mono); color: var(--lp-on-navy-3); }
.term-b { height: 340px; margin: 0; padding: 16px 18px; overflow: hidden; color: #C9D1EC; font: 400 12.5px/1.7 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.term-b .ln { display: block; }
.term-b .ln.new { animation: rise .25s var(--lp-ease) both; }
.term-b .pr { color: var(--lp-amber); }
.term-b .tl { color: #fff; font-weight: 500; }
.term-b .k { color: var(--lp-sky); }
.term-b .s { color: #E9EDFA; }
.term-b .nm { color: var(--lp-amber); }
.term-b .cm { color: #7380A8; }
.caret { display: inline-block; width: 7px; height: 1.1em; margin-left: 1px; vertical-align: -3px; background: var(--lp-sky); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* the last call: cobalt into navy, and the wordmark at the foot ------------------------------------------------------ */
.l-final { position: relative; isolation: isolate; overflow: clip; margin-top: clamp(84px, 10vw, 140px); padding: clamp(88px, 11vw, 148px) 0 0;
  text-align: center; color: #fff; background: radial-gradient(120% 95% at 50% 0%, #3A55DC 0%, #22369C 40%, #0A1230 80%); }
:root[data-theme="dark"] .l-final { background: radial-gradient(120% 95% at 50% 0%, #2A3FA8 0%, #18266E 42%, #0A1230 82%); }
.fx-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.fx-bg i { position: absolute; display: block; }
.fx-bg .f1 { width: 700px; height: 700px; left: -260px; bottom: -320px; background: radial-gradient(circle, rgba(240, 161, 90, .3), transparent 64%); }
.fx-bg .f2 { width: 760px; height: 760px; right: -300px; top: -360px; background: radial-gradient(circle, rgba(157, 176, 255, .36), transparent 64%); }
.fx-lines { inset: 0; opacity: .6; background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 64px 64px; background-position: center top;
  -webkit-mask-image: radial-gradient(60% 60% at 50% 30%, #000 10%, transparent 75%); mask-image: radial-gradient(60% 60% at 50% 30%, #000 10%, transparent 75%); }
.l-final .eyebrow { color: rgba(255, 255, 255, .72); }
.l-final .eyebrow i { background: var(--lp-amber); }
.l-final h2 { max-width: 17ch; margin: 22px auto 36px; font: 400 clamp(40px, 5.6vw, 80px)/1 var(--serif); font-variation-settings: "opsz" 72;
  letter-spacing: -.035em; color: #fff; text-wrap: balance; }
.l-final .l-cta { justify-content: center; }
.giant { display: flex; align-items: baseline; justify-content: center; gap: .16em; margin-top: clamp(64px, 8vw, 112px); padding: 0 12px;
  font: 500 clamp(60px, 19vw, 290px)/.86 var(--serif); letter-spacing: -.045em; white-space: nowrap; user-select: none;
  color: transparent; background: linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .03) 82%); -webkit-background-clip: text; background-clip: text;
  transform: translateY(.14em); }
.giant svg { position: relative; top: .1378em; width: .84em; height: .84em; flex: none; fill: rgba(255, 255, 255, .17); }
.giant svg .sq { fill: var(--lp-amber); }

/* widths ------------------------------------------------------------------------------------------------------------ */
@media (max-width: 1100px) {
  .tk-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .proof-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .hx-panel { margin-right: 22px; }
  .hx-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hx-stats > div:nth-child(4) { padding-left: 0; border-left: 0; }
  .hx-stats > div:nth-child(4)::before { left: 0; }
  .hx-stats > div:nth-child(n+4) { border-top: 1px solid var(--line); }
  .la, .l-pit, .l-agents { grid-template-columns: 1fr; }
  .tk-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .l-marks { grid-template-columns: 1fr; gap: 10px; margin-right: 22px; }
  .proof-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec-h .btn-x { display: none; }
  .tk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .hx { padding-top: 40px; }
  /* "Institutional-Grade" stays on one line down to a width of 320 */
  .hx-h1 { margin-top: 22px; font-size: clamp(32px, 10.2vw, 54px); }
  .hx-lede { margin: 22px 0 28px; font-size: 16.5px; }
  .l-cta .btn-x { flex: 1 1 auto; }
  .hx-panel, .l-marks { margin-right: 16px; }
  .hx-stage .s1 { transform: translate3d(14px, 12px, 0) rotate(2.4deg); }
  .hx-stage .s2 { transform: translate3d(-8px, 18px, 0) rotate(-2deg); }
  .tr-body { padding: 14px 14px 16px; }
  .hx-stats { grid-template-columns: 1fr 1fr; margin-top: 52px; }
  .hx-stats > div, .hx-stats > div + div { padding: 20px 12px 24px 0; border-left: 0; }
  .hx-stats > div::before, .hx-stats > div + div::before { left: 0; }
  .hx-stats > div:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
  .hx-stats > div:nth-child(even)::before { left: 16px; }
  .hx-stats > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .hx-stats > div:nth-child(4) { padding-left: 16px; border-left: 1px solid var(--line); }
  .hx-stats > div:nth-child(4)::before { left: 16px; }
  .hx-stats > div:last-child { grid-column: 1 / -1; }
  .hx-stats b { font-size: 34px; }
  .tape-track { padding: 0 16px; }
  .tp { height: 36px; padding: 0 12px; font-size: 13px; }
  .sec-h { margin-bottom: 22px; }
  #feed .feed-list { height: 480px; }
  .tk { padding: 11px 9px 10px; }
  .pit-stack { margin: 0 18px 22px 0; }
  .pit-stack .g1 { transform: translate(9px, 9px) rotate(1.2deg); }
  .pit-stack .g2 { transform: translate(18px, 19px) rotate(2.4deg); }
  .pit { padding: 20px 18px; }
  .pit::before { left: 18px; right: 18px; }
  .l-agents { margin: 0 -4px; padding: 26px 20px; border-radius: 24px; }
  .term-b { height: 400px; font-size: 11.5px; }
  .l-final h2 { font-size: 38px; }
  .top .btn.launch { padding: 0 13px; font-size: 13.5px; }
}
@media (max-width: 400px) {
  [data-page="landing"] .top .wrap { gap: 8px; }
  .top .btn.launch { padding: 0 11px; font-size: 13px; }
}

/* the live buyout of the hero: Deal Lab beside its copy, a model of one company of each market that the reader moves -- */
.hd { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 60px); align-items: center;
  margin: clamp(72px, 8vw, 112px) auto 0; text-align: left; }
.hd-new { margin-left: 4px; padding: 4px 8px; border-radius: 999px; background: var(--lp-amber); color: #0A1230;
  font: 700 10.5px/1 var(--sans); letter-spacing: .08em; }
.hd-h { margin: 16px 0 14px; max-width: 14ch; font: 400 clamp(32px, 3.6vw, 50px)/1.03 var(--serif); font-variation-settings: "opsz" 72;
  letter-spacing: -.022em; color: var(--ink); }
.hd-h em { font-style: italic; color: var(--accent); }
.hd-msg { max-width: 44ch; margin: 0 0 26px; color: var(--ink-2); font-size: clamp(15.5px, 1.15vw, 17px); line-height: 1.65; }
.hd .l-cta { justify-content: flex-start; }
.hd-panel { position: relative; min-width: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--line-2) 85%, transparent);
  border-radius: 20px; background: var(--surface); box-shadow: var(--lp-shadow); }
.hd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: 2px;
  background: linear-gradient(90deg, var(--lp-amber), var(--lp-cobalt-2) 50%, var(--lp-sky)); }
.hd-tabs { display: flex; gap: 4px; padding: 10px 10px 0; border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.hd-tabs button { flex: 1; height: 40px; border: 0; border-radius: 10px 10px 0 0; background: transparent; color: var(--ink-3);
  font: 500 13.5px var(--sans); cursor: pointer; transition: color .2s, background-color .2s; }
.hd-tabs button:hover { color: var(--ink); }
.hd-tabs button[aria-selected="true"] { color: var(--ink); background: var(--surface); box-shadow: 0 -1px 0 var(--line), 1px 0 0 var(--line), -1px 0 0 var(--line); }
.hd-body { display: grid; gap: 16px; padding: 18px 20px 18px; }
.hd-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.hd-name { font: 500 19px/1.2 var(--serif); color: var(--ink); }
.hd-base { font: 400 11.5px var(--mono); color: var(--ink-3); text-align: right; }
.hd-ctl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 22px; }
.hd-f { display: grid; gap: 8px; }
.hd-f .top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ink-2); }
.hd-f output { font: 500 13px var(--mono); color: var(--ink); text-align: right; }
.hd-f input[type="range"] { width: 100%; margin: 0; accent-color: var(--accent); cursor: pointer; }
.hd-f input[type="range"]:disabled { cursor: default; opacity: .6; }
.hd-note { font-size: 11.5px; line-height: 1.3; color: var(--ink-3); }
.hd-note.on { color: var(--warm); font-weight: 500; }
.hd-out { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)); gap: 10px; }
.hd-out > div { min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft); }
.hd-out p { margin: 0 0 7px; font-size: 12px; line-height: 1.3; color: var(--ink-3); }
.hd-out b { display: block; font: 500 21px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.hd-out .hd-irr { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 22%, var(--line)); }
.hd-irr b { font: 400 34px/1 var(--serif); letter-spacing: -.02em; color: var(--ink); }
.hd-irr.up b { color: var(--accent-ink); }
.hd-irr small { display: block; margin-top: 7px; font-size: 11.5px; color: var(--ink-3); }
.hd-bridge { margin: 0; }
.hd-bridge svg { display: block; width: 100%; height: auto; }
.hd-bridge .t rect { fill: var(--ink-3); } .hd-bridge .p rect { fill: var(--s1); } .hd-bridge .m rect { fill: var(--s2); }
.hd-bridge text { font: 11.5px var(--sans); text-anchor: middle; }
.hd-bridge text.n { fill: var(--ink-3); } .hd-bridge text.v { fill: var(--ink-2); font-weight: 500; }
.hd-bridge figcaption { margin-top: 4px; font-size: 12px; color: var(--ink-3); }
.hd-open { justify-self: start; font-size: 13.5px; font-weight: 500; color: var(--accent); }
@media (max-width: 960px) {
  .hd { grid-template-columns: minmax(0, 1fr); }
  .hd-h { max-width: 18ch; }
  .hd-out { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .hd-ctl { grid-template-columns: minmax(0, 1fr); }
  .hd-tabs button { font-size: 12.5px; }
  .hd-body { padding: 16px 14px; }
}