/* vntr.vc — designed version. Daylight editorial with a living network (light recolour 23.10: white / beige / blue-1, no black surfaces).
   Design system: docs/DESIGN-vntr.md. Class vocabulary is shared with prototype/ (wireframe), restyled here.
   Wireframe annotations (.tag, .note, .proto-bar) are hidden unless the URL has ?notes=1 (html.show-notes). */

@import url('https://fonts.googleapis.com/css2?family=Taviraj:ital,wght@0,300;0,400;1,300;1,400&family=Poppins:wght@300;400;500;600&display=swap');

/* VNTR palette — live vntr.vc (Webflow) variables + brand "tables & graphs" blues for data. No pure #000. */
:root {
  --beige: #F4EEE9;          /* --colors--beg: most section backgrounds */
  --white: #FFFFFF;          /* the other section background */
  --royal: #3764DD;          /* --colors--blue-1: buttons, blue bands, accent text */
  --blue-2: #4D83E2;         /* --colors--blue-2: secondary blue */
  --ink: #1D1D1B;            /* --colors--black: text (soft black), rarely a background */
  /* Tables & graphs (data only) */
  --sky: #5CB2FF;
  --ice-blue: #9CD9FF;
  --navy: #1D4AAA;

  /* Surface roles. "night"/"ice" are legacy names from the dark draft: they are re-scoped per surface below
     (light surfaces → ink on white/beige; blue bands → white on blue-1). Default = light. */
  --night: var(--white);     /* surface fill of a themed section */
  --night-2: var(--white);   /* panel inside a themed section */
  --night-3: var(--beige);   /* hover inside a panel */
  --ice: var(--ink);         /* primary text on the surface */
  --ice-2: rgba(29, 29, 27, .68);
  --ice-3: rgba(29, 29, 27, .5);
  --line-night: rgba(29, 29, 27, .12);
  --line-night-2: rgba(29, 29, 27, .24);

  --cream: var(--beige);
  --paper: var(--beige);
  --card: var(--white);
  --black: var(--ink);       /* legacy alias — never #000 */
  --mute: rgba(29, 29, 27, .64);
  --line: rgba(29, 29, 27, .12);
  --photo: rgba(55, 100, 221, .10);  /* placeholder photo: light blue-1 tint until real photos arrive */

  --blue: var(--royal);
  --blue-deep: var(--navy);
  --bright: var(--blue-2);
  --gold: var(--royal);
  --note: #c2410c;           /* annotations only (?notes=1), not part of the design */

  /* Type — brand kit: Taviraj (titles), Poppins (body, UI, labels) */
  --serif: 'Taviraj', 'Times New Roman', Georgia, serif;
  --sans: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: var(--sans);       /* micro-labels: Poppins 500, uppercase, tracking .16em */

  --t-display: clamp(44px, 7.2vw, 104px);
  --t-h2: clamp(34px, 4.6vw, 64px);
  --t-h3: clamp(22px, 2vw, 28px);
  --t-num: clamp(56px, 12vw, 104px); /* 1–2 columns */
  --t-lead: clamp(17px, 1.5vw, 20px);
  --t-body: 16px;
  --t-small: 14px;
  --t-label: 11px;

  /* Space */
  /* ONE shared page container (header, .wrap, hero, bento blocks, footer): content box = min(--page-max, viewport − 2 × --page-gutter).
     Logo left edge and the "Join VNTR" right edge sit on these edges; the floating header bar extends --bar-pad beyond them. */
  --page-max: 1320px;
  --page-gutter: 16px;
  --bar-pad: 12px;
  --gutter: var(--page-gutter);
  --section: clamp(72px, 9vw, 136px);
  --gap: 24px;
  --maxw: calc(var(--page-max) + 2 * var(--page-gutter));

  /* Radius */
  --r-card: 6px;
  --r-frame: 10px;
  --r-panel: 16px;
  --r-pill: 999px;

  /* Legacy names used by inline styles in the pages */
  --bg: var(--cream);
  --accent: var(--royal);
  --soft: var(--paper);
}
@media (min-width: 720px) { :root { --page-gutter: 32px; --bar-pad: 20px; } }
@media (min-width: 1200px) { :root { --page-gutter: 40px; --bar-pad: 24px; } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font: 400 var(--t-body)/1.65 var(--sans); color: var(--ice); background: var(--cream); overflow-x: hidden; -webkit-font-smoothing: antialiased; font-feature-settings: "lnum", "tnum"; }
img { max-width: 100%; }
a { color: inherit; }
::selection { background: var(--blue); color: #fff; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* ——— annotations: hidden by default, ?notes=1 shows them ——— */
.tag, .note, .proto-bar { display: none !important; }
html.show-notes .tag { display: block !important; position: absolute; top: 12px; left: var(--gutter); font: 11px/1 var(--mono); color: var(--note); background: #fff7ed; border: 1px solid #fed7aa; padding: 4px 6px; border-radius: 4px; z-index: 5; }
html.show-notes .note { display: inline !important; font: 11px/1.4 var(--mono); color: var(--note); background: #fff7ed; padding: 1px 4px; border-radius: 3px; }
html.show-notes p.note, html.show-notes div.note { display: block !important; margin-top: 8px; }
html.show-notes .proto-bar { display: block !important; background: #fff7ed; color: var(--note); font: 11px var(--mono); text-align: center; padding: 6px; }

/* ——— type ——— */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 300; color: inherit; }
h1 { font-size: var(--t-display); line-height: .98; letter-spacing: -.035em; margin: 0 0 28px; max-width: 14em; }
h2 { font-size: var(--t-h2); line-height: 1.04; letter-spacing: -.028em; margin: 0 0 20px; max-width: 16em; }
h3 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -.012em; margin: 0 0 8px; font-weight: 400; }
h1 em, h2 em { font-style: italic; }
.accent { color: var(--sky); }
.sub { font-size: var(--t-lead); line-height: 1.55; font-weight: 300; color: var(--mute); max-width: 40em; margin: 0 0 36px; }
.eyebrow { font: 500 var(--t-label)/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); margin: 0 0 22px; display: flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dot); flex: none; }
.who { font: 500 var(--t-label)/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin: 0 0 12px; }
.disc { font-size: 13px; color: var(--mute); margin-top: 18px; max-width: 52em; }
.center { text-align: center; } .center .sub, .center h2 { margin-left: auto; margin-right: auto; }
.prose { max-width: 760px; }
.prose p, .prose li { font-size: 17px; }
.prose h2 { font-size: clamp(26px, 3vw, 36px); margin-top: 48px; }
.prose ul { padding-left: 20px; } .prose li { margin-bottom: 6px; }

/* ——— sections ——— */
section { position: relative; padding: var(--section) 0; border-bottom: 1px solid var(--line); scroll-margin-top: 80px; }
section.tight { padding: calc(var(--section) * .5) 0; }

/* Night sections (hero, product, Summit, closing) */
.night, .hero-deck, .summit-band, .closing-band { background: var(--night); color: var(--ice); border-bottom: 1px solid var(--line-night); }
.night .sub, .hero-deck .sub, .summit-band .sub, .closing-band .sub { color: var(--ice-2); }
.night .eyebrow, .hero-deck .eyebrow, .summit-band .eyebrow, .closing-band .eyebrow,
.night .who, .summit-band .who { color: var(--ice-2); }
.night .disc, .hero-deck .disc, .summit-band .disc, .closing-band .disc { color: var(--ice-3); }
.night .accent, .hero-deck .accent, .closing-band .accent { color: var(--sky); }

/* Blue band (deck slides 6, 9): solid VNTR blue, no gradient */

/* ——— buttons & links ——— */
.btns { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.link { color: var(--ice); text-decoration: none; font-weight: 500; border-bottom: 1px solid currentColor; padding-bottom: 1px; transition: color .2s; }
.link:hover { color: var(--blue); }
.night .link, .hero-deck .link, .summit-band .link, .closing-band .link, .agent-panel .link { color: var(--sky); }
.night .link:hover, .summit-band .link:hover { color: var(--ice); }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }

/* ——— grids ——— */
.grid { display: grid; gap: var(--gap); }
.g2, .g3, .g4 { grid-template-columns: 1fr; }
@media (min-width: 720px) { .g2 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(2, 1fr); } .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); } }
.split { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1.15fr .85fr; gap: 64px; } }

/* ——— cards ——— */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 28px; display: flex; flex-direction: column; text-decoration: none; color: var(--ice); transition: border-color .2s; }
a.card:hover { border-color: var(--ice); }
.card p { margin: 6px 0 0; color: var(--mute); font-size: 15px; }
.card ul { margin: 12px 0 0; padding-left: 18px; color: var(--mute); font-size: 15px; }
.card .cta { margin-top: auto; padding-top: 20px; }
.card h3 { font-size: 24px; }
.night .card, .summit-band .card { background: var(--night-2); border-color: var(--line-night); color: var(--ice); }
.night .card p, .night .card ul { color: var(--ice-2); }
.door-card .facts { list-style: none; padding: 0; margin: 16px 0 0; font: 12px/1.6 var(--mono); letter-spacing: .06em; color: var(--mute); }
.badge { display: inline-block; font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 10px; color: var(--mute); background: transparent; font-style: normal; align-self: flex-start; }
.badge.hiring { color: var(--royal); border-color: var(--royal); }
.trust { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); padding: 18px 22px; margin-top: 24px; }

/* photo placeholder: warm, desaturated; label in mono */
.ph { background: var(--photo); border-radius: var(--r-card); min-height: 160px; display: flex; align-items: flex-end; padding: 14px; color: var(--mute); font: 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; position: relative; overflow: hidden; }
.ph::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 70% 30%, rgba(255,255,255,.25), transparent 60%); pointer-events: none; }
.night .ph, .summit-band .ph, .agent-panel .ph { background: var(--photo); color: var(--ice-3); }
img.photo, .person img { filter: none; } /* real photo colours, no warm/sepia grading */

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips a, .chips span, .chips button { border: 1px solid var(--line); background: transparent; border-radius: var(--r-pill); padding: 8px 16px; text-decoration: none; color: var(--ice); font-size: 14px; }
.chips a:hover { border-color: var(--ice); }
.chips .on { background: var(--ice); color: var(--night); border-color: var(--ice); }
.night .chips span, .night .chips a, .summit-band .chips span, .deck-blue-section .chips span { border-color: var(--line-night-2); color: var(--ice); }

/* steps */
.steps { display: grid; gap: 1px; grid-template-columns: 1fr; margin: 24px 0; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(4, 1fr); } .steps.s2 { grid-template-columns: repeat(2, 1fr); } .steps.s3 { grid-template-columns: repeat(3, 1fr); } }
.steps > div { background: var(--card); padding: 22px; font-size: 15px; }
.steps > div b { display: block; font: 500 var(--t-label) var(--mono); letter-spacing: .16em; color: var(--blue); margin-bottom: 10px; }

