/* vntr.vc home — design pass 23.10 for every block after the hero (index.html and index-bento.html).
   Loaded only by the two home pages, after style.css. Speaks the hero's language (hero.css): 32px cards, the royal
   card, white cards with a soft shadow, Taviraj light headings, Poppins body. Bento-only layout lives in bento.css.
   Rules: palette tokens only; no eyebrows; calm, consistent H2s; two-column grids use minmax(0, …). */

:root {
  --home-h2: clamp(32px, 3.1vw, 46px);
  --home-sec: clamp(72px, 8vw, 120px);
  --section-y: clamp(64px, 7.5vw, 104px);   /* ONE rhythm: the gap between two sections' content (each section pads half of it) */
  --r-xl: 32px;   /* section cards (= hero) */
  --r-lg: 24px;   /* cards inside a section */
  --r-md: 20px;   /* tiles, photos, quote card */
  --shadow-card: 0 1px 2px rgba(29, 29, 27, .04), 0 12px 32px rgba(29, 29, 27, .07);
  --shadow-lift: 0 2px 4px rgba(29, 29, 27, .05), 0 18px 44px rgba(29, 29, 27, .12);
  --shadow-float: 0 10px 30px rgba(29, 29, 27, .18);   /* hero toast */
}
@media (max-width: 719px) { :root { --r-xl: 24px; --r-lg: 20px; } }

/* role sets for cards that must not follow the page tone (same values as the tone system in style.css) */
.os-light, .svc-card, .join-card, .press-tile, .arch-v2 .tops > a, .b-arch .blk.tone-white {
  --ice: var(--ink); --ice-2: rgba(29,29,27,.68); --ice-3: rgba(29,29,27,.5); --mute: rgba(29,29,27,.64);
  --line: rgba(29,29,27,.12); --line-night: rgba(29,29,27,.12); --line-night-2: rgba(29,29,27,.28);
  --sky: var(--royal); --dot: var(--royal);
  --btn-bg: var(--royal); --btn-fg: #fff; --btn-hover-bg: var(--navy); --btn-hover-fg: #fff;
  --btn2-line: rgba(29,29,27,.32); --btn2-hover-bg: var(--ink); --btn2-hover-fg: #fff;
}
.os-blue {
  --ice: #fff; --ice-2: rgba(255,255,255,.86); --ice-3: rgba(255,255,255,.68); --mute: rgba(255,255,255,.8);
  --line: rgba(255,255,255,.24); --line-night: rgba(255,255,255,.24); --line-night-2: rgba(255,255,255,.5);
  --sky: var(--ice-blue); --dot: #fff;
}

/* ——— type: one calm H2 for every block (the hero title is the only display size) ——— */
[data-section="home"] section:not(.hl) h2:not(.summit-title) {
  font-size: var(--home-h2); line-height: 1.08; letter-spacing: -.03em; max-width: 17em; text-wrap: balance; margin: 0 0 16px;
}
[data-section="home"] section:not(.hl) .sub { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; max-width: 36em; text-wrap: pretty; }

/* ——— rhythm (classic page): one section padding ——— */
body:not(.bento-page)[data-section="home"] section[class*="tone-"]:not(.hl):not(.summit-stage) { padding: calc(var(--section-y) / 2) 0; }
/* the morph paints one colour at a time, so equal halves give the same content gap at every boundary (Summit keeps its stage) */

/* head row: heading + lead on the left, the block's actions on the right (no buttons floating under the content) */
.h-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 48px; margin-bottom: clamp(20px, 2vw, 28px); }   /* heading → content gap, site-wide (founder, 26.10) */
.h-txt { flex: 1 1 520px; min-width: 0; }
.h-txt > :last-child { margin-bottom: 0; }
.h-act { flex: none; }
.h-act.btns { gap: 10px; }