/* forms */
.form { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 28px; }
.form .f { border: 0; border-bottom: 1px solid var(--line); padding: 14px 2px; color: var(--mute); font-size: 15px; margin: 0 0 6px; }
.form .f.area { height: 96px; }
.form .btn { margin-top: 16px; }
.faq > div { border-top: 1px solid var(--line); padding: 22px 0; } .faq b { display: block; font: 400 21px/1.3 var(--serif); margin-bottom: 6px; } .faq span { color: var(--mute); }

/* logos */
.logo-wall .row { margin-top: 36px; }
.logo-wall .row > b { display: block; font: 500 var(--t-label) var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); margin-bottom: 14px; }
.logos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
@media (min-width: 720px) { .logos { grid-template-columns: repeat(4, 1fr); } }
.logos > * { background: var(--night); padding: 28px 16px; text-align: center; color: var(--ice); font: 500 15px/1.2 var(--sans); letter-spacing: -.01em; text-decoration: none; min-height: 84px; display: flex; align-items: center; justify-content: center; border-radius: 0; }
.logos > .ph { min-height: 84px; background: var(--paper); color: var(--mute); }
.logos > a:hover { color: var(--blue); }

/* stats (monumental numbers) */
.stats { display: flex; flex-wrap: wrap; gap: 28px 56px; margin-top: 40px; }
.stats b { display: block; font: 300 clamp(44px, 6vw, 80px)/1 var(--serif); letter-spacing: -.03em; }
.stats span { font: 500 var(--t-label) var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.night .stats span, .summit-band .stats span { color: var(--ice-2); }

/* ——— by the numbers band (AngelList manner) ——— */
.numbers { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
@media (min-width: 560px) { .numbers { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .numbers { grid-template-columns: repeat(4, 1fr); } }
.numbers > div { padding: 32px 18px 28px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 1000px) { .numbers > div { border-bottom: 0; border-right: 1px solid var(--line); padding: 40px 24px 8px; } .numbers > div:first-child { padding-left: 0; } .numbers > div:last-child { border-right: 0; } }
.numbers b { display: block; font: 300 var(--t-num)/.9 var(--serif); letter-spacing: -.05em; color: var(--ice); }
@media (min-width: 1000px) { .numbers b { font-size: min(6.4vw, 112px); } } /* 4 columns: 5,000+ must fit its column */
.numbers > div { min-width: 0; }
.numbers span { display: block; margin-top: 14px; font: 500 var(--t-label)/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); max-width: 18em; }

/* ——— events ——— */
.event { display: flex; gap: 18px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--line); }
.event .d { font: 500 13px var(--mono); letter-spacing: .08em; text-transform: uppercase; min-width: 72px; color: var(--blue); }
.event .t { flex: 1; font: 400 20px/1.3 var(--serif); }
.event .t small { display: block; font: 400 13px var(--sans); color: var(--mute); margin-top: 2px; }
.night .event { border-color: var(--line-night); } .night .event .d { color: var(--sky); } .night .event .t small { color: var(--ice-3); }

/* lists */
.list-row { display: flex; flex-direction: column; gap: 18px; padding: 24px 0; border-top: 1px solid var(--line); }
@media (min-width: 720px) { .list-row { flex-direction: row; align-items: flex-start; } }
.list-row .thumb { width: 100%; height: 160px; flex: none; }
@media (min-width: 720px) { .list-row .thumb { width: 220px; height: 132px; } }
.problem-list { list-style: none; margin: 16px 0 0; padding: 0; }
.problem-list li { padding: 14px 0 14px 22px; position: relative; border-top: 1px solid var(--line); }
.problem-list li::before { content: ""; position: absolute; left: 0; top: 24px; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.problem-list b { display: block; font-weight: 500; }
.person .photo { width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; border-radius: var(--r-card); margin-bottom: 16px; }
.person .ph.photo { min-height: 220px; }

/* chapters (chapters.js) */
.region { margin-bottom: 18px; }
.region b { display: block; font: 500 var(--t-label) var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-bottom: 8px; }
.region button, .region .chip-link { display: inline-block; font: 400 14px var(--sans); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 12px; margin: 0 6px 8px 0; background: transparent; color: var(--ice); text-decoration: none; cursor: pointer; transition: border-color .2s, background .2s; }
.region button:hover, .region .chip-link:hover { border-color: var(--ice); background: var(--card); }
.region small { color: var(--mute) !important; font-family: var(--mono); font-size: 11px; }

/* ——— header (always night) ——— */
.announcement-bar { background: var(--blue); color: #fff; font: 500 13px var(--sans); display: flex; gap: 14px; justify-content: center; align-items: center; padding: 9px 48px; position: relative; flex-wrap: wrap; text-align: center; }
.announcement-bar a { color: #fff; }
.announcement-bar .ann-x { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: #fff; font-size: 20px; cursor: pointer; }
.site-header { background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-night); position: sticky; top: 0; z-index: 40; color: var(--ice); }
.site-header .wrap { display: flex; align-items: center; gap: 20px; height: 68px; position: relative; max-width: 1320px; }
.logo { font: 600 26px/1 var(--sans); letter-spacing: -.055em; text-decoration: none; color: var(--ice); }
.site-footer .logo { color: var(--ice); }
.menu { display: flex; gap: 2px; flex: 1; list-style: none; margin: 0; padding: 0; }
.menu > li { position: relative; }
.menu > li > a, .menu > li > button { display: block; white-space: nowrap; padding: 24px 9px; font: 500 14px/1 var(--sans); background: none; border: 0; color: var(--ice-2); text-decoration: none; cursor: pointer; transition: color .2s; }
.menu > li > a:hover, .menu > li > button:hover, .menu > li.active > a, .menu > li.active > button { color: var(--ice); }
.menu > li.active > a::after, .menu > li.active > button::after { content: ""; display: block; height: 1px; background: var(--sky); margin-top: 6px; }
.menu > li.summit > a { padding-top: 17px; padding-bottom: 17px; }
.menu > li.summit .pill { display: inline-block; border: 1px solid var(--sky); color: var(--ice); border-radius: var(--r-pill); padding: 7px 13px; }
.menu > li.summit .pill small { color: var(--ice-3); margin-left: 6px; font: 400 12px var(--sans); }
.drop { position: absolute; top: 100%; left: 0; min-width: 300px; background: var(--night-2); border: 1px solid var(--line-night-2); border-radius: var(--r-frame); padding: 10px; display: none; }
.menu > li:hover .drop, .menu > li:focus-within .drop { display: block; }
.drop a { display: block; padding: 11px 12px; border-radius: 6px; text-decoration: none; color: var(--ice); }
.drop a:hover { background: var(--night-3); }
.drop a b { display: block; font: 500 14px var(--sans); } .drop a span { display: block; font-size: 13px; color: var(--ice-3); margin-top: 2px; }
.drop h5 { margin: 8px 12px 6px; font: 500 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ice-3); }
.drop.two { min-width: 580px; left: auto; right: 0; }
.menu > li:hover .drop.two, .menu > li:focus-within .drop.two { display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px; }
.drop.two .col + .col { border-left: 1px solid var(--line-night); padding-left: 8px; }
.drop .badge.hiring { color: var(--sky); border-color: rgba(92, 178, 255, .5); margin-left: 6px; vertical-align: middle; }
.header-cta { display: flex; gap: 10px; align-items: center; }
.header-cta .btn { min-height: 38px; padding: 9px 18px; font-size: 14px; }
.header-cta .btn.login { border-color: var(--line-night-2); color: var(--ice); }
.header-cta .btn.login:hover { background: var(--ice); color: var(--night); }
.burger { display: none; border: 1px solid var(--line-night-2); background: transparent; color: var(--ice); border-radius: var(--r-pill); padding: 8px 16px; font: 500 14px var(--sans); cursor: pointer; margin-left: auto; }

@media (max-width: 1180px) {
  .burger { display: block; }
  .site-header .wrap { flex-wrap: wrap; height: auto; padding-top: 14px; padding-bottom: 14px; }
  .menu, .header-cta { display: none; flex: 0 0 100%; }
  .site-header.open .menu { display: flex; flex-direction: column; max-height: calc(100vh - 200px); overflow-y: auto; margin-top: 8px; }
  .site-header.open .header-cta { display: flex; flex-wrap: wrap; padding: 12px 0 4px; gap: 10px; }
  .header-cta .join { order: -1; flex: 0 0 100%; }
  .header-cta .login { flex: 1; }
  .menu > li { border-bottom: 1px solid var(--line-night); }
  .menu > li > a, .menu > li > button { padding: 16px 0; width: 100%; text-align: left; font-size: 16px; color: var(--ice); }
  .menu > li.active > a::after, .menu > li.active > button::after { display: none; }
  .menu > li.summit > a { padding: 12px 0; }
  .drop, .menu > li:hover .drop, .menu > li:focus-within .drop,
  .menu > li:hover .drop.two, .menu > li:focus-within .drop.two { display: none; position: static; border: 0; background: transparent; padding: 0 0 12px; min-width: 0; width: auto; }
  .menu > li.open .drop { display: block; }
  .menu > li.has-two .drop.two { display: block; }
  .menu > li.has-two:not(.open) .drop.two .col:first-child { display: none; }
  .drop.two .col + .col { border-left: 0; padding-left: 0; }
}

/* ——— footer (night) ——— */
.site-footer { background: var(--night); color: var(--ice-2); padding: 72px 0 40px; font-size: 14px; }
.site-footer .cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 16px; margin: 48px 0 32px; padding-top: 40px; border-top: 1px solid var(--line-night); }
@media (min-width: 900px) { .site-footer .cols { grid-template-columns: repeat(7, 1fr); } }
.site-footer h4 { margin: 0 0 14px; font: 500 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ice-3); }
.site-footer .cols a { display: block; color: var(--ice-2); padding: 3px 0; text-decoration: none; }
.site-footer .cols a:hover { color: var(--ice); }
.site-footer .disc { color: var(--ice-3); font-size: 12.5px; }
.site-footer .disc a { color: var(--ice-2); }
.foot-top { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.socials { margin-top: 16px; } .socials a { color: var(--ice-2); text-decoration: none; } .socials a:hover { color: var(--ice); }
.foot-news { max-width: 420px; width: 100%; }
.foot-news b { color: var(--ice); font: 400 22px var(--serif); }
.foot-form { display: flex; gap: 8px; margin-top: 8px; }
.foot-form .f { flex: 1; border: 1px solid var(--line-night-2); border-radius: var(--r-pill); padding: 11px 18px; color: var(--ice-3); }
.foot-form .btn { min-height: 44px; }

/* ——— disclaimer, closing band ——— */
.disclaimer { font-size: 12.5px; line-height: 1.6; color: var(--mute); border-top: 1px solid var(--line); padding: 14px 0 0; margin-top: 28px; max-width: 900px; }
.night .disclaimer, .deck-blue-section .disclaimer { color: var(--ice-3); border-color: var(--line-night); }
.closing-band { text-align: center; overflow: hidden; padding: calc(var(--section) * 1.1) 0; }
.closing-band h2 { margin-left: auto; margin-right: auto; max-width: 14em; }
.closing-band .btns { justify-content: center; }
.closing-band canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }
.closing-band .wrap { position: relative; z-index: 1; }

/* ——— modal ——— */
.modal-bg { position: fixed; inset: 0; background: rgba(29, 29, 27, .45); display: none; align-items: center; justify-content: center; z-index: 60; padding: 16px; }
.modal-bg.open { display: flex; }
.modal { background: var(--cream); border-radius: var(--r-panel); max-width: 540px; width: 100%; padding: 32px; position: relative; max-height: 90vh; overflow: auto; }
.modal .x { position: absolute; top: 14px; right: 16px; border: 0; background: none; font-size: 24px; cursor: pointer; color: var(--ice); }

/* ——— anchor nav ——— */
.anchor-nav { position: sticky; top: 68px; z-index: 30; background: rgba(244, 238, 233, .95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.anchor-nav .wrap { display: flex; gap: 6px; overflow-x: auto; white-space: nowrap; padding-top: 12px; padding-bottom: 12px; scrollbar-width: none; }
.anchor-nav a { font-size: 14px; text-decoration: none; color: var(--ice); padding: 7px 14px; border: 1px solid var(--line); border-radius: var(--r-pill); }
.anchor-nav a:hover { border-color: var(--ice); }

/* ——— wireframe frame (Atlantic): hairline + corner dots ——— */
.frame { position: relative; border: 1px solid var(--line-night-2); border-radius: var(--r-frame); padding: 10px; background: var(--night-2); }
.frame::before, .frame::after, .frame > .c3, .frame > .c4 { content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--sky); }
.frame::before { top: -3px; left: -3px; } .frame::after { top: -3px; right: -3px; }
.frame > .c3 { bottom: -3px; left: -3px; } .frame > .c4 { bottom: -3px; right: -3px; }
.frame-label { display: flex; justify-content: space-between; gap: 12px; font: 500 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ice-3); padding: 4px 4px 10px; }
/* product screenshot inside a frame, with graceful placeholder */
.shot { position: relative; border-radius: 6px; overflow: hidden; background: var(--beige); aspect-ratio: 16 / 10; }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.shot.missing img { display: none; }
.shot.missing::after { content: attr(data-label); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; font: 500 11px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ice-3);
  background: repeating-linear-gradient(0deg, transparent 0 23px, rgba(55,100,221,.07) 23px 24px), repeating-linear-gradient(90deg, transparent 0 23px, rgba(55,100,234,.05) 23px 24px); }

/* ——— HERO (night, full-bleed relationship graph) ——— */
.hero-deck { min-height: min(92vh, 900px); display: flex; align-items: center; padding: 120px 0 96px; overflow: hidden; }
.hero-deck .circles { display: none; }
.hero-deck canvas.graph { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-deck::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(244,238,233,.94) 0%, rgba(244,238,233,.7) 42%, rgba(244,238,233,0) 72%); pointer-events: none; }
.hero-deck .wrap { position: relative; z-index: 2; width: 100%; }
.hero-deck h1 { color: var(--ice); }
.hero-deck h1 em { color: var(--sky); }
.hero-deck .sub { max-width: 36em; }
@media (max-width: 719px) { .hero-meta .legend { display: none; } .hero-deck { min-height: 88vh; padding-top: 96px; } .hero-deck::after { background: linear-gradient(180deg, rgba(244,238,233,.4), rgba(244,238,233,.9) 55%); } }

/* ——— relationship graph explainer (interactive) ——— */
.graph-section { background: var(--night); color: var(--ice); }
.graph-layout { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 1000px) { .graph-layout { grid-template-columns: .8fr 1.2fr; gap: 64px; } }
.graph-points { list-style: none; margin: 28px 0 0; padding: 0; counter-reset: gp; }
.graph-points li { border-top: 1px solid var(--line-night); padding: 18px 0 18px 48px; position: relative; color: var(--ice-2); }
.graph-points li::before { counter-increment: gp; content: "0" counter(gp); position: absolute; left: 0; top: 20px; font: 500 11px var(--mono); letter-spacing: .14em; color: var(--sky); }
.graph-points b { display: block; color: var(--ice); font: 400 21px/1.3 var(--serif); margin-bottom: 4px; }
.graph-stage { position: relative; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: rgba(255,255,255,.06); }
@media (max-width: 719px) { .graph-stage { aspect-ratio: 1 / 1.05; } }
.graph-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: manipulation; }
.graph-readout { position: absolute; left: 12px; bottom: 12px; right: 12px; display: flex; flex-wrap: wrap; gap: 6px 18px; font: 500 10px/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ice-3); pointer-events: none; }
.graph-readout b { color: var(--ice); font-weight: 500; }
.graph-readout .w { color: var(--sky); }
.graph-hint { font: 500 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ice-3); margin-top: 12px; }

/* ——— architecture (deck slide 4): cream floors on a night foundation ——— */
.architecture { margin-top: 48px; }
.architecture .tops { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px) { .architecture .tops { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.architecture .tops a { position: relative; display: block; background: var(--paper, #fbf8f6); color: var(--ice); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 30px 30px 34px; text-decoration: none; transition: border-color .2s; }
.architecture .tops a:hover { border-color: var(--royal); }
.architecture .tops a::before { content: attr(data-n); display: block; font: 500 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--royal); margin-bottom: 22px; }
.architecture .tops h3 { font: 300 clamp(30px, 2.6vw, 38px)/1.05 var(--serif); letter-spacing: -.02em; margin: 0 0 12px; text-transform: capitalize; color: var(--ice); }
.architecture .tops p { margin: 0; color: var(--mute); font-size: 15px; line-height: 1.6; }
/* connectors: a hairline from each card down to the platform, ending in a dot */
@media (min-width: 900px) {
  .architecture .tops a { margin-bottom: 44px; }
  .architecture .tops a::after { content: ""; position: absolute; left: 50%; bottom: -45px; width: 1px; height: 44px; background: linear-gradient(var(--royal), var(--royal)) center / 1px 100% no-repeat; }
  .architecture .tops a > h3::after { content: ""; position: absolute; left: calc(50% - 3px); bottom: -48px; width: 7px; height: 7px; border-radius: 50%; background: var(--royal); }
}
.architecture .base { position: relative; display: grid; gap: 18px; margin-top: 16px; background: var(--royal); color: #fff; border-radius: var(--r-panel); padding: 32px; text-decoration: none; overflow: hidden; }
@media (min-width: 900px) { .architecture .base { margin-top: 0; grid-template-columns: auto 1fr auto; align-items: center; gap: 40px; padding: 36px 44px; } }
.architecture .base h3 { font: 500 34px/1 var(--sans); letter-spacing: -.03em; margin: 0; color: var(--ice); }
.architecture .base h3::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--royal); margin-right: 14px; vertical-align: middle; box-shadow: 0 0 0 4px rgba(55,100,221,.25); }
.architecture .base p { margin: 0; color: var(--ice-2); font-size: 16px; }
.architecture .base .layers { font: 500 11px/1.6 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sky); }
.architecture .base:hover h3::before { background: var(--sky); }

/* ——— three steps (deck slide 6) ——— */
.three-steps { display: grid; grid-template-columns: 1fr; gap: 1px; margin-top: 40px; background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.22); border-radius: var(--r-panel); overflow: hidden; }
@media (min-width: 900px) { .three-steps { grid-template-columns: repeat(3, 1fr); } }
.three-steps > div { background: var(--royal); padding: 36px 28px 40px; }
.three-steps .dots { font-size: 14px; letter-spacing: 2px; color: #fff; margin-bottom: 40px; }
.three-steps h3 { font: 300 clamp(32px, 3.4vw, 44px)/1 var(--serif); margin-bottom: 14px; }
.three-steps p { margin: 0; color: rgba(255,255,255,.82); }
.flywheel { margin-top: 28px; font: 400 clamp(20px, 2vw, 26px)/1.3 var(--serif); }
.flywheel b { font-weight: 300; }
.flywheel ol { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 12px; font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.flywheel ol li + li::before { content: "→ "; opacity: .6; }
.flywheel.light { color: var(--ice); }

/* ——— agent panels (deck slides 7–8): night frames ——— */
.agent-pair { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
@media (min-width: 1000px) { .agent-pair { grid-template-columns: 1fr 1fr; } }
.agent-panel { position: relative; background: var(--night-2); color: var(--ice); border: 1px solid var(--line-night-2); border-radius: var(--r-panel); padding: 28px; }
.agent-panel::before, .agent-panel::after { content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--sky); top: -3px; }
.agent-panel::before { left: -3px; } .agent-panel::after { right: -3px; }
.agent-panel .eyebrow { color: var(--gold); } .agent-panel .eyebrow::before { background: var(--gold); box-shadow: none; }
.agent-panel h3 { font: 300 clamp(26px, 2.4vw, 34px)/1.12 var(--serif); color: var(--ice); margin: 0 0 14px; }
.agent-panel p { color: var(--ice-2); }
.agent-panel .shot { margin: 20px 0 6px; }
.agent-panel .steps4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; border-top: 1px solid var(--line-night); padding-top: 20px; margin-top: 20px; }
.agent-panel.wide .steps4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1000px) { .agent-panel.wide .steps4 { grid-template-columns: repeat(4, 1fr); } }
.agent-panel .steps4 i { display: block; font: 500 11px var(--mono); color: var(--gold); font-style: normal; letter-spacing: .1em; }
.agent-panel .steps4 b { display: block; font: 500 13px var(--mono); letter-spacing: .14em; text-transform: uppercase; margin: 8px 0 6px; color: var(--ice); }
.agent-panel .steps4 span { font-size: 14px; color: var(--ice-2); }
.agent-panel .funcs { display: grid; grid-template-columns: 1fr; border: 1px solid var(--line-night); border-radius: 8px; margin-top: 20px; overflow: hidden; }
@media (min-width: 560px) { .agent-panel .funcs { grid-template-columns: 1fr 1fr; } }
.agent-panel .funcs > div { padding: 16px; border-bottom: 1px solid var(--line-night); }
.agent-panel .funcs b { display: block; font: 500 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ice); margin-bottom: 4px; }
.agent-panel .funcs span { font-size: 13px; color: var(--ice-3); }
.agent-panel .agent-card { background: rgba(92, 178, 255, .08); border: 1px solid rgba(92, 178, 255, .3); border-radius: 8px; padding: 16px; margin-top: 20px; }
.agent-panel .agent-card b { color: var(--gold); font-weight: 400; }
.agent-panel .lives, .agent-panel .perm { font: 500 10px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ice-3); margin: 16px 0 0; }
.agent-panel.wide { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 1000px) { .agent-panel.wide { grid-template-columns: 1.1fr .9fr; } }
.panel-tabs { display: none; gap: 8px; margin-top: 28px; }
.panel-tabs button { font: 500 14px var(--sans); border: 1px solid var(--line-night-2); color: var(--ice-2); border-radius: var(--r-pill); padding: 8px 16px; background: transparent; cursor: pointer; }
.panel-tabs button.on { background: var(--ice); color: var(--night); border-color: var(--ice); }
@media (max-width: 999px) { .panel-tabs { display: flex; } .agent-pair .agent-panel:not(.active) { display: none; } }