/* ═════ 4 · #architecture ═════ */
.arch-v2 { margin-top: 0; }
.arch-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--beige); flex: none; margin-bottom: 36px; }
.arch-ico svg { width: 22px; height: 22px; fill: none; stroke: var(--royal); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.arch-v2 .tops > a { display: flex; flex-direction: column; border: 0; border-radius: var(--r-lg); padding: 28px 30px 32px; background: #fff; box-shadow: var(--shadow-card); transition: transform .25s ease, box-shadow .25s ease; }
.arch-v2 .tops > a::before { display: none; }
.arch-v2 .tops > a:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.arch-v2 .tops h3 { font: 300 clamp(28px, 2.4vw, 34px)/1.05 var(--serif); letter-spacing: -.02em; text-transform: none; margin: 0 0 10px; }
.arch-v2 .tops p { max-width: 24em; }
.arch-v2 .base { border-radius: var(--r-lg); }
@media (min-width: 900px) { .arch-v2 .base { padding: 32px 40px; } .arch-v2 .tops > a::after { bottom: -45px; } }

/* ═════ 5 · #os — feature cards: text + product screen bleeding off the card ═════ */
.os-rows { display: grid; gap: 16px; }
.os-card { position: relative; overflow: hidden; border-radius: var(--r-xl); display: grid; grid-template-columns: minmax(0, 1fr); color: var(--ice); }
.os-card.os-light { background: var(--beige); }
.os-card.os-blue { background: var(--royal); }
.os-text { padding: clamp(28px, 4vw, 56px); min-width: 0; align-self: center; }
.os-text h3 { font: 300 clamp(28px, 2.5vw, 38px)/1.1 var(--serif); letter-spacing: -.02em; color: var(--ice); margin: 0 0 14px; text-wrap: balance; }
.os-text h3 em { font-style: italic; color: var(--sky); }
.os-text > p { color: var(--ice-2); margin: 0 0 24px; max-width: 32em; }
.os-text .sc-list { margin-bottom: 24px; }
.os-text .sc-list li { padding: 12px 0; }
@media (min-width: 481px) { .os-text .sc-list li { grid-template-columns: 34px 92px minmax(0, 1fr); } }
.os-text .link { color: var(--sky); }
.os-blue .os-text .link:hover { color: #fff; }
/* the screen: a real VNTR OS screenshot shown at a readable scale and cropped by the card edge */
.os-shot { position: relative; overflow: hidden; height: 320px; margin-left: clamp(28px, 4vw, 56px); border-top-left-radius: 16px; background: #fff; box-shadow: var(--shadow-lift); }
.os-shot img { position: absolute; left: 0; top: 0; width: 760px; max-width: none; height: auto; display: block; }
@media (min-width: 1000px) {
  .os-card { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 560px; }
  .os-card.reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .os-card.reverse .os-text { order: 2; }
  .os-shot { height: auto; margin: 56px 0 0; align-self: stretch; }
  .os-card.reverse .os-shot { border-top-left-radius: 0; border-top-right-radius: 16px; }
  .os-shot img { width: 1080px; }
}

/* ═════ 6 · #services — white cards ═════ */
.svc-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .svc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.svc-card { display: flex; flex-direction: column; min-height: 300px; padding: 28px 28px 24px; background: #fff; color: var(--ink); border-radius: var(--r-lg); box-shadow: var(--shadow-card); text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.svc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.svc-n { font: 500 12px/1 var(--sans); letter-spacing: .12em; color: var(--royal); }
.svc-card h3 { font: 300 clamp(26px, 2.1vw, 30px)/1.1 var(--serif); letter-spacing: -.02em; margin: 40px 0 10px; color: var(--ink); }
.svc-card p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(29, 29, 27, .66); }
.svc-go { margin-top: auto; padding-top: 24px; }
.svc-go svg { display: block; width: 44px; height: 44px; padding: 12px; border-radius: 50%; border: 1px solid rgba(29, 29, 27, .16); fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: background .2s, border-color .2s, stroke .2s; }
.svc-card:hover .svc-go svg { background: var(--royal); border-color: var(--royal); stroke: #fff; }
.svc-card:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
#services .disclaimer { margin-top: 24px; color: var(--ice-2); max-width: none; }   /* ≥4.5:1: .86 white on blue, .68 ink on beige */

/* ═════ 7 · #summit — the dark stage stays; the collage becomes a tidy mosaic ═════ */
body:not(.bento-page) #summit.summit-stage { padding: clamp(80px, 9vw, 128px) 0; }
#summit .summit-title { font-size: clamp(40px, 5vw, 72px); }
#summit .summit-photos { position: relative; min-height: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1.25fr) minmax(0, 1fr); aspect-ratio: 6 / 5; }
#summit .summit-photos img { position: static; inset: auto; width: 100%; height: 100%; aspect-ratio: auto; border-radius: var(--r-md); object-fit: cover; }
#summit .summit-photos .p1 { grid-column: 1 / 3; object-position: 50% 45%; }
#summit .summit-photos .p2 { object-position: 60% 40%; }
#summit .summit-photos .p3 { object-position: 40% 50%; }
@media (max-width: 559px) { #summit .summit-photos { aspect-ratio: 1 / 1; gap: 8px; } }

/* ═════ 8 · #events ═════ */
[data-section="home"] .ev-grid { gap: 16px; }
[data-section="home"] .ev-card { border: 0; border-radius: var(--r-lg); box-shadow: var(--shadow-card); transition: transform .25s ease, box-shadow .25s ease; }
[data-section="home"] .ev-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
[data-section="home"] .ev-body { padding: 18px 22px 22px; }
[data-section="home"] .ev-body h3 { font-size: 21px; }
@media (max-width: 719px) { [data-section="home"] .ev-grid { padding: 4px 4px 16px; margin: -4px -4px 0; } }

/* ═════ 10 · #press — heading left, white logo tiles right ═════ */
.press-row { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); align-items: center; }
.press-row h2 { margin: 0 !important; }
@media (min-width: 900px) { .press-row { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; } }
.press-tiles { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .press-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.press-tile { display: flex; align-items: center; justify-content: center; min-height: 128px; padding: 24px; background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-card); transition: transform .25s ease, box-shadow .25s ease; }
.press-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.press-tile img { height: 40px; max-width: 86%; width: auto; object-fit: contain; filter: brightness(0); opacity: .82; }
.press-tile:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ═════ 11 · #join — steps card | photo with the quote ═════ */
.join-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .join-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.join-card { display: flex; flex-direction: column; background: #fff; color: var(--ink); border-radius: var(--r-xl); padding: clamp(28px, 4vw, 56px); box-shadow: var(--shadow-card); min-width: 0; }
.join-steps { list-style: none; margin: 8px 0 32px; padding: 0; }
.join-steps li { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid rgba(29, 29, 27, .1); }
.join-steps li:last-child { border-bottom: 1px solid rgba(29, 29, 27, .1); }
.join-steps b { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--beige); font: 500 13px/1 var(--sans); color: var(--royal); }
.join-steps span { font-size: 16px; line-height: 1.5; }
.join-card .btns { margin-top: auto; }
.join-photo { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-xl); background: var(--photo); min-height: 480px; min-width: 0; }
.join-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.join-photo > .net-cap { top: 20px; right: 20px; }
.join-quote { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 20px; max-width: 480px; margin: 0; padding: 22px 24px; background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-radius: var(--r-md); box-shadow: var(--shadow-float); color: var(--ink); }
.join-quote p { margin: 0; font: 300 clamp(18px, 1.5vw, 21px)/1.4 var(--serif); letter-spacing: -.01em; text-wrap: pretty; }
.join-quote footer { margin-top: 14px; font: 500 11px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(29, 29, 27, .6); }
@media (min-width: 900px) { .join-quote { left: 24px; bottom: 24px; } }

@media (prefers-reduced-motion: reduce) { .arch-v2 .tops > a, .svc-card, .ev-card, .press-tile { transition: none; } }

.arch-ico svg { width: 24px; height: 24px; stroke-width: 1.8; }
@media (max-width: 719px) {
  .h-act { flex: 1 1 100%; }
  .h-act.btns .btn { flex: 1 1 auto; }
}
@media (max-width: 639px) {
  .svc-card { min-height: 0; }
  .svc-card h3 { margin-top: 24px; }
  .arch-ico { margin-bottom: 24px; }
  .press-tile { min-height: 96px; }
  .press-tile img { height: 34px; }
}

/* official VNTR OS logo (white ink, light-blue dot; from investor-brain apps/cabinet/public/brand) on the blue base bar */
.architecture .base h3::before { content: none; }
.base h3 .os-logo, .b-os h3 .os-logo { display: block; height: clamp(30px, 2.6vw, 40px); width: auto; }

/* ═════ 2 · #numbers — 4×2 mosaic (as on vntr.vc/sponsorship): figure tiles alternate with event photos; one royal tile.
   Figure + label sit bottom-left. 2 columns below 900px keep the checkerboard via `order`. ═════ */
.nums { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nums > li { position: relative; min-width: 0; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--r-lg); }
.nt { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: clamp(16px, 2vw, 28px); background: var(--beige); color: var(--ink); }   /* beige tiles: the first screen (hero + numbers) is white */
.nt b { font: 300 clamp(34px, 4vw, 60px)/1 var(--serif); letter-spacing: -.03em; white-space: nowrap; }
.nt span { font: 400 clamp(13px, 1.1vw, 16px)/1.35 var(--sans); color: rgba(29, 29, 27, .66); }
.nt-blue { background: var(--royal); color: #fff; box-shadow: none; }
.nt-blue span { color: rgba(255, 255, 255, .86); }
.nt-ph { background: var(--photo); }
.nt-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899px) {   /* 2 columns: N P / P N / N P / P N */
  .nums > li:nth-child(3) { order: 4; } .nums > li:nth-child(4) { order: 3; }
  .nums > li:nth-child(5) { order: 6; } .nums > li:nth-child(6) { order: 5; }
  .nums > li:nth-child(n+7) { order: 7; }
}
@media (min-width: 900px) { .nums { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.mf { margin-top: 28px; }
/* tighter section: about half the usual padding */

.mf-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px) { .mf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .mf-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.mf-grid > li { min-width: 0; display: flex; align-items: center; justify-content: center; min-height: 88px; padding: 12px; }
.mf-cell img { display: block; max-height: 30px; max-width: min(128px, 100%); width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .74; mix-blend-mode: multiply; transition: filter .25s ease, opacity .25s ease; }
.mf-cell:hover img { filter: none; opacity: 1; }
.mf-cell img[src*="pvc"] { filter: grayscale(1) brightness(.45); }
.mf-cell img[src*="cvvc"], .mf-cell img[src*="animoca"] { max-height: 40px; }
.mf-cell img[src*="orbit"] { max-height: 32px; }
.mf-cell img[src*="alphaton"], .mf-cell img[src*="polymorphic"], .mf-cell img[src*="metawealth"] { max-height: 34px; max-width: min(136px, 100%); }
@media (max-width: 559px) { .mf-grid > li { min-height: 72px; } .mf-cell img { max-height: 26px; } }

/* ═════ 4 · #graph — heading, the graph as the hero (full width), three points in a row ═════ */
.graph-v2 > .h-row { margin-bottom: clamp(20px, 2vw, 28px); }
.graph-v2 .graph-card { margin: 0; min-width: 0; }
.graph-v2 .pg-panel { border-radius: var(--r-xl); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); }
.graph-v2 .pg-stage { max-width: none; margin: 12px 16px; }
.graph-v2 .pg-stage.is-xwide { max-width: none; aspect-ratio: 12 / 5; margin: 8px 16px; }
.pg-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 24px; padding: 14px 24px; border-top: 1px solid rgba(255, 255, 255, .18); }
.graph-v2 .pg-caption { flex: 1 1 420px; min-width: 0; min-height: 0; padding: 0; border: 0; }
.pg-hint { flex: none; margin: 0; font: 400 13px/1.4 var(--sans); color: var(--ice-3); }
@media (max-width: 719px) { .graph-v2 .pg-caption { flex-basis: 100%; min-height: 4.5em; } .pg-hint { flex: 1 1 100%; } .pg-bar { padding: 14px 18px; } }
.graph-v2 .graph-points { list-style: none; margin: clamp(28px, 3vw, 40px) 0 0; padding: 0; display: grid; gap: 0 32px; grid-template-columns: minmax(0, 1fr); counter-reset: none; }
@media (min-width: 800px) { .graph-v2 .graph-points { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.graph-v2 .graph-points li { position: static; min-width: 0; padding: 18px 0 20px; border-top: 1px solid rgba(255, 255, 255, .24); color: var(--ice-2); font-size: 15px; line-height: 1.55; }
.graph-v2 .graph-points li::before { content: none; }
.graph-v2 .graph-points b { display: block; font: 400 22px/1.25 var(--serif); letter-spacing: -.01em; color: var(--ice); margin-bottom: 6px; }

/* ═════ 5 · #network — dotted world map with chapter badges, as on the live vntr.vc map (assets/chapter-map.js) ═════
   A pin is a 0×0 anchor on the exact point. Badge = royal pill, white Poppins text, white dot inside; the dot sits on the
   point (.d-l "London ●" grows left, .d-r "● Berlin" grows right). Tight spots fall back to a small royal dot (.d-d). */
#network .net-count { font-weight: 500; color: var(--ice); }
.cm { position: relative; min-width: 0; }
.cm-map { position: relative; }
.cm-img { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; }
.cm-pin { position: absolute; width: 0; height: 0; z-index: 1; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.cm-pin:hover, .cm-pin:focus-visible { z-index: 3; outline: none; }
.cm-pt { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--royal); box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(29, 29, 27, .2); transition: transform .2s ease, background .2s ease; }
.cm-b { position: absolute; left: 0; top: 0; display: none; align-items: center; gap: 7px; padding: 6px 12px 6px 8px; border-radius: var(--r-pill); background: var(--royal); color: #fff; font: 500 13px/1 var(--sans); white-space: nowrap; box-shadow: 0 4px 14px rgba(29, 29, 27, .14); transform: translate(-11px, -50%); transition: background .2s ease; }
.cm-b > i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.cm-pin:hover .cm-b, .cm-pin:focus-visible .cm-b { background: var(--navy); }
.cm-pin:hover .cm-pt, .cm-pin:focus-visible .cm-pt { background: var(--navy); transform: scale(1.3); }
.cm-pin:focus-visible .cm-b, .cm-pin:focus-visible .cm-pt { outline: 2px solid var(--royal); outline-offset: 2px; }
/* badge geometry per tier: ≥1200 uses .d-*, 900–1199 uses .t-*, <900 uses .m-* (chapter-map.js) */
@media (min-width: 1200px) {
  .cm-pin.d-l .cm-b, .cm-pin.d-r .cm-b, .cm-pin.d-t .cm-b { display: inline-flex; }
  .cm-pin.d-l .cm-pt, .cm-pin.d-r .cm-pt { display: none; }
  .cm-pin.d-l .cm-b { flex-direction: row-reverse; padding: 6px 8px 6px 12px; transform: translate(calc(-100% + 11px), -50%); }
  .cm-pin.d-t .cm-b { padding: 6px 12px; transform: translate(-50%, calc(-100% - 9px)); }
  .cm-pin.d-t .cm-b > i { display: none; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .cm-pin:not([class*=" t-"]) { display: none; }
  .cm-b { gap: 6px; padding: 5px 10px 5px 7px; font-size: 12px; transform: translate(-10px, -50%); }
  .cm-pin.t-l .cm-b, .cm-pin.t-r .cm-b, .cm-pin.t-t .cm-b { display: inline-flex; }
  .cm-pin.t-l .cm-pt, .cm-pin.t-r .cm-pt { display: none; }
  .cm-pin.t-l .cm-b { flex-direction: row-reverse; padding: 5px 7px 5px 10px; transform: translate(calc(-100% + 10px), -50%); }
  .cm-pin.t-t .cm-b { padding: 5px 10px; transform: translate(-50%, calc(-100% - 8px)); }
  .cm-pin.t-t .cm-b > i { display: none; }
  .cm-pt { left: -4px; top: -4px; width: 8px; height: 8px; }
}
/* small screens: fewer pins, smaller badges */
@media (max-width: 899px) {
  .cm-pin:not([class*=" m-"]) { display: none; }
  .cm-pin.m-l .cm-b, .cm-pin.m-r .cm-b { display: inline-flex; }
  .cm-pin.m-l .cm-pt, .cm-pin.m-r .cm-pt { display: none; }
  .cm-b { gap: 4px; padding: 4px 8px 4px 5px; font-size: 10.5px; transform: translate(-7.5px, -50%); }
  .cm-b > i { width: 5px; height: 5px; }
  .cm-pin.m-l .cm-b { flex-direction: row-reverse; padding: 4px 5px 4px 8px; transform: translate(calc(-100% + 7.5px), -50%); }
  .cm-pt { left: -4px; top: -4px; width: 8px; height: 8px; }
}
.cm-list { display: none; list-style: none; margin: 20px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter) 4px; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.cm-list::-webkit-scrollbar { display: none; }
.cm-list li { flex: none; }
.cm-list a { display: inline-flex; align-items: baseline; gap: 6px; min-height: 40px; padding: 10px 16px; border-radius: var(--r-pill); background: #fff; border: 1px solid rgba(29, 29, 27, .12); font: 400 14px/1.2 var(--sans); color: var(--ink); text-decoration: none; white-space: nowrap; }
.cm-list small { font-size: 12px; color: rgba(29, 29, 27, .56); }
.cm-list a:focus-visible { outline: 2px solid var(--royal); outline-offset: 2px; }
@media (max-width: 899px) { .cm-list { display: flex; } }
@media (prefers-reduced-motion: reduce) { .cm-pt, .cm-b { transition: none; } }

/* ═════ 6 · #os — audience badge, framed screenshots, roomier gap ═════ */
.os-badge { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; margin: 0 0 22px; border-radius: var(--r-pill); background: #fff; color: var(--royal); font: 500 13px/1 var(--sans); }
.os-blue .os-badge, .b-agent.tone-blue .os-badge { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.b-agent.tone-white .os-badge { background: var(--beige); }
/* the screen bleeds off the card as before; a hairline on the edges that stay inside the card keeps it from blending in */
.os-shot { border: 1px solid rgba(29, 29, 27, .12); border-right: 0; border-bottom: 0; }
@media (min-width: 1000px) { .os-card.reverse .os-shot { border-left: 0; border-right: 1px solid rgba(29, 29, 27, .12); } }
/* more air between the two OS cards (founder: ~48px desktop / 32px mobile) */
.os-rows { gap: 32px; }
@media (min-width: 1000px) { .os-rows { gap: 48px; } }

/* ═════ 10 · #partners — community partners by tier: white cards, hairline, equal optical logo size ═════ */
.ptn-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .ptn-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ptn-grid > li { display: flex; min-width: 0; }
.ptn-head { align-items: center; margin-bottom: 24px; }
.ptn-card { flex: 1; display: flex; flex-direction: column; align-items: center; min-height: 168px; padding: 18px 22px 14px; background: #fff; color: var(--ink); border: 1px solid rgba(29, 29, 27, .12); border-radius: var(--r-lg); text-decoration: none; transition: border-color .2s ease, box-shadow .25s ease, transform .25s ease; }
.ptn-card:hover { border-color: rgba(29, 29, 27, .2); box-shadow: var(--shadow-card); transform: translateY(-2px); }
.ptn-card:focus-visible { outline: 2px solid var(--royal); outline-offset: 3px; }
.ptn-tier { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px 0 10px; border-radius: var(--r-pill); background: var(--beige); font: 500 13px/1 var(--sans); color: var(--ink); }
.ptn-medal { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(29, 29, 27, .14); }
.ptn-medal.gold { background: #C9A43A; }
.ptn-medal.silver { background: #C9C9C9; }
.ptn-medal.bronze { background: #E8B87E; }
.ptn-logo { flex: 1; align-self: stretch; display: flex; align-items: center; justify-content: center; min-height: 96px; padding: 6px 0 2px; }
.ptn-logo img { display: block; width: auto; max-width: 80%; object-fit: contain; }
.ptn-logo img[src*="stellar"] { height: 34px; }
.ptn-logo img[src*="coinspaid"] { height: 36px; }
.ptn-logo img[src*="london-tech-week"] { height: 68px; max-width: none; }   /* square badge inside a 2:1 canvas → optically equal to the wordmarks */
@media (max-width: 719px) { .ptn-card { min-height: 0; } .ptn-logo { min-height: 96px; } }
@media (prefers-reduced-motion: reduce) { .ptn-card { transition: none; } }

/* ═════ 12 · #join — testimonial: name in Taviraj, role + quote in Poppins; compact so the face stays clear ═════ */
.join-quote { max-width: 400px; padding: 18px 20px 20px; }
.join-quote footer.jq-who { display: flex; flex-direction: column; gap: 2px; margin: 0 0 10px; font: inherit; letter-spacing: 0; text-transform: none; color: inherit; }
.jq-who cite { font: 400 20px/1.15 var(--serif); font-style: normal; letter-spacing: -.01em; color: var(--ink); }
.jq-who span { font: 400 13px/1.4 var(--sans); color: rgba(29, 29, 27, .6); }
.join-quote p { font: 400 14px/1.55 var(--sans); letter-spacing: 0; color: var(--ink); }
@media (max-width: 1199px) { .graph-v2 .pg-caption { flex-basis: 100%; white-space: normal; min-height: 3em; } }

/* ═════ 11 · #press — shares the white tone of #partners (no blue band, no morph flash); tiles read by hairline + soft shadow ═════ */
.press-tile { border: 1px solid rgba(29, 29, 27, .1); box-shadow: 0 1px 2px rgba(29, 29, 27, .04), 0 8px 24px rgba(29, 29, 27, .05); }
.press-tile:focus-visible { outline-color: var(--royal); }

/* press cards: same card as the community partners, logo only */
.press-card2 { justify-content: center; }
.press-card2 .ptn-logo img { height: 40px; max-width: 80%; filter: brightness(0); opacity: .82; transition: opacity .2s ease; }
.press-card2:hover .ptn-logo img { opacity: 1; }

/* ═════ motion (assets/home-motion.js) — only under html.mo-ready (set by JS, never under reduced motion) ═════ */
@media (prefers-reduced-motion: no-preference) {
  /* base reveal (.mo-r / .mo-in) lives in style.css — shared with the inner pages (assets/reveal.js) */
  /* numbers photos: zoom out inside the tile */
  /* numbers mosaic tiles (founder, 26.10): each tile rises 80px from .86 (no blur — founder, 26.10), 1.1s, 120ms per diagonal step;
     the figure and label inside follow 250ms later with a short rise; photos settle from a 1.15 zoom. Figures never count. */
  .mo-ready #numbers .nums > li.mo-tile { opacity: 0; translate: 0 80px; scale: .86;
    transition: opacity 1.1s var(--mo-ease), translate 1.1s var(--mo-ease), scale 1.1s var(--mo-ease);
    transition-delay: calc(var(--i, 0) * 120ms); }
  .mo-ready #numbers .nums > li.mo-tile.mo-in { opacity: 1; translate: none; scale: none; }
  .mo-ready #numbers .nums > li.nt.mo-tile > * { opacity: 0; translate: 0 18px;
    transition: opacity .8s var(--mo-ease), translate .8s var(--mo-ease); transition-delay: calc(var(--i, 0) * 120ms + 250ms); }
  .mo-ready #numbers .nums > li.nt.mo-tile > span { transition-delay: calc(var(--i, 0) * 120ms + 330ms); }
  .mo-ready #numbers .nums > li.nt.mo-tile.mo-in > * { opacity: 1; translate: none; }
  .mo-ready #numbers .nums > li.mo-zoom img { scale: 1.15; transition: scale 1.8s var(--mo-ease); transition-delay: calc(var(--i, 0) * 120ms); }
  .mo-ready #numbers .nums > li.mo-zoom.mo-in img { scale: 1; }
  .mo-ready .mo-zoom img { scale: 1.08; transition: scale 1.6s var(--mo-ease); transition-delay: calc(var(--i, 0) * 80ms); }
  .mo-ready .mo-zoom.mo-in img { scale: 1; }
  /* map: land fades (no rise); pins pop from their exact point with a small overshoot */
  .mo-ready .cm-img.mo-r { translate: none; scale: none; filter: none; transition: opacity 1.2s ease; }
  .mo-ready .cm-pin.mo-r { translate: none; scale: 0; filter: none; transition: opacity .25s ease, scale .55s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(var(--i, 0) * 70ms); }
  .mo-ready .cm-pin.mo-r.mo-in { scale: 1; }
  /* architecture: connector lines draw down to the VNTR OS bar once the cards have landed, then the dots pop */
  .mo-ready .arch-v2 .tops > a::after { transform: scaleY(0); transform-origin: top; transition: transform .6s var(--mo-ease); }
  .mo-ready .arch-v2 .tops > a > h3::after { opacity: 0; scale: 0; transition: opacity .3s ease .5s, scale .4s cubic-bezier(.34, 1.56, .64, 1) .5s; }
  .mo-ready .arch-v2.mo-lines .tops > a::after { transform: none; }
  .mo-ready .arch-v2.mo-lines .tops > a > h3::after { opacity: 1; scale: 1; }
  .mo-ready .arch-v2 .tops > a:nth-child(2)::after { transition-delay: .1s; } .mo-ready .arch-v2 .tops > a:nth-child(3)::after { transition-delay: .2s; }

  /* big cards: scroll-linked rise — 40px + scale .9 → 1, corner radius 56px → own */
  @supports (animation-timeline: view()) {
    .mo-css .mo-rise { animation: mo-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
  }
  .mo-js .mo-rise { transform: translateY(calc((1 - var(--mo, 1)) * 40px)) scale(calc(.9 + .1 * var(--mo, 1))); will-change: transform; }

  /* hover lift on homepage cards */
  .ptn-card:hover, [data-section="home"] .ev-card:hover, .svc-card:hover, .arch-v2 .tops > a:hover, .b-arch .b3 > a.blk:hover { transform: translateY(-4px); }
}
@keyframes mo-rise { from { transform: translateY(40px) scale(.9); border-radius: 56px; } to { transform: none; } }
.nums b { font-variant-numeric: tabular-nums lining-nums; }

/* ═════ 6 · #os — "ask your agent" bar typing queries over the investor screenshot (home-motion.js; Awesomic-style prompt) ═════ */
.os-ask { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 20px; max-width: 520px; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; background: #fff; border: 1px solid rgba(29, 29, 27, .12); border-radius: var(--r-pill); box-shadow: 0 10px 30px rgba(29, 29, 27, .14); color: var(--ink); }
.os-ask-ico { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--royal); box-shadow: 0 0 0 4px rgba(55, 100, 221, .18); }
.os-ask-txt { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; font: 400 15px/1.4 var(--sans); }
.os-ask-txt.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -.18em; background: var(--royal); animation: os-caret 1s steps(1) infinite; }
@keyframes os-caret { 50% { opacity: 0; } }
.os-ask-go { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--royal); }
.os-ask-go svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 1000px) { .os-card .os-ask { left: 28px; bottom: 28px; } }
@media (max-width: 479px) { .os-ask-txt { font-size: 13px; } }

/* OS cards (home + product.html): the screenshot is cut by the card edge — a 1px frame on the card itself keeps that
   cut visible on white and beige; the card's radius, drawn over the screenshot */
.os-card::after, .b-agent::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(29, 29, 27, .12); pointer-events: none; }

/* first screen is white (founder, 24.10): the page behind the transparent header matches the white hero */
body:has(> main #hero.tone-white), body:has(#hero.tone-white) { background: #fff; }

/* anchors land below the sticky header (compact pill ≈ 72px on desktop, 79px bar on mobile) */
[data-section="home"] section[id], [data-section="home"] [id].pm-sub { scroll-margin-top: 96px; }
/* reveal that only fades — for elements inside sticky/pinned layouts */
@media (prefers-reduced-motion: no-preference) { .mo-ready .mo-r.mo-opacity { translate: none; scale: none; filter: none; } }
/* the photos' own dark edges (stage floors) melt into the dark section and make equal tiles look uneven: a hairline
   keeps every tile's edge visible (founder, 27.10) */
#summit .summit-photos img { outline: 1px solid rgba(255, 255, 255, .16); outline-offset: -1px; }

/* phones: when the heading row stacks, its action sits close under the heading and the content keeps more air
   below the action (founder, 27.10: heading → button < button → list) */
@media (max-width: 719px) {
  .h-row:has(> .h-act) { row-gap: 16px; margin-bottom: 32px; }
  .h-row:has(> .h-act) .h-txt > :last-child { margin-bottom: 0; }
}

/* ═════ founder's batch, 28.10 ═════ */
/* section subs: about two lines at desktop widths instead of three narrow ones (site-wide) */
@media (min-width: 1100px) { html body section .h-row .h-txt .sub { max-width: 60em; } }   /* specific enough to beat the page-level .sub widths (pc 36em, sv 40em) */
/* subs the founder wants on one line on desktop */
@media (min-width: 1200px) {
  .sv #why .h-txt .sub, .pv #startups .h-txt .sub, .pv2 #trust .h-txt .sub { max-width: none; white-space: nowrap; }   /* speak, partners, VNTR OS only */
  #syndicated .h-txt h2 { max-width: none; white-space: nowrap; }
}
/* numbered steps: the text sits centred on the number bubble (one or two lines), everywhere */
.join-steps li, .sv .join-card .join-steps li { align-items: center; }
.sv .join-card .join-steps b { margin-top: 0; }
/* homepage hero: capped height, so a tall window doesn't stretch the first screen */
@media (min-width: 900px) {
  .hl-e { min-height: 0; }
  .hl-e .hl-e-grid { height: min(calc(var(--hl-vh) - 2 * var(--hl-pad)), 680px); min-height: 600px; }
}

/* upcoming events from VNTR OS (assets/os-events.js): space for one row while they load; the chapter card's city events */
.ev-grid[aria-busy="true"] { min-height: 360px; }
.ch-events { margin: 20px 0; padding-top: 16px; border-top: 1px solid rgba(29, 29, 27, .1); }
.ch-events h3 { margin: 0 0 10px; font: 500 14px/1.3 var(--sans); }
.ch-events ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ch-events a { display: flex; gap: 12px; font-size: 14px; color: var(--ink); text-decoration: none; }
.ch-events a:hover { color: var(--royal); }
.ch-events span { flex: none; min-width: 48px; color: var(--royal); font-weight: 500; }