/* ——— service cards (deck slide 9) ——— */
.service-grid { display: grid; grid-template-columns: 1fr; gap: 1px; margin-top: 40px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; }
@media (min-width: 800px) { .service-grid { grid-template-columns: 1fr 1fr; } }
.service-card { background: var(--card); color: var(--ice); padding: 36px 32px; text-decoration: none; display: block; transition: background .2s; counter-increment: svc; }
.service-grid { counter-reset: svc; }
.service-card::before { content: "0" counter(svc); display: block; font: 500 11px var(--mono); letter-spacing: .14em; color: var(--blue); margin-bottom: 28px; }
.service-card:hover { background: #fff; }
.service-card h3 { font: 300 clamp(26px, 2.6vw, 34px)/1.1 var(--serif); margin: 0 0 10px; }
.service-card p { margin: 0; color: var(--mute); }
.service-card .link { display: inline-block; margin-top: 18px; }
.powered { font: 500 11px/1.8 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-top: 22px; }

/* ——— Summit band (night, photo grid) ——— */
.summit-band .grid .ph { min-height: 220px; }
.summit-band .stats { border-top: 1px solid var(--line-night); padding-top: 32px; }

/* ——— stat mosaic (deck slide 5; flat brand tiles) ——— */
.stat-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 36px; }
@media (min-width: 900px) { .stat-mosaic { grid-template-columns: 1fr 1fr 1.5fr; } }
.stat-mosaic > * { border-radius: var(--r-panel); padding: 24px; color: #fff; min-height: 160px; }
.stat-mosaic b { display: block; font: 300 clamp(44px, 5vw, 64px)/1 var(--serif); letter-spacing: -.03em; margin-bottom: 8px; }
.stat-mosaic .t-events { background: var(--blue); }
.stat-mosaic .t-photo { padding: 14px; color: var(--mute); }
.stat-mosaic .t-chapters { grid-column: 1 / 3; background: var(--sky); color: var(--night); display: flex; align-items: center; }
.stat-mosaic .t-investors { grid-column: 1 / 3; background: var(--night); }
@media (min-width: 900px) { .stat-mosaic .t-investors { grid-column: 3; grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: flex-end; } .stat-mosaic .t-investors b { font-size: clamp(64px, 7vw, 104px); margin-bottom: auto; } }
.stat-mosaic.compact > * { min-height: 110px; padding: 18px; } .stat-mosaic.compact b { font-size: 40px; }

/* misc legacy */
.timeline .card b { font: 500 11px var(--mono) !important; letter-spacing: .14em; color: var(--blue) !important; }
.timeline .card.now { border-color: var(--blue) !important; }
.segment .pain { font: 300 var(--t-lead)/1.5 var(--sans); color: var(--mute); }
p[style*="Georgia"] { font-family: var(--serif) !important; font-weight: 300 !important; font-size: clamp(20px, 2vw, 26px) !important; line-height: 1.4 !important; letter-spacing: -.01em; }
.card > p[style*="Georgia"] + p { font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; }

/* quote block (editorial) */
.quote { font: 300 clamp(24px, 3vw, 40px)/1.25 var(--serif); letter-spacing: -.015em; margin: 0; max-width: 22em; }
.quote-by { margin-top: 20px; font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* screenshot rows (product.html) */
.shots { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 32px; }
@media (min-width: 900px) { .shots { grid-template-columns: 1.4fr 1fr 1fr; } .shots.two { grid-template-columns: 1fr 1fr; } }

/* page heroes on inner pages: night with a quiet ambient graph (added by class .page-hero) */
.page-hero { background: var(--night); color: var(--ice); overflow: hidden; padding: clamp(96px, 12vw, 168px) 0 clamp(72px, 9vw, 120px); border-bottom: 1px solid var(--line-night); }
.page-hero canvas.graph { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }
.page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(244,238,233,.95) 0%, rgba(244,238,233,.72) 50%, rgba(244,238,233,.15) 100%); pointer-events: none; }
.page-hero .wrap { position: relative; z-index: 2; }
.deck-blue-section.tight h2 { max-width: 22em; margin: 0; }

.showcase { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; margin-top: 72px; }
@media (min-width: 1000px) { .showcase { grid-template-columns: 5fr 7fr; gap: 72px; } .showcase.reverse { grid-template-columns: 7fr 5fr; } .showcase.reverse .sc-text { order: 2; } }
.sc-text h3 { font: 300 clamp(30px, 3vw, 44px)/1.08 var(--serif); letter-spacing: -.02em; color: var(--ice); margin: 0 0 16px; }
.sc-text > p:not(.eyebrow) { color: var(--ice-2); font-size: 16px; line-height: 1.6; margin: 0 0 24px; max-width: 34em; }
.sc-list { list-style: none; margin: 0 0 28px; padding: 0; border-top: 1px solid var(--line-night); }
.sc-list li { display: grid; grid-template-columns: 36px 110px 1fr; gap: 12px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line-night); }
.sc-list i { font: 500 11px var(--mono); font-style: normal; letter-spacing: .12em; color: var(--sky); }
.sc-list b { font: 500 15px var(--sans); color: var(--ice); }
.sc-list span { font-size: 14px; color: var(--ice-2); }
@media (max-width: 480px) { .sc-list li { grid-template-columns: 32px 1fr; } .sc-list span { grid-column: 2; } }


/* header: white, ink text, blue-1 Join pill */
.site-header { --night: var(--white); color: var(--ice); border-bottom-color: var(--line); }
.logo { color: var(--ice); }
.site-footer .logo { color: #fff; }
.menu > li > a, .menu > li > button { color: rgba(29, 29, 27, .72); }
.menu > li > a:hover, .menu > li > button:hover, .menu > li.active > a, .menu > li.active > button { color: var(--ice); }
.menu > li.active > a::after, .menu > li.active > button::after { background: var(--royal); }
.menu > li.summit .pill { border-color: var(--royal); color: var(--royal); }
.menu > li.summit .pill small { color: var(--mute); }
.drop { background: var(--white); border-color: var(--line); }
.drop a { color: var(--ice); } .drop a:hover { background: var(--beige); } .drop a span { color: var(--mute); }
.drop h5 { color: var(--mute); }
.drop .badge.hiring { color: var(--royal); border-color: rgba(55,100,221,.45); }
.header-cta .btn.login { border-color: rgba(29,29,27,.3); color: var(--ice); }
.burger { border-color: rgba(29,29,27,.3); color: var(--ice); }
@media (max-width: 1180px) { .menu > li > a, .menu > li > button { color: var(--ice); } .menu > li { border-bottom-color: var(--line); } }

/* frames & panels on light: hairline ink 12%, blue corner dots */
.frame::before, .frame::after, .frame > .c3, .frame > .c4, .agent-panel::before, .agent-panel::after { background: var(--royal); }
.agent-panel { border-color: var(--line); }
.agent-panel .agent-card { background: rgba(55,100,221,.06); border-color: rgba(55,100,221,.22); }
.agent-panel .agent-card b { color: var(--royal); }

/* architecture: base bar is blue-1 */
.architecture .tops a { background: var(--white); }

/* stat tiles (data colours) */
.stat-mosaic .t-investors, .page-hero .stat-mosaic .t-investors { background: var(--navy); color: #fff; }
.stat-mosaic .t-chapters { color: var(--ice); }
.stat-mosaic .t-events { color: #fff; }

/* footer: blue-1 band */
.site-footer .cols a { color: rgba(255,255,255,.86); } .site-footer .cols a:hover { color: #fff; }
.site-footer .disc a { color: #fff; }
.foot-form .f { color: rgba(255,255,255,.7); }

/* logos on white sections sit on white cells */

/* header nav: regular weight, ink colour, centred in the bar (founder, 23.10) */
.menu > li > a, .menu > li > button { font-weight: 400; color: var(--ice); }
.menu > li > a:hover, .menu > li > button:hover { color: var(--royal); }
@media (min-width: 1181px) {
  .menu { position: absolute; left: 50%; transform: translateX(-50%); flex: 0 0 auto; justify-content: center; }
  .header-cta { margin-left: auto; }
}

/* nav icons: thin chevron (rotates when open) and external arrow */
.nav-ico { width: 12px; height: 12px; margin-left: 5px; vertical-align: -1px; opacity: .55; transition: transform .2s ease, opacity .2s ease; }
.menu > li:hover .nav-ico, .menu > li:focus-within .nav-ico { opacity: 1; }
.menu > li:hover .nav-ico.chev, .menu > li:focus-within .nav-ico.chev, .menu > li.open .nav-ico.chev { transform: rotate(180deg); }
.menu > li:hover .nav-ico.ext { transform: translate(1px, -1px); }
@media (prefers-reduced-motion: reduce) { .nav-ico { transition: none; } }

/* ═══════════════ TONE SYSTEM (23.10) ═══════════════
   Every section carries exactly one tone class: .tone-beige · .tone-white · .tone-blue (cycle in document order),
   plus .tone-summit for the Summit stage (the only dark surface). A tone only sets variables; components read them.
   Scroll morph (html.morph, set by layout.js when JS is on and motion is allowed): sections turn transparent and
   <body> takes the tone of the section crossing the viewport's centre line; registered colour properties
   (@property) make background, text and hairlines glide over ~700ms. Without JS / with reduced motion each
   section paints its own solid tone. */

@property --night  { syntax: '<color>'; inherits: true; initial-value: #F4EEE9; }
@property --ice    { syntax: '<color>'; inherits: true; initial-value: #1D1D1B; }
@property --ice-2  { syntax: '<color>'; inherits: true; initial-value: rgba(29,29,27,.68); }
@property --ice-3  { syntax: '<color>'; inherits: true; initial-value: rgba(29,29,27,.5); }
@property --mute   { syntax: '<color>'; inherits: true; initial-value: rgba(29,29,27,.64); }
@property --line   { syntax: '<color>'; inherits: true; initial-value: rgba(29,29,27,.12); }
@property --line-night { syntax: '<color>'; inherits: true; initial-value: rgba(29,29,27,.12); }
@property --sky    { syntax: '<color>'; inherits: true; initial-value: #3764DD; }

/* light role set — beige/white tones; also always-light components (cards, panels, frames, forms, header, modals) */
:root,
html:not(.morph) .tone-beige, html.morph body.tone-beige,
html:not(.morph) .tone-white, html.morph body.tone-white,
.card, .service-card, .agent-panel, .frame:not(.frame-graph), .form, .steps, .architecture .tops > a,
.site-header, .anchor-nav, .modal-bg, .ev-card {
  --night-2: var(--white); --night-3: var(--beige);
  --ice: var(--ink); --ice-2: rgba(29,29,27,.68); --ice-3: rgba(29,29,27,.5);
  --line: rgba(29,29,27,.12); --line-night: rgba(29,29,27,.12); --line-night-2: rgba(29,29,27,.28);
  --mute: rgba(29,29,27,.64); --photo: rgba(55,100,221,.10);
  --sky: var(--royal); --dot: var(--royal); --card: var(--white);
  --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;
}
:root, html:not(.morph) .tone-beige, html.morph body.tone-beige { --night: var(--beige); }
html:not(.morph) .tone-white, html.morph body.tone-white { --night: var(--white); }
:root, html:not(.morph) .tone-beige, html.morph body.tone-beige,
html:not(.morph) .tone-white, html.morph body.tone-white {
  --corner: var(--royal); --arch-base: var(--royal); --arch-base-hover: var(--navy); --arch-fg: #fff; --arch-fg-2: rgba(255,255,255,.86); --arch-accent: var(--ice-blue); --arch-dot: #fff;
}
.site-header, .anchor-nav, .modal-bg { --night: var(--white); }

/* blue role set — blue-1 bands and the footer */
html:not(.morph) .tone-blue, html.morph body.tone-blue, .site-footer {
  --night: var(--royal); --night-2: rgba(255,255,255,.08); --night-3: rgba(255,255,255,.14);
  --ice: #fff; --ice-2: rgba(255,255,255,.86); --ice-3: rgba(255,255,255,.68);
  --line: rgba(255,255,255,.24); --line-night: rgba(255,255,255,.24); --line-night-2: rgba(255,255,255,.5);
  --mute: rgba(255,255,255,.8); --photo: rgba(255,255,255,.14);
  --sky: var(--ice-blue); --dot: #fff; --card: var(--white); --corner: #fff;
  --btn-bg: #fff; --btn-fg: var(--royal); --btn-hover-bg: var(--beige); --btn-hover-fg: var(--navy);
  --btn2-line: rgba(255,255,255,.6); --btn2-hover-bg: #fff; --btn2-hover-fg: var(--royal);
  --arch-base: #fff; --arch-base-hover: var(--beige); --arch-fg: var(--ink); --arch-fg-2: rgba(29,29,27,.68); --arch-accent: var(--royal); --arch-dot: var(--royal);
}

/* summit role set — the one dark stage (summit.vntr.vc) */
.tone-summit {
  --night: #000; --night-2: rgba(255,255,255,.06); --night-3: rgba(255,255,255,.1);   /* Summit only: black stage, as on summit.vntr.vc */
  --ice: #fff; --ice-2: rgba(255,255,255,.84); --ice-3: rgba(255,255,255,.66);
  --line: rgba(255,255,255,.16); --line-night: rgba(255,255,255,.16); --line-night-2: rgba(255,255,255,.4);
  --mute: rgba(255,255,255,.8); --photo: rgba(255,255,255,.08);
  --sky: #5CB2FF; --dot: #5CB2FF; --card: var(--white); --corner: #5CB2FF;
  --btn-bg: var(--royal); --btn-fg: #fff; --btn-hover-bg: var(--blue-2); --btn-hover-fg: #fff;
  --btn2-line: rgba(255,255,255,.85); --btn2-hover-bg: #fff; --btn2-hover-fg: var(--ink);
}

/* surfaces */
html:not(.morph) section[class*="tone-"] { background: var(--night); color: var(--ice); }
html.morph body { background: var(--night); color: var(--ice);
  transition: --night .7s ease, --ice .7s ease, --ice-2 .7s ease, --ice-3 .7s ease, --mute .7s ease, --line .7s ease, --line-night .7s ease, --sky .7s ease; }
html.morph section[class*="tone-"] { background: transparent; color: inherit; }
section[class*="tone-"] { border-bottom: 0; }
.site-footer { background: var(--night); color: var(--ice-2); border-top: 1px solid rgba(255,255,255,.24); }

/* buttons — read the tone */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 12px 24px; border-radius: var(--r-pill); border: 1px solid var(--btn2-line); background: transparent; color: var(--ice); font: 500 15px/1 var(--sans); letter-spacing: .01em; text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s; white-space: nowrap; }
.btn:hover { background: var(--btn2-hover-bg); border-color: var(--btn2-hover-bg); color: var(--btn2-hover-fg); }
.btn.dark { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.btn.dark:hover { background: var(--btn-hover-bg); border-color: var(--btn-hover-bg); color: var(--btn-hover-fg); }
.header-cta .btn.login { border-color: rgba(29,29,27,.3); color: var(--ink); }

/* text accents */
section[class*="tone-"] .accent, section[class*="tone-"] h1 em, section[class*="tone-"] h2 em { color: var(--sky); }
section[class*="tone-"] .link { color: var(--sky); }
section[class*="tone-"] .card .link, section[class*="tone-"] .service-card .link, section[class*="tone-"] .agent-panel .link, section[class*="tone-"] .form .link { color: var(--royal); }
.site-footer .link { color: #fff; }

/* frames: always a light surface, corner dots follow the tone; the graph frame is see-through */
.frame { background: var(--white); border-color: var(--line); }
.frame::before, .frame::after, .frame > .c3, .frame > .c4, .agent-panel::before, .agent-panel::after { background: var(--corner); }
.frame.frame-graph { background: var(--night-2); border-color: var(--line-night-2); }

/* architecture base bar: blue-1 on light tones, white on blue */
.architecture .base { background: var(--arch-base); color: var(--arch-fg); }
.architecture .base:hover { background: var(--arch-base-hover); }
.architecture .base h3 { color: var(--arch-fg); }
.architecture .base h3::before { background: var(--arch-dot); box-shadow: none; }
.architecture .base p { color: var(--arch-fg-2); }
.architecture .base .layers { color: var(--arch-accent); }

/* deck-blue cells stay blue in any tone */
.three-steps > div { color: #fff; }
.three-steps h3 { color: #fff; }

/* hero scrims follow the surface (also while morphing) */
.hero-deck::after { background: linear-gradient(90deg, var(--night) 0%, color-mix(in srgb, var(--night) 72%, transparent) 42%, transparent 72%); }
.page-hero::after { background: linear-gradient(90deg, var(--night) 0%, color-mix(in srgb, var(--night) 74%, transparent) 50%, color-mix(in srgb, var(--night) 15%, transparent) 100%); }
@media (max-width: 719px) { .hero-deck::after { background: linear-gradient(180deg, color-mix(in srgb, var(--night) 40%, transparent), color-mix(in srgb, var(--night) 90%, transparent) 55%); } }

/* ——— Summit stage (summit.vntr.vc): the only dark section; radial spotlight is a deliberate exception ——— */
.summit-stage { position: relative; overflow: hidden; padding: clamp(88px, 10vw, 150px) 0; }
/* Summit stage = summit.vntr.vc hero: black stage, white spotlight cone top-left, blue glow rising bottom-right.
   Desktop uses the Summit site's own background image; a light left scrim keeps text on the spotlight readable.
   Tall/narrow (stacked) layouts rebuild the same light with radial gradients so both the cone and the glow stay in frame. */
html section.summit-stage.tone-summit { color: var(--ice); background-color: #000;
  background-image: linear-gradient(90deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,.12) 40%, transparent 60%), url("summit/summit-hero-bg.jpg");
  background-size: cover, cover; background-position: center, center; background-repeat: no-repeat; }
@media (max-width: 999px) {
  html section.summit-stage.tone-summit {
    background-image:
      radial-gradient(ellipse 70% 38% at 4% 0%, rgba(255,255,255,.30) 0%, rgba(255,255,255,.10) 45%, transparent 75%),
      radial-gradient(ellipse 95% 45% at 100% 100%, rgba(85,116,223,.55) 0%, rgba(46,74,125,.45) 40%, transparent 75%),
      radial-gradient(ellipse 40% 30% at 0% 80%, rgba(55,100,221,.25) 0%, transparent 70%);
    background-size: auto; background-position: 0 0; }
}
.summit-stage .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
@media (min-width: 1000px) { .summit-stage .wrap { grid-template-columns: 1.05fr .95fr; gap: 56px; } }
.summit-kicker { font: 400 15px var(--sans); color: var(--ice-2); margin: 0 0 14px; }
.summit-title { font: 400 clamp(40px, 6vw, 84px)/.98 var(--serif); letter-spacing: -.01em; text-transform: uppercase; margin: 0 0 28px; max-width: none;
  background: linear-gradient(180deg, #A9D1FC 0%, #8AAFF1 45%, #5574DF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* sampled from summit.vntr.vc title */
.summit-points { list-style: none; margin: 0 0 22px; padding: 0; }
.summit-points li { position: relative; padding: 6px 0 6px 22px; color: var(--ice-2); }
.summit-points li::before { content: ""; position: absolute; left: 0; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: #5CB2FF; }
.summit-where { display: flex; align-items: center; gap: 8px; color: var(--ice); font-weight: 500; margin: 0 0 28px; }
.summit-where svg { width: 16px; height: 16px; flex: none; }
.summit-sponsors { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); font: 500 15px var(--sans); color: var(--ice-2); }
.summit-sponsors small { font: 500 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ice-3); }
.summit-photos { position: relative; min-height: 460px; }
.summit-photos img { position: absolute; display: block; object-fit: cover; border-radius: 16px; }
.summit-photos .p1 { left: 0; top: 0; width: 66%; height: 54%; z-index: 1; }
.summit-photos .p2 { right: 0; top: 10%; width: 40%; height: 40%; z-index: 2; }
.summit-photos .p3 { left: 6%; bottom: 0; width: 50%; height: 40%; z-index: 2; }
.summit-photos .p4 { right: 4%; bottom: 4%; width: 36%; aspect-ratio: 1 / 1; height: auto; z-index: 3; }
@media (max-width: 999px) { .summit-photos { min-height: 380px; } }
@media (max-width: 559px) { .summit-photos { min-height: 300px; } }
.summit-stage .stats { margin-top: 32px; }

/* ——— event cards (live feed from VNTR OS) ——— */
.ev-grid { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; }
@media (min-width: 720px) { .ev-grid { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); overflow: visible; } }
@media (min-width: 1000px) { .ev-grid { grid-template-columns: repeat(3, 1fr); } }
.ev-card { scroll-snap-align: start; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; text-decoration: none; color: var(--ice); transition: border-color .2s; }
.ev-card:hover { border-color: var(--royal); }
.ev-cover { position: relative; aspect-ratio: 16 / 9; background: var(--photo); } /* OS event covers are 16:9 — never crop */
.ev-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-date { position: absolute; left: 12px; top: 12px; background: var(--white); color: var(--ink); border-radius: var(--r-pill); padding: 6px 12px; font: 500 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.ev-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.ev-body h3 { font: 400 22px/1.2 var(--serif); margin: 0; color: var(--ink); }
.ev-body .where { font-size: 14px; color: var(--mute); }
.ev-body .reg { margin-top: auto; padding-top: 14px; font-weight: 500; font-size: 14px; color: var(--royal); }

.ev-meta { font: 500 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--royal); margin-bottom: 4px; }


/* ——— people graph (home #graph): avatars, SVG edges, warm path from "You"; labels only on the current path ——— */
.pg-panel { border-radius: var(--r-panel); background: var(--night-2); border: 1px solid var(--line-night-2); overflow: hidden; }
.pg-stage { position: relative; aspect-ratio: 17 / 15; max-width: 760px; margin: 0 auto; }
.pg-stage.is-narrow { aspect-ratio: 3 / 4.4; }
.pg-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pg-edge { stroke: var(--ice); stroke-opacity: .3; stroke-width: 1.2; transition: stroke-opacity .3s ease; }
.has-focus .pg-edge { stroke-opacity: .12; }
.has-focus .pg-edge.near { stroke-opacity: .55; }
.pg-glow, .pg-path { stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s ease; }
.pg-glow { stroke: #5CB2FF; stroke-width: 12; stroke-opacity: .35; }
.pg-path { stroke: var(--sky); stroke-width: 2.5; }
.pg-node { position: absolute; z-index: 1; transform: translate(-50%, -50%); background: none; border: 0; padding: 0; cursor: pointer; font: inherit; transition: opacity .3s ease; -webkit-tap-highlight-color: transparent; }
.pg-node img, .pg-you { width: 52px; height: 52px; border-radius: 50%; border: 3px solid #fff; object-fit: cover; display: block; background: var(--photo); transition: transform .3s ease, box-shadow .3s ease; }
.pg-node.you .pg-you { width: 62px; height: 62px; }
.pg-you { background: var(--royal); color: #fff; display: flex; align-items: center; justify-content: center; font: 500 14px var(--sans); box-shadow: 0 0 0 6px rgba(92, 178, 255, .35); }
/* opaque discs: solid fill behind the photo; dimming by filter, never by opacity (lines must not show through faces) */
.pg-node img { background-color: var(--night); }
.has-focus .pg-node:not(.near):not(.on-path):not(.you) img { filter: grayscale(1) brightness(.72); }
/* label pills: own layer, placed by people-graph.js (right → left → above → below → role only), never overlapping */
.pg-labels { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.pg-label { position: absolute; left: 0; top: 0; background: #fff; color: var(--ink); border-radius: 9px; padding: 4px 9px 5px; line-height: 1.2; white-space: nowrap; animation: pg-in .3s ease both; }
.pg-label b { display: block; font: 500 11px var(--sans); }
.pg-label i { display: block; font: 400 10px var(--sans); font-style: normal; color: rgba(29, 29, 27, .6); }
.pg-label.is-target { background: var(--ink); color: #fff; } .pg-label.is-target i { color: rgba(255,255,255,.7); }
@keyframes pg-in { from { opacity: 0; } to { opacity: 1; } }
.is-narrow .pg-label { padding: 3px 7px 4px; } .is-narrow .pg-label b { font-size: 10.5px; } .is-narrow .pg-label i { font-size: 9.5px; }
.pg-node.on-path img { box-shadow: 0 0 0 3px #5CB2FF, 0 0 18px rgba(92, 178, 255, .75); }
.pg-node.is-target img { transform: scale(1.08); }
.pg-node:focus-visible { outline: none; } .pg-node:focus-visible img, .pg-node:focus-visible .pg-you { outline: 2px solid var(--sky); outline-offset: 3px; }
.is-narrow .pg-node img, .is-narrow .pg-you { width: 40px; height: 40px; border-width: 2px; }
.is-narrow .pg-node.you .pg-you { width: 46px; height: 46px; font-size: 12px; }
/* caption bar: its own strip under the stage, never over the nodes */
.pg-caption { margin: 0; padding: 14px 18px; min-height: 52px; border-top: 1px solid var(--line-night); font-size: 14px; line-height: 1.5; color: var(--ice-2); }
@media (min-width: 720px) { .pg-caption { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
.pg-caption b { color: var(--ice); font-weight: 600; } .pg-caption .t { color: var(--sky); }
.pg-stage { margin-top: 8px; margin-bottom: 8px; }
@media (prefers-reduced-motion: reduce) { .pg-glow, .pg-path, .pg-node, .pg-node img { transition: none; } .pg-label { animation: none; } }


/* ——— morph: hard edges around the Summit stage ———
   The Summit (.tone-summit) never drives the page tone; its two neighbours get .no-morph from layout.js and paint
   their own solid tone, so colours above and below the dark stage never change. */
html.morph section.no-morph { background: var(--night); color: var(--ice); }
html.morph .no-morph.tone-beige, html.morph .no-morph.tone-white {
  --night-2: var(--white); --night-3: var(--beige); --ice: var(--ink); --ice-2: rgba(29,29,27,.68); --ice-3: rgba(29,29,27,.5);
  --line: rgba(29,29,27,.12); --line-night: rgba(29,29,27,.12); --line-night-2: rgba(29,29,27,.28); --mute: rgba(29,29,27,.64); --photo: rgba(55,100,221,.10);
  --sky: var(--royal); --dot: var(--royal); --card: var(--white); --corner: 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;
  --arch-base: var(--royal); --arch-base-hover: var(--navy); --arch-fg: #fff; --arch-fg-2: rgba(255,255,255,.86); --arch-accent: var(--ice-blue); --arch-dot: #fff;
}
html.morph .no-morph.tone-beige { --night: var(--beige); }
html.morph .no-morph.tone-white { --night: var(--white); }
html.morph .no-morph.tone-blue {
  --night: var(--royal); --night-2: rgba(255,255,255,.08); --night-3: rgba(255,255,255,.14); --ice: #fff; --ice-2: rgba(255,255,255,.86); --ice-3: rgba(255,255,255,.68);
  --line: rgba(255,255,255,.24); --line-night: rgba(255,255,255,.24); --line-night-2: rgba(255,255,255,.5); --mute: rgba(255,255,255,.8); --photo: rgba(255,255,255,.14);
  --sky: var(--ice-blue); --dot: #fff; --card: var(--white); --corner: #fff;
  --btn-bg: #fff; --btn-fg: var(--royal); --btn-hover-bg: var(--beige); --btn-hover-fg: var(--navy); --btn2-line: rgba(255,255,255,.6); --btn2-hover-bg: #fff; --btn2-hover-fg: var(--royal);
  --arch-base: #fff; --arch-base-hover: var(--beige); --arch-fg: var(--ink); --arch-fg-2: rgba(29,29,27,.68); --arch-accent: var(--royal); --arch-dot: var(--royal);
}

/* ——— partners logo wall: even grid, uniform height, greyscale → colour on hover; white on blue ——— */
.logo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; margin-top: 36px; }
@media (min-width: 720px) { .logo-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .logo-grid { grid-template-columns: repeat(5, 1fr); } }
.logo-grid.community { grid-template-columns: repeat(3, 1fr); margin-top: 14px; max-width: 720px; }
.logo-cell { background: var(--night); display: flex; align-items: center; justify-content: center; min-height: 104px; padding: 22px 18px; }
.logo-cell img { max-height: 32px; max-width: 140px; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .72; transition: filter .25s ease, opacity .25s ease; }
.logo-cell:hover img, a.logo-cell:focus-visible img { filter: none; opacity: 1; }
.tone-blue .logo-cell img, body.tone-blue .logo-cell img { filter: brightness(0) invert(1); opacity: .9; }

/* ——— media about us: linked press cards ——— */
.press-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 36px; }
@media (min-width: 720px) { .press-grid { grid-template-columns: repeat(3, 1fr); } }
.press-card { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 168px; padding: 28px; border: 1px solid var(--line-night-2); border-radius: 16px; text-decoration: none; color: var(--ice); transition: background .2s ease, border-color .2s ease; }
.press-card:hover { background: var(--night-2); border-color: var(--ice); }
.press-logo img { max-height: 34px; max-width: 200px; width: auto; height: auto; filter: brightness(0) invert(1); }
html:not(.morph) .tone-beige .press-logo img, html:not(.morph) .tone-white .press-logo img, body.tone-beige .press-logo img, body.tone-white .press-logo img { filter: brightness(0); opacity: .85; }
.press-card .reg { font-weight: 500; font-size: 14px; color: var(--ice); }

/* ——— footer social icons ——— */
.socials { display: flex; gap: 10px; margin: 0; align-self: center; }   /* right side of .foot-top, opposite the logo */
.socials a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,.86); transition: background .2s ease, color .2s ease, border-color .2s ease; }
.socials a:hover { background: #fff; color: var(--royal); border-color: #fff; }
.socials svg { width: 20px; height: 20px; }

/* founder 23.10: no hairline above disclaimers — section colour already separates blocks */
.disclaimer { border-top: 0; padding-top: 0; }
/* logo wall: draw cell hairlines per cell so an incomplete last row has no grey filler */
.logo-grid { background: transparent; }
.logo-grid > * { box-shadow: 0 0 0 .5px var(--line); }
/* media cards: logo only, centred and a bit larger (founder 23.10) */
.press-card { justify-content: center; align-items: center; text-align: center; min-height: 160px; }
.press-card .press-logo { display: flex; align-items: center; justify-content: center; }
.press-card .press-logo img { height: 48px; max-height: none; max-width: 240px; width: auto; object-fit: contain; }

/* ——— layout fix (23.10): grid columns must be allowed to shrink ———
   Grid items default to min-width:auto, so a column holding nowrap text (e.g. the graph caption) or a wide image
   claimed its full min-content width and squeezed the other column (graph section at 1000–1100px: copy 188px wide,
   graph centred far below it). Every two-column layout now uses minmax(0, …) tracks and shrinkable children. */
.graph-layout > *, .split > *, .showcase > *, .summit-stage .wrap > *, .agent-panel.wide > *, .grid > * { min-width: 0; }
@media (min-width: 1000px) { .graph-layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  /* short side of a split (an intro heading or a form card) stays in view instead of leaving an empty column */
  .split > .form, .split > div:first-child:has(> h2:first-child) { position: sticky; top: 96px; align-self: start; }
}
@media (min-width: 1000px) {
  .showcase { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .showcase.reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .summit-stage .wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .agent-panel.wide { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
}

/* ═══════════════ HOME BLOCK 2 · #network — chapters by city (23.10) ═══════════════
   Region tabs + city chips (assets/chapter-picker.js) switch a static chapter card that sits over an event photo.
   The card borrows the hero toast (.hl-toast): white, 18px radius, soft shadow, 40px round avatar. Shared by
   index.html (.net grid) and index-bento.html (.net-blk, see bento.css). */
#network h2 { text-wrap: balance; }
.net-who { text-wrap: pretty; font: 400 15px/1.55 var(--sans); color: var(--ice-2); margin: -16px 0 0; max-width: 36em; }
.net-who b { font-weight: 600; color: var(--ice); }
.cp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; }

/* tabs: text with an underline; chips: pills, the chosen one filled royal */
.cp-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.cp-tabs::-webkit-scrollbar, .cp-chips::-webkit-scrollbar { display: none; }
.cp-tabs [role="tab"] { flex: none; position: relative; padding: 0 0 12px; border: 0; background: none; cursor: pointer; font: 500 15px/1.2 var(--sans); color: var(--mute); white-space: nowrap; transition: color .2s; }
.cp-tabs [role="tab"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--royal); transform: scaleX(0); transition: transform .2s ease; }
.cp-tabs [role="tab"]:hover { color: var(--ice); }
.cp-tabs [role="tab"][aria-selected="true"] { color: var(--ice); }
.cp-tabs [role="tab"][aria-selected="true"]::after { transform: none; }
.cp-chips { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 18px; }
.cp-chip { position: relative; display: inline-flex; align-items: baseline; gap: 6px; min-height: 40px; padding: 9px 16px; border: 1px solid var(--line-night-2); border-radius: var(--r-pill); background: transparent; cursor: pointer; font: 400 14px/1.2 var(--sans); color: var(--ice); white-space: nowrap; transition: background .2s, border-color .2s, color .2s; }
.cp-chip small { font-size: 12px; color: var(--mute); transition: color .2s; }
.cp-chip:hover { border-color: var(--ice); }
.cp-chip[aria-pressed="true"] { background: var(--royal); border-color: var(--royal); color: #fff; }
.cp-chip[aria-pressed="true"] small { color: rgba(255, 255, 255, .8); }
.cp [role="tab"]:focus-visible, .cp-chip:focus-visible, .cp-card a:focus-visible, .net-links a:focus-visible { outline: 2px solid var(--royal); outline-offset: 3px; border-radius: 6px; }
.cp-chip:focus-visible { border-radius: var(--r-pill); }
.net-links { display: flex; flex-wrap: wrap; gap: 14px 28px; font-size: 15px; }
@media (min-width: 1000px) and (max-width: 1199px) { .cp-tabs { gap: 14px; } .cp-tabs [role="tab"] { font-size: 14px; } }

/* the chapter card — always a light surface, whatever tone the page is morphing through */
.cp-card { width: min(340px, 100%); padding: 18px 20px 18px; background: #fff; color: var(--ink); border-radius: 18px; box-shadow: 0 10px 30px rgba(29, 29, 27, .18); transition: opacity .1s ease, transform .1s ease; }
.cp-card.is-out { opacity: 0; transform: translateY(4px); }
.cp-card:empty { display: none; }
.cp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cp-city { font: 300 30px/1.05 var(--serif); letter-spacing: -.02em; margin: 0; color: var(--ink); }
.cp-members { flex: none; font: 500 12px/1.2 var(--sans); color: rgba(29, 29, 27, .6); }
.cp-lead { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.cp-avs { display: flex; flex: none; }
.cp-avs img, .cp-avs i { display: block; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--beige); }
.cp-avs > * + * { margin-left: -12px; box-shadow: 0 0 0 2px #fff; }
.cp-lead-txt { min-width: 0; display: flex; flex-wrap: wrap; column-gap: 12px; font: 400 13px/1.4 var(--sans); }
.cp-lead-txt p { flex-basis: 100%; margin: 0; font: 500 14px/1.3 var(--sans); color: var(--ink); }
.cp-lead-txt a { color: var(--royal); text-decoration: none; }
.cp-lead-txt a:hover, .cp-next a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cp-next { text-wrap: pretty; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(29, 29, 27, .1); font: 400 13px/1.45 var(--sans); color: rgba(29, 29, 27, .66); }
.cp-next a { color: var(--ink); font-weight: 500; text-decoration: none; }
.cp-open { display: inline-block; margin-top: 12px; font: 500 14px/1.3 var(--sans); color: var(--royal); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.cp-open:hover { color: var(--navy); }
@media (prefers-reduced-motion: reduce) { .cp-card, .cp-chip, .cp-tabs [role="tab"]::after { transition: none; } }

/* photo + caption pill (same as the hero's) */
.net-media { position: relative; margin: 0; min-width: 0; }
.net-photo { position: relative; overflow: hidden; border-radius: 32px; background: var(--photo); aspect-ratio: 4 / 3; }
.net-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.net-cap { position: absolute; top: 16px; right: 16px; padding: 9px 14px; border-radius: var(--r-pill); background: rgba(29, 29, 27, .3); border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 500 10px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #fff; z-index: 1; }

/* classic page grid. Mobile order: copy → photo → card (under the photo) → tabs + chips → links */
.net { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; grid-template-areas: "copy" "media" "picker" "links"; }
.net > * { min-width: 0; }
.net-copy { grid-area: copy; } .net-copy .sub { margin-bottom: 28px; }
.net-media { grid-area: media; } .net-picker { grid-area: picker; } .net-links { grid-area: links; }
.net > .note { grid-column: 1 / -1; }
.net-media .cp-card { margin-top: 12px; width: 100%; box-shadow: 0 6px 24px rgba(29, 29, 27, .10); border: 1px solid rgba(29, 29, 27, .08); }
@media (max-width: 999px) {
  /* chips and tabs scroll sideways inside their row, edge to edge */
  .net-picker .cp-tabs, .net-picker .cp-chips { margin: 0 calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter); }
  .net-picker .cp-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
}
@media (min-width: 560px) and (max-width: 999px) { .net-media .cp-card { width: min(380px, 100%); } }
@media (min-width: 1000px) {
  .net { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 5vw, 72px); row-gap: 0;
    grid-template-areas: "copy media" "picker media" "links media"; grid-template-rows: auto 1fr auto; }
  .net-picker { align-self: end; padding-top: 36px; }
  .net-links { padding-top: 28px; }
  .net-copy h2 { font-size: clamp(40px, 4.2vw, 60px); }
  /* the photo fills the column height (at least square, so the crop keeps people, not the ceiling) */
  .net-media { align-self: stretch; display: flex; }
  .net-photo { flex: 1; aspect-ratio: auto; min-height: 0; }
  .net-photo::before { content: ""; display: block; padding-top: 100%; }
  .net-media .cp-card { position: absolute; left: 24px; bottom: 24px; margin: 0; width: min(340px, calc(100% - 48px)); border: 0; box-shadow: 0 10px 30px rgba(29, 29, 27, .18); }
  .net-cap { top: 20px; right: 20px; }
}

/* Header: transparent on the beige page top; when it sticks it floats as a white rounded bar inset from the top and sides
   (layout.js toggles .is-scrolled). Every page opens on a beige section, so the transparent state always sits on beige. */
.site-header { background: transparent; border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 10px 12px 0; }
.site-header .wrap { border-radius: 20px; border: 1px solid transparent; transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease; }
.site-header.is-scrolled .wrap, .site-header.open .wrap { background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-color: rgba(29, 29, 27, .06); box-shadow: 0 8px 28px rgba(29, 29, 27, .08); }
@media (min-width: 720px) { .site-header { padding: 12px 20px 0; } }

/* official wordmark (inline SVG, currentColor): ink in the header, white in the footer */
.logo { display: inline-flex; align-items: center; line-height: 0; }
.logo svg { display: block; height: 24px; width: auto; }
.site-footer .logo svg { height: 30px; }

/* ═══ shared page container — header bar (both states) keeps logo / CTA on the content edges ═══ */
.site-header { padding-left: calc(var(--page-gutter) - var(--bar-pad)); padding-right: calc(var(--page-gutter) - var(--bar-pad)); }
.site-header .wrap { max-width: calc(var(--page-max) + 2 * var(--bar-pad)); padding-left: calc(var(--bar-pad) - 1px); padding-right: calc(var(--bar-pad) - 1px); }   /* −1px: the bar's transparent border */

/* ═══ header shrink on scroll (desktop), after caldera.xyz: full-width transparent bar on the page top →
   compact centred white pill once it sticks. Logo and CTA get equal fixed slots so the menu stays exactly centred
   in both states (it is in flow, not absolutely positioned), and the bar can narrow without overlap. ═══ */
@media (min-width: 1181px) {
  .site-header .wrap { transition: max-width .5s cubic-bezier(.2, .7, .2, 1), height .35s ease, border-radius .35s ease, background-color .3s ease, box-shadow .3s ease, border-color .3s ease; }
  .site-header .logo, .site-header .header-cta { flex: 0 0 216px; }
  .site-header .header-cta { justify-content: flex-end; margin-left: 0; }
  .site-header .menu { position: static; transform: none; flex: 1 1 auto; justify-content: center; }
  .site-header.is-scrolled .wrap { max-width: 1140px; height: 60px; border-radius: 999px; }
}
@media (min-width: 1181px) and (prefers-reduced-motion: reduce) { .site-header .wrap { transition: none; } }

/* ═══ scroll reveal (Caldera-style) — assets/reveal.js on inner pages, assets/home-motion.js on the homepage ═══
   Hidden ONLY under html.mo-ready (set by those scripts, never under reduced motion): no JS = static, complete page.
   Rise 40px + blur 8px → 0 + scale .98 → 1, 700ms ease-out-cubic, 90ms between siblings (--i). Plays once (.mo-in).
   Uses the individual `translate` / `scale` properties so hover `transform` lifts keep their own transition. */
:root { --mo-ease: cubic-bezier(.33, 1, .68, 1); }
@media (prefers-reduced-motion: no-preference) {
  .mo-ready .mo-r { opacity: 0; translate: 0 40px; scale: .98; filter: blur(8px);
    transition: opacity .7s var(--mo-ease), translate .7s var(--mo-ease), scale .7s var(--mo-ease), filter .7s var(--mo-ease), transform .25s ease, box-shadow .25s ease, border-color .2s ease, background-color .2s ease;
    transition-delay: calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), 0s, 0s, 0s, 0s; }
  .mo-ready .mo-r.mo-in { opacity: 1; translate: none; scale: none; filter: none; }
}

/* compact footer (founder, 24.10): tighter rhythm, smaller logo and icons, legal lines in one bottom row on desktop */
.site-footer { padding: 44px 0 28px; }
.site-footer .logo svg { height: 24px; }
.site-footer .cols { margin: 28px 0 20px; padding-top: 28px; gap: 24px 16px; }
.site-footer h4 { margin-bottom: 10px; }
.site-footer .cols a { padding: 2px 0; }
.site-footer .socials a { width: 34px; height: 34px; }
.site-footer .socials svg { width: 17px; height: 17px; }
.foot-bottom { display: flex; flex-direction: column; gap: 6px; padding-top: 18px; border-top: 1px solid var(--line-night); }
.foot-bottom .disc { margin: 0; max-width: none; }
@media (min-width: 1100px) { .foot-bottom { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 32px; } .foot-bottom .disc:last-child { white-space: nowrap; } }

/* Caldera match (founder, 24.10; measured on caldera.xyz/rollups): cards pop from opacity 0 + scale .9, text just fades
   with a short 16px rise; no blur. ~600ms on Caldera's own curve cubic-bezier(.37,.97,.64,1), siblings 90ms apart. */
:root { --mo-ease: cubic-bezier(.37, .97, .64, 1); }
@media (prefers-reduced-motion: no-preference) {
  .mo-ready .mo-r { translate: none; scale: .9; filter: none;
    transition: opacity .6s var(--mo-ease), scale .6s var(--mo-ease), translate .6s var(--mo-ease), transform .25s ease, box-shadow .25s ease, border-color .2s ease, background-color .2s ease;
    transition-delay: calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), 0s, 0s, 0s, 0s; }
  .mo-ready :is(h1, h2, h3, p, .sub, .h-txt, .h-act, .btns, .link).mo-r { scale: none; translate: 0 16px; }
  .mo-ready .mo-r.mo-in { opacity: 1; translate: none; scale: none; }
}

/* ——— structure v2 (layout.js): 5-column footer + v1/v2 switcher (prototype chrome) ——— */
@media (min-width: 900px) { .site-footer .cols.five { grid-template-columns: repeat(5, 1fr); } }
.v-switch { position: fixed; z-index: 70; left: 14px; bottom: 14px; display: flex; align-items: center; gap: 2px; padding: 4px; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(29, 29, 27, .14); border-radius: var(--r-pill); box-shadow: 0 6px 20px rgba(29, 29, 27, .08); }
.v-switch-k { font: 500 10px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(29, 29, 27, .55); padding: 0 8px 0 10px; }
.v-switch a { min-width: 40px; height: 34px; padding: 0 10px; border-radius: var(--r-pill); display: grid; place-items: center; font: 500 13px/1 var(--sans); color: var(--ink); text-decoration: none; transition: background .2s, color .2s; }
.v-switch a:hover { background: var(--beige); }
.v-switch a[aria-current="true"] { background: var(--royal); color: #fff; }
.v-switch a:focus-visible { outline: 2px solid var(--royal); outline-offset: 2px; }
@media (max-width: 719px) { body:has(.hl-switch) .v-switch { bottom: 72px; } .v-switch-k { display: none; } }

/* chapter card modal (chapters.js; founder, 26.10): city + member count, description, director card, one action */
.ch-modal { max-width: 520px; }
.ch-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin: 0 40px 12px 0; }
.ch-head h2 { margin: 0; font-size: clamp(34px, 4vw, 48px); line-height: 1.05; }
.ch-members { font-size: 13px; color: var(--mute); padding: 4px 10px; border-radius: 999px; background: rgba(29, 29, 27, .06); white-space: nowrap; }
.ch-desc { margin: 0 0 22px; color: var(--mute); font-size: 15px; line-height: 1.55; }
.ch-desc:empty { display: none; }
.ch-people { display: grid; gap: 10px; margin-bottom: 24px; }
.ch-person { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 18px; background: #fff; }
.ch-person img, .ch-person .ph { width: 52px; height: 52px; padding: 0; border-radius: 50%; object-fit: cover; flex: none; }
.ch-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ch-who b { font-weight: 600; font-size: 16px; }
.ch-who span { color: var(--mute); font-size: 14px; }
.ch-in { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--ink, #1D1D1B); background: rgba(29, 29, 27, .06); transition: background-color .2s ease; }
.ch-in:hover { background: rgba(29, 29, 27, .12); }
.ch-nolead { margin: 0; padding: 14px 16px; border-radius: 18px; background: #fff; color: var(--mute); font-size: 14px; }
.ch-join { width: 100%; justify-content: center; }

/* no one-word last lines (founder, 26.10): headings balance their lines, body text avoids orphans */
h1, h2, h3, h4 { text-wrap: balance; }
p, li, .sub, figcaption, blockquote { text-wrap: pretty; }

/* "← All …" back link above a detail page title (roles, blog posts, podcast episodes) — one style (founder, 26.10) */
.cr-back { display: inline-block; margin: 0 0 clamp(20px, 2.4vw, 32px); font: 500 14px/1.3 var(--sans); color: var(--mute); text-decoration: none; transition: color .2s ease; }
.cr-back:hover { color: var(--royal); }
@media (prefers-reduced-motion: reduce) { .cr-back { transition: none; } }
/* menu item descriptions: no one-word last lines */
.site-header a > span { text-wrap: pretty; }

/* v2 footer on phones (founder, 27.10): icons closer to the tagline; the five link groups fold into an accordion, one
   title per row in Poppins, divided by hairlines; the legal line's own rule closes the last row. Desktop unchanged. */
@media (max-width: 899px) {
  .site-footer { padding-top: 32px; }
  .foot-top { row-gap: 16px; }
  .site-footer .cols.foot-acc { display: block; margin: 28px 0 0; padding-top: 0; }
  .site-footer .cols.foot-acc > div { border-bottom: 1px solid var(--line-night); }
  .site-footer .cols.foot-acc > div:last-child { border-bottom: 0; }
  .site-footer .cols.foot-acc h4 { margin: 0; font: 500 17px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: #fff; }
  .site-footer .cols.foot-acc h4 button { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 56px; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
  .site-footer .cols.foot-acc h4 button::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
  .site-footer .cols.foot-acc .is-open h4 button::after { transform: translateY(2px) rotate(-135deg); }
  .site-footer .cols.foot-acc .foot-links { display: none; padding: 0 0 18px; }
  .site-footer .cols.foot-acc .foot-links a { padding: 5px 0; font-size: 16px; }
  .site-footer .cols.foot-acc .is-open .foot-links { display: block; }
}
@media (min-width: 900px) { .site-footer .cols.foot-acc h4 button { all: unset; } .site-footer .cols.foot-acc .foot-links { display: block; } }
@media (prefers-reduced-motion: reduce) { .site-footer .cols.foot-acc h4 button::after { transition: none; } }

/* phones: a slimmer header bar (founder, 27.10): 69 → 56px */
@media (max-width: 719px) {
  .site-header .wrap { padding-top: 8px; padding-bottom: 8px; }
  .burger { padding: 7px 14px; }
}

/* every control shows the hand cursor (buttons default to an arrow) */
button:not(:disabled), [role="button"], [role="tab"], summary, select, label:has(input[type="checkbox"], input[type="radio"]) { cursor: pointer; }
@media (min-width: 900px) { .site-footer .cols.foot-acc h4 button { cursor: default; } }   /* desktop: the footer titles are plain headings */
/* phones (founder, 27.10): the header bar keeps the page gutter outside it, so it lines up with the cards below */
@media (max-width: 719px) { .site-header { padding-left: var(--page-gutter); padding-right: var(--page-gutter); } }

/* open menu on phones and tablets (founder, 27.10): the header keeps its closed height in the page flow, so the
   expanded panel lays over the content instead of pushing it (and the browser's scroll anchoring) up and down */
@media (max-width: 1180px) {
  .site-header { height: calc(var(--hdr-pad-top, 10px) + 55px); }
  .site-header .wrap { position: relative; z-index: 1; }
}
@media (min-width: 720px) and (max-width: 1180px) { .site-header { --hdr-pad-top: 12px; height: calc(12px + 69px); } }
@media (max-width: 1180px) { .site-header.open .wrap { background: #fff; } }   /* the open panel is opaque over the page */

/* the mobile menu opens with a short fade-and-drop: the panel's fill, then the items one after another */
@media (max-width: 1180px) and (prefers-reduced-motion: no-preference) {
  .site-header .wrap { transition: background-color .25s ease, box-shadow .25s ease; }
  .site-header.open .menu > li, .site-header.open .header-cta { animation: mnu-in .38s cubic-bezier(.2, .7, .2, 1) both; }
  .site-header.open .menu > li:nth-child(2) { animation-delay: .03s; }
  .site-header.open .menu > li:nth-child(3) { animation-delay: .06s; }
  .site-header.open .menu > li:nth-child(4) { animation-delay: .09s; }
  .site-header.open .menu > li:nth-child(5) { animation-delay: .12s; }
  .site-header.open .menu > li:nth-child(6) { animation-delay: .15s; }
  .site-header.open .header-cta { animation-delay: .18s; }
}
@keyframes mnu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* open menu on phones (founder, 27.10): the whole panel scrolls as one, inside the screen, so the buttons at the
   bottom stay reachable with a section expanded */
@media (max-width: 1180px) {
  .site-header.open .wrap { max-height: calc(100dvh - 2 * var(--hdr-pad-top, 10px)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .site-header.open .menu { max-height: none; overflow: visible; }
  .site-header.open .header-cta { padding-bottom: 12px; }
  /* no overflow lock on html/body: body has overflow-x: hidden, and any lock on html makes body the sticky header's
     scroller, so the header would jump off screen; overscroll-behavior on the panel keeps the page still instead */
}

/* open menu on phones (founder, 27.10): a full-height panel — the logo and Close stay on top, Join / Log in stay at
   the bottom, and only the list in between scrolls */
@media (max-width: 1180px) {
  .site-header.open .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto; align-items: center; height: calc(100dvh - 2 * var(--hdr-pad-top, 10px)); max-height: none; overflow: hidden; }
  .site-header.open .wrap > .logo { grid-column: 1; grid-row: 1; }
  .site-header.open .burger { grid-column: 2; grid-row: 1; }
  .site-header.open .menu { grid-column: 1 / -1; grid-row: 2; align-self: stretch; margin-top: 8px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .site-header.open .header-cta { grid-column: 1 / -1; grid-row: 3; padding: 12px 0; border-top: 1px solid var(--line); }
}
/* phones: the summit bar wraps to two centred lines instead of overflowing */
@media (max-width: 719px) { .announcement-bar { gap: 2px 8px; padding: 7px 40px; font-size: 12px; line-height: 1.35; } .announcement-bar > span { flex: 0 0 100%; } }

/* load flash (founder, 28.10): with a capped hero, a tall screen paints the blocks below it before home-motion.js hides
   them for the reveal (seen, then gone). Until the script marks html.mo-set they are not painted; 3 s safety net. */
@media (prefers-reduced-motion: no-preference) {
  .mo-ready:not(.mo-set) body > section:not(.hl) { visibility: hidden; animation: mo-safe 0s linear 3s forwards; }
}
@keyframes mo-safe { to { visibility: visible; } }