/* Version 2 of the homepage (branch staging-v2): light, centred, one idea per screen, big calm type.
   Loaded after site.css; same tokens, fonts and scripts. */

/* Floating nav: the animated mark, the wordmark and a menu button in one box that opens into the menu */
.pill-nav,
.has-pagegraph body > .pill-nav:not(.page-graph):not(.sticky-bar) {
  position: fixed; z-index: 20; top: 0; left: 0; right: 0; padding: 16px; pointer-events: none;
}
.nav-scrim { position: fixed; inset: 0; z-index: -1; background: rgba(0, 17, 68, 0.28); opacity: 0; transition: opacity 0.35s ease; }
.nav-box { pointer-events: auto; position: relative; margin: 0 auto; width: 330px; max-width: 100%; overflow: hidden; border-radius: 14px;
  background: rgba(255, 255, 255, 0.9); border: 1px solid var(--line); box-shadow: 0 6px 24px rgba(0, 17, 68, 0.08);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: width 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.nav-bar { display: grid; grid-template-columns: 60px minmax(0, 1fr) 60px; align-items: center; height: 58px; }
.nav-mark, .nav-word { display: flex; align-items: center; justify-content: center; height: 58px; }
.nav-word svg { display: block; height: 18px; width: auto; }
.nav-toggle { width: 60px; height: 58px; padding: 0; border: 0; background: none; cursor: pointer; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--ink); }
.nav-toggle span { display: block; width: 20px; height: 1.6px; border-radius: 2px; background: currentColor; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.nav-toggle:focus-visible, .nav-mark:focus-visible { outline-offset: -6px; border-radius: 10px; }

.nav-menu { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0.45s; }
.nav-menu-inner { min-height: 0; overflow: hidden; }
.nav-links { list-style: none; margin: 0; padding: 10px 26px 0; display: flex; flex-direction: column; gap: 2px; font-family: var(--sans); }
.nav-links a { display: inline-block; padding: 4px 0; font-size: 26px; line-height: 34px; font-weight: 400; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; transition: color 0.2s ease; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--brand); }
.nav-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding: 28px 26px 22px; font-family: var(--sans); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.nav-foot a { color: var(--brand); text-decoration: none; font-weight: 500; }

.pill-nav.open .nav-box { width: 640px; background: #ffffff; }
.pill-nav.open .nav-menu { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s; }
.pill-nav.open .nav-scrim { opacity: 1; pointer-events: auto; }
.pill-nav.open .nav-toggle span:first-child { transform: translateY(3.8px) rotate(45deg); }
.pill-nav.open .nav-toggle span:last-child { transform: translateY(-3.8px) rotate(-45deg); }
.v2 section[id] { scroll-margin-top: 112px; }
.v2 section.people[id] { scroll-margin-top: 0; }

/* The mark: the dots appear from the centre out, then the lines connect them. It turns as you scroll and settles
   upright when you stop; hovering sends a ripple through the dots (js/nav-v2.js). */
.mark { display: block; overflow: visible; }
.mark .n { fill: var(--brand); transform-box: fill-box; transform-origin: center; }
.mark .l { fill: none; stroke: var(--brand); stroke-width: 1.2; stroke-dasharray: 1; }
.mark-anim .mark .n { animation: mark-dot 0.55s cubic-bezier(0.3, 1.5, 0.5, 1) both; animation-delay: calc(var(--d) + 0.2s); }
.mark-anim .mark .l { animation: mark-line 0.6s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: calc(0.75s + var(--i) * 0.07s); }
@keyframes mark-dot { from { transform: scale(0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mark-line { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.mark-done .mark .n, .mark-done .mark .l { animation: none; }
.mark-done .mark.ripple .n { animation: mark-ripple 0.7s ease-in-out both; animation-delay: var(--d); }
@keyframes mark-ripple { 45% { transform: scale(1.7); } }

/* The top of the screen stays clear for the nav: content dissolves as it scrolls up towards it (js/topfade-v2.js). */
.top-fade .v2-top, .top-fade main, .top-fade .site-footer {
  -webkit-mask-image: linear-gradient(to bottom, transparent var(--f0, -200px), #000 var(--f1, -150px));
  mask-image: linear-gradient(to bottom, transparent var(--f0, -200px), #000 var(--f1, -150px));
}

.hero-cta-note b { color: var(--ink); font-weight: 600; }
.people-cta p b { color: var(--ink); font-weight: 600; }

/* On-page contents on the right edge (js/toc-v2.js): a small vertical graph of the page's sections. */
.page-toc,
.has-pagegraph body > .page-toc:not(.page-graph):not(.sticky-bar) {
  position: fixed; z-index: 15; top: 50%; right: max(14px, env(safe-area-inset-right, 0px)); transform: translateY(-50%);
}
.page-toc { opacity: 0; pointer-events: none; transition: opacity 0.4s ease; font-family: var(--sans); }
.page-toc.on { opacity: 1; pointer-events: auto; }
.page-toc ol { --fill: 0px; position: relative; list-style: none; margin: 0; padding: 10px 7px; display: flex; flex-direction: column; gap: 6px;
  background: rgba(255, 255, 255, 0.86); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 6px 24px rgba(0, 17, 68, 0.08);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.page-toc ol::before, .page-toc ol::after { content: ""; position: absolute; left: 50%; top: 21px; width: 1.5px; transform: translateX(-50%); }
.page-toc ol::before { bottom: 21px; background: var(--line); }
.page-toc ol::after { height: var(--fill); background: var(--brand); transition: height 0.15s linear; }
.page-toc li { position: relative; }
.page-toc a { position: relative; z-index: 1; display: block; width: 16px; height: 22px; text-decoration: none; }
.page-toc a:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: 2px; border-radius: 999px; }
.toc-dot { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; transform: translate(-50%, -50%); border-radius: 999px;
  background: var(--raised); border: 1.5px solid var(--line-strong); transition: all 0.25s ease; }
.page-toc li.done .toc-dot { background: var(--brand-dark); border-color: var(--brand-dark); }
.page-toc a[aria-current="true"] .toc-dot { width: 13px; height: 13px; background: var(--brand); border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); }
.toc-label { position: absolute; right: calc(100% + 16px); top: 50%; transform: translate(6px, -50%); white-space: nowrap; pointer-events: none;
  font-size: 13px; line-height: 16px; font-weight: 500; color: var(--ink); background: rgba(255, 255, 255, 0.96); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 10px; opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; }
.page-toc a[aria-current="true"] .toc-label { color: var(--brand); }
.page-toc:hover .toc-label, .page-toc:focus-within .toc-label, .page-toc li.peek .toc-label { opacity: 1; transform: translate(0, -50%); }
@media (max-width: 760px) { .page-toc { display: none; } }
@media (prefers-reduced-motion: reduce) { .page-toc, .page-toc ol::after, .toc-dot, .toc-label { transition: none; } }

/* Grounds when JavaScript is off; the moving graph paints them when it runs */
.v2-top, .v2-white { background: var(--raised); }
.v2-trust { background: var(--navy); color: var(--on-dark); }
.has-pagegraph .v2-top, .has-pagegraph .v2-white, .has-pagegraph .v2-trust { background-color: transparent; }

/* Hero: centred and text first, then Syndiza's panel wide underneath */
.v2-hero { flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 0; padding-top: 152px; padding-bottom: 0; }
.v2-hero .hero-copy { flex: none; width: 100%; max-width: 1080px; align-items: center; text-align: center; gap: 22px;
  padding: 0; background: none; border: 0; border-radius: 0; }
.eyebrow { margin: 0; display: flex; flex-direction: column; gap: 2px; font-family: var(--sans); font-size: 15px; line-height: 20px; font-weight: 500; letter-spacing: 0.01em; color: var(--ink); }
.eyebrow span + span { font-weight: 400; color: var(--ink-muted); }
.v2-hero h1 { margin-top: 14px; color: var(--ink); font-weight: 500; font-size: clamp(52px, 8vw, 112px); line-height: 1; letter-spacing: -0.04em; }
.v2-hero h1 .accent { color: var(--brand); margin-top: 0.08em; }
.v2-hero .actions { justify-content: center; margin-top: 10px; }
.v2-hero .small { color: var(--ink-muted); }

.v2-hero .syndy-demo { flex: none; width: 100%; max-width: 1040px; height: 640px; margin-top: 72px;
  border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0, 17, 68, 0.16); }
.v2-hero .sd-head { padding: 14px 20px; }
.v2-hero .sd-thread, .v2-hero .sd-foot { padding-left: max(20px, calc((100% - 720px) / 2)); padding-right: max(20px, calc((100% - 720px) / 2)); }
.v2-hero .sd-thread { padding-top: 24px; padding-bottom: 24px; gap: 14px; }
.v2-hero .sd-text { font-size: 16.5px; line-height: 26px; }

/* Scrolling the hero (js/hero-scroll-v2.js): the text holds its place and fades; the panel rises over it and widens
   to fill the screen. Only when the script runs; otherwise the hero is a plain block. */
.v2-top { overflow-x: clip; }
.hero-scroll .v2-hero { --p: 0; --fade: 0; --h0: 640px; }
.hero-scroll .v2-hero .hero-copy { position: sticky; top: 112px; z-index: 0; will-change: opacity, transform;
  opacity: calc(1 - var(--fade)); transform: translateY(calc(var(--fade) * -28px)) scale(calc(1 - var(--fade) * 0.06)); }
.hero-scroll .v2-hero .hero-copy.faded { pointer-events: none; }
.hero-scroll .v2-hero .syndy-demo { position: relative; z-index: 1; max-width: none;
  width: calc(min(1040px, 100%) + (100vw - 32px - min(1040px, 100%)) * var(--p));
  height: calc(var(--h0) + (min(100vh - 150px, 760px) - var(--h0)) * var(--p));
  height: calc(var(--h0) + (min(100svh - 150px, 760px) - var(--h0)) * var(--p));
  border-radius: calc(16px - 4px * var(--p)); }

/* The panel as a card with two faces: the chat in front, the graph behind (js/hero-chat.js flips it after "Show
   these N on the graph"; js/hero-graph.js draws the back). */
.v2-hero .syndy-demo { display: block; overflow: visible; background: none; border: 0; box-shadow: none; perspective: 4000px; }
.sd-flip { position: relative; width: 100%; height: 100%; border-radius: inherit; transform-style: preserve-3d; }
.sd-face { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: inherit;
  background: var(--raised); border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0, 17, 68, 0.16);
  -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.sd-back { transform: rotateY(180deg); }
.syndy-demo.flipped .sd-flip { animation: sd-flip-to 0.95s cubic-bezier(0.5, 0, 0.2, 1) both; }
.syndy-demo.unflip .sd-flip { animation: sd-flip-back 0.95s cubic-bezier(0.5, 0, 0.2, 1) both; }
@keyframes sd-flip-to { 0% { transform: rotateY(0deg) scale(1); } 50% { transform: rotateY(90deg) scale(0.93); } 100% { transform: rotateY(180deg) scale(1); } }
@keyframes sd-flip-back { 0% { transform: rotateY(180deg) scale(1); } 50% { transform: rotateY(90deg) scale(0.93); } 100% { transform: rotateY(0deg) scale(1); } }
.sd-action { transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.sd-action.hot { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); }
.sd-action.pressed { transform: scale(0.93); background: var(--brand); border-color: var(--brand); color: #ffffff; }

.sg-mark svg { display: block; }
.sg-head .sd-titles { flex: 1 1 auto; }
.sg-back { flex: none; font-size: 12.5px; font-weight: 500; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 8px; padding: 5px 10px; }
.sg-back::before { content: "\2190"; margin-right: 6px; }
.sg-body { position: relative; flex: 1 1 auto; min-height: 0; }
.sg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sg-legend { position: absolute; left: 16px; bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.sg-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sg-legend i { width: 9px; height: 9px; border-radius: 999px; border: 1px solid #0f172a; }

/* A single statement, set big */
.v2-statement { padding-top: 140px; padding-bottom: 160px; }
.v2-statement p { margin: 0; max-width: 1080px; font-family: var(--sans); font-weight: 400; font-size: clamp(26px, 3.1vw, 42px); line-height: 1.24; letter-spacing: -0.015em; color: var(--ink); text-wrap: pretty; }

/* Numbers that count up as you scroll (js/counters-v2.js): each keeps its final width, digits growing leftwards like
   an odometer; the "+" pops in when the count arrives. */
.counting { align-self: center; text-align: right; white-space: nowrap; }
.counting .cs { display: inline-block; opacity: 0; transform: translateY(-0.12em) scale(0.6); transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.3, 1.6, 0.5, 1); }
.counting .cs.on { opacity: 1; transform: none; }

/* Words that float into place as you scroll (js/words-v2.js) */
.words-on .w { display: inline-block; will-change: transform, opacity; }

/* Screens */
.v2-screen { padding-top: 160px; padding-bottom: 160px; text-align: center; }
.v2-kicker { margin: 0 0 18px; font-family: var(--sans); font-size: 15px; line-height: 20px; font-weight: 500; color: var(--ink-muted); }
.v2-display { margin: 0 auto; max-width: 980px; font-weight: 500; font-size: clamp(36px, 4.8vw, 66px); line-height: 1.06; letter-spacing: -0.03em; }

/* Counts */
.big-number { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; font-family: var(--sans); }
.big-number b { font-size: clamp(88px, 15vw, 210px); line-height: 0.9; font-weight: 500; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; color: var(--ink); }
.big-number > span { font-size: clamp(20px, 2vw, 26px); line-height: 1.3; color: var(--ink-muted); }
.v2-count-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 72px; margin: 88px 0 36px; font-family: var(--sans); }
.v2-count-row div { display: flex; flex-direction: column; gap: 6px; }
.v2-count-row b { font-size: 48px; line-height: 50px; font-weight: 500; letter-spacing: -0.02em; }
.v2-count-row div > span { font-size: 16px; line-height: 22px; color: var(--ink-muted); }

/* Question cards */
.v2-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 1040px; margin: 80px auto 0; text-align: left; font-family: var(--sans); }
.v2-card { min-height: 260px; display: flex; flex-direction: column; gap: 18px; padding: 28px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.v2-card .label { color: var(--ink-muted); }
.v2-card .q { margin: 0; flex: 1 1 auto; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; }

/* Four people as a desk-calendar deck (js/people-v2.js). Without the script, or with reduced motion, the four cards
   simply stack down the page. With it (.deck-on), the section pins while you scroll and each card flips up and over
   its top edge to reveal the next, which rises from the pad beneath and builds. */
.people-stage { padding-block: 160px 96px; }
.people-title { margin: 0 auto 40px; text-align: center; }
.people-deck { display: flex; flex-direction: column; gap: 24px; max-width: 1200px; margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.person { position: relative; background: var(--raised); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 30px 80px rgba(0, 17, 68, 0.12); padding: clamp(24px, 4vw, 48px); overflow: hidden; }
.person-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
.person-num { position: absolute; top: 18px; right: 24px; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.person-shade { position: absolute; inset: 0; background: var(--navy); opacity: 0; pointer-events: none; border-radius: inherit; }
.person-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.person-who { margin: 0; font-family: var(--sans); font-size: clamp(40px, 4.6vw, 62px); line-height: 1.02; font-weight: 500; letter-spacing: -0.03em; color: var(--ink); }
.person-who span { display: block; color: var(--brand); }
.person-job { margin: 16px 0 0; font-family: var(--sans); font-size: clamp(18px, 1.7vw, 22px); line-height: 1.35; color: var(--ink-muted); }
.person-q { margin: 28px 0 0; max-width: 30em; background: var(--brand); color: #ffffff; border-radius: 16px 16px 4px 16px; padding: 14px 18px; font-family: var(--sans); font-size: 17px; line-height: 1.45; }
.person-a { margin: 16px 0 0; display: flex; align-items: flex-start; gap: 12px; max-width: 32em; font-size: 19px; line-height: 1.5; color: var(--ink); }
.person-a .sd-mark { width: 26px; height: 26px; margin-top: 1px; }
.person-a b { font-weight: 600; }
.person-graph { position: relative; margin: 0; font-family: var(--sans); min-width: 0; aspect-ratio: 4 / 3; background: var(--raised); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.person-graph canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pg-title { position: absolute; z-index: 1; top: 14px; left: 18px; right: 18px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--sans); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sg-legend i.web { background: transparent !important; border: 1.5px dashed #0044ee; }
.people-tabs { display: none; }
.people-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; max-width: 1200px; margin: 0 auto; padding: 22px max(24px, env(safe-area-inset-right, 0px)) 0 max(24px, env(safe-area-inset-left, 0px)); font-family: var(--sans); }
.people-cta p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink-muted); }
.deck-on .people-cta { flex: none; width: min(1200px, calc(100% - 48px)); padding: 16px 0 0; margin: 0; border-top: 1px solid var(--line); }

.deck-on .people { height: calc(100vh + 375vh); height: calc(100svh + 375svh); overflow-x: clip; }   /* five cards (founders added 2026-11-10); 300vh was four */
.deck-on .people-stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 132px 0 26px; }
.deck-on .people-title { margin: 0; flex: none; transform-origin: 50% 0; will-change: transform; }
.deck-on .people-deck { position: relative; display: block; flex: 1 1 auto; min-height: 0; max-height: 640px; width: min(1200px, calc(100% - 48px)); padding: 0; perspective: 2400px; transform-origin: 50% 0; will-change: transform; }
.deck-on .person { position: absolute; inset: 0; transform-origin: 50% 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; display: flex; flex-direction: column; justify-content: center; }
.deck-on .people-tabs { display: flex; flex: none; flex-wrap: wrap; justify-content: center; gap: 4px; padding-inline: 16px; margin-top: 18px; }
.people-tabs button { font-family: var(--sans); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-muted); background: none; border: 1px solid transparent; border-radius: 999px; padding: 6px 14px; cursor: pointer; transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease; }
.people-tabs button:hover { color: var(--ink); }
.people-tabs button[aria-current="true"] { color: var(--ink); background: var(--raised); border-color: var(--line); }

/* How it works */
.v2-stages { display: flex; flex-direction: column; gap: 120px; margin-top: 120px; }
.v2-stage { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.v2-stage .label { color: var(--brand); }
.v2-stage h3 { margin: 0; max-width: 900px; font-family: var(--sans); font-size: clamp(30px, 3.6vw, 48px); line-height: 1.12; font-weight: 500; letter-spacing: -0.025em; text-wrap: balance; }
.v2-stage h3 span { display: block; color: var(--brand); }
.v2-stage p:last-child { margin: 0; max-width: 34em; font-size: 19px; line-height: 30px; color: var(--ink-muted); }

/* Trust */
.v2-trust .v2-kicker { color: var(--on-dark-muted); }
.v2-trust .v2-display { color: var(--on-dark); }
.v2-promises { list-style: none; margin: 96px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; text-align: left; font-family: var(--sans); }
.v2-promises li { border-top: 1px solid var(--line-strong-dark); padding-top: 20px; font-size: 20px; line-height: 28px; font-weight: 400; color: var(--on-dark); }

/* FAQ: the heading on the left, the questions on the right */
.v2-faq { padding-top: 140px; padding-bottom: 120px; }
.v2-faq .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 48px; align-items: start; }
.v2-faq h2 { font-size: 22px; line-height: 30px; font-weight: 500; letter-spacing: 0; }
.v2-faq details { border-top: 1px solid var(--line); padding: 22px 0; }
.v2-faq details:last-child { border-bottom: 1px solid var(--line); }
.v2-faq summary { cursor: pointer; font-family: var(--sans); font-size: 20px; line-height: 28px; font-weight: 500; }
.v2-faq details p { margin: 12px 0 0; font-size: 17px; line-height: 28px; color: var(--ink-muted); }

/* Join: one dark card, then a quiet strip for organisations */
.v2-join { padding-bottom: 32px; }
.v2-join .wrap { display: flex; flex-direction: column; gap: 16px; }
.v2-join-card { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; padding: 112px 32px; border-radius: 20px; background: var(--navy); color: var(--on-dark); }
.v2-join-card h2 { max-width: 820px; font-weight: 500; font-size: clamp(32px, 4vw, 54px); line-height: 1.08; letter-spacing: -0.025em; }
.v2-join-card .accent { margin: 0; font-family: var(--sans); font-size: 20px; line-height: 28px; color: var(--brand-dark); }
.v2-join-card .btn-primary { margin-top: 8px; background: var(--brand-dark); color: var(--navy); }
.v2-join-card .btn-primary:hover { background: var(--brand-dark-strong); color: var(--navy); }
.v2-join-card .small { color: var(--on-dark-muted); max-width: 40em; }
.v2-org { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 8px 16px; padding: 28px 32px; border-radius: 20px; background: var(--sunken); text-align: center; font-family: var(--sans); }
.v2-org .label { color: var(--ink-muted); }
.v2-org .t { margin: 0; font-size: 18px; line-height: 26px; font-weight: 600; }
.v2-org .d { margin: 0; flex: 1 1 100%; font-family: var(--serif); font-size: 16px; line-height: 26px; color: var(--ink-muted); }

/* Gentle rise as each idea comes into view (js/reveal.js); off without JavaScript or with reduced motion */
.js-reveal .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js-reveal .reveal.in { opacity: 1; transform: none; }

/* Phones */
@media (max-width: 760px) {
  .v2-cards { grid-template-columns: minmax(0, 1fr); }
  .v2-promises { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .v2-faq .wrap { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .person-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .person-graph { aspect-ratio: 4 / 5; }
  .deck-on .person { justify-content: flex-start; }
  .deck-on .person-inner { display: flex; flex-direction: column; align-items: stretch; gap: 18px; height: 100%; }
  .deck-on .person-graph { aspect-ratio: auto; flex: 1 1 auto; min-height: 180px; }
}
@media (max-width: 640px) {
  .pill-nav { padding: 12px; }
  .nav-box, .pill-nav.open .nav-box { width: 100%; }
  .nav-links a { font-size: 24px; line-height: 32px; }
  .v2-hero { padding-top: 112px; }
  .v2-hero h1 { font-size: 52px; line-height: 1.02; }
  .v2-hero .actions .btn { flex: 0 1 auto; }
  .v2-hero .syndy-demo { height: 580px; margin-top: 48px; }
  .hero-scroll .v2-hero { --h0: 580px; }
  .hero-scroll .v2-hero .hero-copy { top: 88px; }
  .v2-statement { padding-top: 88px; padding-bottom: 96px; }
  .v2-screen { padding-top: 104px; padding-bottom: 104px; }
  .v2-cards { margin-top: 48px; }
  .v2-card { min-height: 0; padding: 22px; }
  .v2-stages { gap: 72px; margin-top: 72px; }
  .v2-promises { margin-top: 56px; }
  .v2-count-row { margin-top: 56px; gap: 24px 40px; }
  .v2-faq { padding-top: 96px; padding-bottom: 88px; }
  .people-stage { padding-top: 104px; }
  .person { padding: 22px 20px; border-radius: 20px; }
  .person-num { top: 14px; right: 18px; }
  .person-who { font-size: 34px; }
  .person-job { margin-top: 8px; font-size: 16px; }
  .person-q { margin-top: 16px; font-size: 14.5px; padding: 11px 14px; }
  .person-a { margin-top: 10px; font-size: 15.5px; gap: 10px; }
  .person-a .sd-mark { width: 22px; height: 22px; }
  .deck-on .people-deck { width: calc(100% - 24px); max-height: none; }
  .deck-on .people-stage { padding: 112px 0 16px; gap: 14px; }
  .deck-on .people-tabs { margin-top: 10px; }
  .people-title { font-size: 32px; }
  .people-tabs button { font-size: 13px; padding: 5px 10px; }
  .deck-on .people-cta { width: calc(100% - 24px); flex-wrap: nowrap; gap: 10px; padding-top: 10px; }
  .people-cta p { font-size: 12.5px; line-height: 1.35; }
  .people-cta .btn { flex: none; font-size: 13.5px; padding: 9px 13px; }
  .v2-join-card { padding: 72px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
  .syndy-demo.flipped .sd-flip, .syndy-demo.unflip .sd-flip { animation: none; }
  .nav-box, .nav-menu, .nav-toggle span, .nav-scrim { transition: none; }
}

/* ---------- Other pages (how-it-works, about, contact, signup) ---------- */
.sub-hero { padding-top: 168px; padding-bottom: 96px; text-align: center; }
.sub-hero .eyebrow { margin-bottom: 18px; }
.sub-title { margin: 0 auto; max-width: 980px; font-family: var(--sans); font-weight: 500; font-size: clamp(42px, 6vw, 84px); line-height: 1.02; letter-spacing: -0.035em; color: var(--ink); text-wrap: balance; }
.sub-lead { margin: 26px auto 0; max-width: 40em; font-size: clamp(18px, 1.8vw, 21px); line-height: 1.55; color: var(--ink-muted); text-wrap: pretty; }
.sub-hero-tall { min-height: 78vh; }

/* How it works: one row per stage, the words beside a picture of it */
.hiw-stage { padding-block: 120px; }
.hiw-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.hiw-flip .hiw-copy { order: 2; }
.hiw-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.hiw-copy { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.hiw-num { margin: 0; font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand); }
.hiw-copy h2 { margin: 0; font-family: var(--sans); font-size: clamp(32px, 3.8vw, 50px); line-height: 1.08; font-weight: 500; letter-spacing: -0.025em; text-wrap: balance; }
.hiw-copy h2 span { display: block; color: var(--brand); }
.hiw-copy p:not(.hiw-num) { margin: 0; max-width: 34em; font-size: 19px; line-height: 1.6; color: var(--ink-muted); }
.hiw-visual { min-width: 0; }
.hiw-visual.person-graph { box-shadow: 0 24px 64px rgba(0, 17, 68, 0.1); }
.hiw-collection, .hiw-answer, .hiw-steps { background: var(--raised); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 64px rgba(0, 17, 68, 0.1); padding: 24px; font-family: var(--sans); }
.hc-head, .hc-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.hc-head b, .hc-foot b { font-size: 17px; font-weight: 600; }
.hc-kind { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand); }
.hc-n { margin-left: auto; font-size: 14px; color: var(--ink-muted); }
.hc-list { list-style: none; margin: 16px 0; padding: 0; border-top: 1px solid var(--line); }
.hc-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 14px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.hc-list span { color: var(--ink-muted); font-size: 14px; }
.hc-foot { padding: 14px 16px; background: var(--surface); border-radius: 12px; }
.ha-ws { margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.ha-q { margin: 0 0 16px auto; width: fit-content; max-width: 88%; background: var(--brand); color: #ffffff; border-radius: 14px 14px 4px 14px; padding: 11px 15px; font-size: 15px; line-height: 1.45; }
.ha-rows { list-style: none; margin: 0 0 14px; padding: 0; border-top: 1px solid var(--line); }
.ha-rows li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; line-height: 1.45; }
.ha-rows b { font-weight: 600; font-variant-numeric: tabular-nums; }
.hiw-answer i, .ha-src i { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; margin-left: 3px; border-radius: 4px; background: var(--brand-tint); color: var(--brand); font-size: 10.5px; font-weight: 600; font-style: normal; vertical-align: 1px; }
.ha-src { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; }
.ha-src > span { color: var(--ink-muted); margin-right: 2px; }
.ha-src em { font-style: normal; display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px 2px 3px; }
.ha-src em i { margin-left: 0; }
.hs-web { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 13px; }
.hs-web .sd-toggle { background: var(--brand); }
.hs-web .sd-toggle span { transform: translateX(12px); }
.hiw-steps .sd-steps { gap: 8px; font-size: 14px; line-height: 20px; }
.hiw-band { padding-block: 140px; text-align: center; }
.hiw-sources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 72px; text-align: left; }
.hiw-sources > div { border-top: 1px solid var(--line-strong); padding-top: 20px; }
.hiw-sources h3 { margin: 0 0 10px; font-family: var(--sans); font-size: 21px; line-height: 1.3; font-weight: 600; }
.hiw-sources p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-muted); }
.hiw-sources .hiw-n { margin: 0 0 8px; font-family: var(--sans); font-size: 14px; line-height: 1; font-weight: 600; letter-spacing: 0.04em; color: var(--brand); }
.hiw-sources { row-gap: 44px; }
.hiw-cta { margin-top: 72px; padding-top: 28px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; text-align: left; font-family: var(--sans); }
.hiw-cta p { margin: 0; font-size: 18px; line-height: 1.5; color: var(--ink-muted); }
.hiw-cta p b { color: var(--ink); font-weight: 600; }
.hiw-note { margin: 56px auto 0; max-width: 34em; font-family: var(--sans); font-size: 20px; line-height: 1.45; color: var(--ink); }

/* How it works: the journey (js/journey-v2.js). One panel that the same companies travel through as you scroll:
   Discover (ask Syndiza; see them on the graph and exclude an off-topic hub; the dots become the catalogue's rows;
   add a date filter; add the set to a named collection), then Curate and Analyse. Without the script, or with reduced
   motion, the stages' words stack beside the collection and the workspace. */
.journey { position: relative; }
.j-mark { position: absolute; left: 0; top: 0; width: 1px; height: 1px; pointer-events: none; }
.j-stage { padding-block: 120px; }
.j-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: center; }
.j-copy { grid-area: copy; min-width: 0; position: relative; display: flex; flex-direction: column; gap: 48px; }
.j-grid { grid-template-areas: "copy visual" "cta visual"; }
.j-visual { grid-area: visual; }
.j-cta { grid-area: cta; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); font-family: var(--sans); }
.j-cta p { margin: 0; max-width: 30em; font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
.j-cta p b { color: var(--ink); font-weight: 600; }
.j-copy .hiw-copy h2 { font-size: clamp(28px, 3vw, 40px); }
.j-copy .hiw-copy p:not(.hiw-num) { font-size: 17px; }
.j-progress { display: none; list-style: none; margin: 0; padding: 0; gap: 4px; font-family: var(--sans); font-size: 14px; line-height: 20px; font-weight: 500; }
.j-progress li { color: var(--ink-muted); border: 1px solid transparent; border-radius: 999px; padding: 6px 14px; transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease; }
.j-progress li.done { color: var(--brand); }
.j-progress li.on { color: var(--ink); background: var(--raised); border-color: var(--line); }
.j-visual { min-width: 0; display: flex; flex-direction: column; gap: 20px; font-family: var(--sans); }
.j-graph, .j-fly, .jv-head, .jv-chat, .jv-cat, .jv-pop, .jv-legend, .jv-dialog, .jv-toast { display: none; }
.jv-body { display: flex; flex-direction: column; gap: 20px; }
.j-collection, .j-workspace { background: var(--raised); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 64px rgba(0, 17, 68, 0.1); padding: 22px; }
.jc-list { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--line); }
.jc-list li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.jc-list li > span:last-child { margin-left: auto; font-size: 13.5px; color: var(--ink-muted); }
.jc-dot, .jc-cdot { flex: none; width: 15px; height: 15px; border-radius: 999px; background: #6b9bff; border: 1.5px solid #0f172a; }
.jc-more { margin: 0; padding: 9px 0 0 27px; font-size: 13px; color: var(--ink-muted); }
.jw-chip { margin-left: 8px; font-size: 11px; letter-spacing: 0.04em; color: var(--brand); background: var(--brand-tint); border-radius: 999px; padding: 2px 8px; }
.j-workspace .sd-steps { margin-bottom: 12px; }
.jw-a { margin: 0 0 14px; display: flex; gap: 10px; align-items: flex-start; font-family: var(--serif); font-size: 16px; line-height: 1.55; color: var(--ink); }
.jw-a .sd-mark { width: 22px; height: 22px; margin-top: 1px; }

.journey-on .journey { height: calc(100vh + 715vh); height: calc(100svh + 715svh); }
.journey-on .j-stage { position: sticky; top: 0; height: 100vh; height: 100svh; padding: 124px 0 32px; display: flex; align-items: center; }
.journey-on .j-grid { width: 100%; grid-template-rows: minmax(0, 1fr) auto; align-items: end; }
.journey-on .j-visual { align-self: center; }
.journey-on .j-cta { align-self: start; }
.journey-on .j-copy { display: block; min-height: 400px; }
.journey-on .j-text { position: absolute; left: 0; right: 0; top: 60px; opacity: 0; transform: translateY(22px); transition: opacity 0.5s ease, transform 0.5s ease; pointer-events: none; }
.journey-on .j-text.on { opacity: 1; transform: none; pointer-events: auto; }
.journey-on .j-progress { display: flex; position: absolute; left: -14px; top: 0; }

/* The panel: a header (what you're looking at, the filters as chips, the count), then the view */
.journey-on .j-visual { position: relative; display: flex; flex-direction: column; gap: 0; aspect-ratio: 4 / 3; max-height: calc(100vh - 170px); max-height: calc(100svh - 170px); background: var(--raised); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 28px 72px rgba(0, 17, 68, 0.12); overflow: hidden; }
.journey-on .jv-head { display: flex; flex: none; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px; border-bottom: 1px solid var(--line); }
.jv-title { flex: none; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.jv-title small { display: block; margin-top: 2px; font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-muted); }
.jv-chips { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.jv-chip, .jv-addf { display: none; font-size: 12px; line-height: 16px; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; background: var(--surface); white-space: nowrap; }
.jv-chip b { font-weight: 600; color: var(--brand); }
.jv-chip-x b { color: var(--ink-muted); text-decoration: line-through; }
.jv-chip.on, .jv-addf.on { display: inline-block; animation: jv-pop-in 0.3s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
@keyframes jv-pop-in { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: none; } }
.jv-addf { color: var(--brand); border-style: dashed; background: transparent; transition: background 0.2s ease, transform 0.15s ease; }
.jv-addf.hot { background: var(--brand-tint); }
.jv-addf.pressed { transform: scale(0.92); }
.jv-count { flex: none; margin-left: auto; font-size: 13px; color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.journey-on .jv-body { position: relative; display: block; flex: 1 1 auto; min-height: 0; }
.journey-on .jv-view { position: absolute; inset: 0; }
.journey-on .j-graph, .journey-on .j-fly { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.journey-on .j-fly { z-index: 6; pointer-events: none; }
.journey-on .jv-legend { display: flex; position: absolute; left: 16px; bottom: 14px; }
.sg-legend.jv-legend i { border: 1px solid #0f172a; }

/* Ask */
.journey-on .jv-chat { display: flex; flex-direction: column; justify-content: space-between; padding: 16px 20px 18px; transform-origin: 20% 75%; }
.jv-thread { display: flex; flex-direction: column; gap: 12px; }
.jv-thread .ha-q { margin: 0 0 0 auto; }
.jv-thread .jw-a { margin: 0; font-size: 15.5px; }
.jv-thread .sd-action { align-self: flex-start; margin-left: 32px; }
.jv-composer { font-size: 14px; }

/* The graph's selection menu, as in the app */
.journey-on .jv-pop { display: flex; position: absolute; z-index: 4; gap: 2px; padding: 4px; background: var(--raised); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 17, 68, 0.16); font-size: 13px; opacity: 0; transform: translate(-50%, 0) scale(0.92); transform-origin: 50% 0; transition: opacity 0.2s ease, transform 0.25s ease; pointer-events: none; }
.journey-on .jv-pop.on { opacity: 1; transform: translate(-50%, 0); }
.jv-pop span { padding: 5px 10px; border-radius: 7px; color: var(--ink); white-space: nowrap; transition: background 0.2s ease, transform 0.15s ease; }
.jv-pop .jv-ex.hot { background: var(--brand-tint); color: var(--brand); }
.jv-pop .jv-ex.pressed { transform: scale(0.92); }

/* Catalogue */
.journey-on .jv-cat { display: flex; flex-direction: column; padding: 0 18px; font-size: 14px; }
.jc-row { display: grid; grid-template-columns: 15px minmax(0, 1.25fr) minmax(0, 0.85fr) minmax(0, 1.5fr); gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.jc-row > * { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jc-row b { font-weight: 600; }
.jc-row > span:not(.jc-cdot):not(.bar) { color: var(--ink-muted); font-size: 13.5px; }
.jc-headrow { padding-top: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.jc-headrow > span { color: var(--ink-muted) !important; font-size: 11px !important; }
.jt-more td { color: var(--ink-muted); font-size: 12.5px; }
.journey-on .jc-row.jc-sk, .journey-on .jc-row.jc-real { overflow: hidden; }
.jc-selbar { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0 14px; font-size: 13.5px; font-weight: 500; }
.jc-add { background: var(--brand); color: #ffffff; border-radius: 8px; padding: 7px 13px; transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease; }
.jc-add.hot { box-shadow: 0 0 0 4px var(--brand-tint); }
.jc-add.pressed { transform: scale(0.93); background: var(--brand-strong); }

/* Naming the collection, and the confirmation */
.journey-on .jv-dialog { display: flex; position: absolute; inset: 0; z-index: 5; align-items: center; justify-content: center; background: rgba(0, 17, 68, 0.18); opacity: 0; pointer-events: none; }
.jv-dlg { width: min(84%, 360px); background: var(--raised); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 64px rgba(0, 17, 68, 0.22); padding: 20px; }
.jv-dlg-t { margin: 0; font-size: 17px; font-weight: 600; color: var(--ink); }
.jv-dlg-s { margin: 4px 0 14px; font-size: 13px; color: var(--ink-muted); }
.jv-field { min-height: 40px; display: flex; align-items: center; padding: 0 12px; border: 1.5px solid var(--brand); border-radius: 9px; font-size: 14.5px; color: var(--ink); }
.jv-name::after { content: ""; display: inline-block; width: 1px; height: 16px; margin-left: 1px; vertical-align: -3px; background: var(--ink); animation: sd-caret 1s steps(1) infinite; }
.jv-dlg-b { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; font-size: 13.5px; font-weight: 500; }
.jv-cancel { padding: 7px 12px; color: var(--ink-muted); }
.jv-ok { padding: 7px 16px; border-radius: 8px; background: var(--brand); color: #ffffff; transition: transform 0.15s ease, box-shadow 0.2s ease; }
.jv-ok.hot { box-shadow: 0 0 0 4px var(--brand-tint); }
.jv-ok.pressed { transform: scale(0.92); }
.journey-on .jv-toast { display: flex; position: absolute; z-index: 5; left: 50%; bottom: 18px; align-items: center; gap: 8px; margin: 0; padding: 9px 14px; border-radius: 10px; background: var(--navy); color: #ffffff; font-size: 13.5px; font-weight: 500; white-space: nowrap; opacity: 0; transform: translateX(-50%); }
.jv-toast .sd-tick { background: rgba(255, 255, 255, 0.18); }
.jv-toast .sd-tick::after { border-color: #ffffff; }

/* Curate and Analyse: the collection and the workspace, over the view */
.journey-on .j-collection, .journey-on .j-workspace { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(86%, 470px); opacity: 0; box-shadow: 0 16px 40px rgba(0, 17, 68, 0.12); }
.journey-on .j-workspace { width: min(90%, 560px); }
.journey-on .jc-list li, .journey-on .jc-more-c { opacity: 0; }

/* Curate: the collection card zooms to fill the panel (its size and place are set by the script), then shows its
   tabs, a Syndiza bar for questions across the set, the comparison she returns, and the What's new feed. */
.jcol-tabs, .jcol-ask, .jcol-sheet, .jcol-feed, .jcl-what { display: none; }
.jc-list li .jcl-town { margin-left: auto; font-size: 13.5px; color: var(--ink-muted); }
.journey-on .j-collection { display: flex; flex-direction: column; overflow: hidden; padding: 0; left: 0; top: 0; transform: none; width: auto; }
.journey-on .j-collection .hc-head { flex: none; padding: 16px 18px 0; }
.journey-on .jcol-tabs { display: flex; flex: none; gap: 6px; margin-top: 8px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.jcol-tab { font-size: 13.5px; font-weight: 500; color: var(--ink-muted); padding: 9px 8px; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.25s ease, border-color 0.25s ease; }
.jcol-tab.on { color: var(--ink); border-bottom-color: var(--brand); }
.jcol-tab i { font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--brand); background: var(--brand-tint); border-radius: 999px; padding: 1px 7px; margin-left: 5px; }
.journey-on .jcol-main { position: relative; flex: 1 1 auto; min-height: 0; padding: 0 18px; overflow: hidden; }
.journey-on .j-collection .jc-list { margin-top: 10px; }
.journey-on .j-collection.full .jc-list { border-top: 0; }
.journey-on .j-collection.full .jc-list li { display: grid; grid-template-columns: 15px minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 1.6fr); gap: 12px; }
.journey-on .j-collection.full .jcl-town, .journey-on .j-collection.full .jc-list li > span:last-child { margin-left: 0; }
.journey-on .j-collection.full .jcl-what { display: block; font-size: 13.5px; color: var(--ink-muted); }
.journey-on .j-collection.full .jc-list li > * { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.journey-on .jcol-feed { display: block; position: absolute; left: 18px; right: 18px; top: 4px; list-style: none; margin: 0; padding: 0; opacity: 0; }
.jcol-feed li { display: grid; grid-template-columns: 74px 96px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.4; }
.jf-when { grid-row: 1 / span 2; font-size: 12.5px; color: var(--ink-muted); padding-top: 2px; }
.jf-kind { grid-row: 1 / span 2; display: inline-flex; align-items: flex-start; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--ink); padding-top: 2px; }
.jf-kind i { flex: none; width: 9px; height: 9px; margin-top: 4px; border-radius: 999px; border: 1px solid #0f172a; }
.jf-company i { background: #6b9bff; } .jf-investor i { background: #fb7185; } .jf-market i { background: #6ee7b7; } .jf-round i { background: #d6d3d1; }
.jf-what { color: var(--ink); }
.jf-src { grid-column: 3; font-size: 12px; color: var(--ink-muted); }
.journey-on .jcol-ask { display: flex; flex: none; align-items: center; gap: 10px; margin: 8px 14px 14px; padding: 7px 7px 7px 10px; border: 1px solid var(--line-strong); border-radius: 12px; font-size: 14px; background: var(--raised); opacity: 0; position: relative; z-index: 3; }
.jcol-ask .sd-mark { width: 22px; height: 22px; }
.jcol-input { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.jcol-input.placeholder { color: var(--ink-muted); }
.journey-on .jcol-sheet { display: flex; flex-direction: column; gap: 10px; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 84%; padding: 16px 18px 70px; background: var(--raised); border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; box-shadow: 0 -14px 36px rgba(0, 17, 68, 0.12); transform: translateY(105%); }
.jcol-sheet .ha-q { margin: 0 0 0 auto; }
.jcol-sheet .sd-steps { font-size: 12.5px; }
.jcol-table-wrap { min-height: 0; overflow: hidden; }
.jcol-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.jcol-table th { text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); padding: 6px 10px 6px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.jcol-table td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--line); color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.jcol-table td b { color: var(--ink); font-weight: 600; }
.jcol-table .jt-ph { color: var(--brand); font-weight: 500; }
.jcol-sum { margin: 0; font-size: 14.5px; }
.jcl-pick { transition: background 0.2s ease; }
.jcl-pick.hot { background: var(--brand-tint); border-radius: 8px; }
.jcl-pick.hot b { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }

/* Analyse: a company's card over the collection; Add to workspace; the panel flips to the workspace and its deep dive */
.j-card, .j-ws { display: none; }
.journey-on .jv-body { perspective: 2400px; }
.journey-on .j-collection { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.journey-on .j-card { display: flex; flex-direction: column; gap: 12px; position: absolute; z-index: 9; top: 12px; right: 12px; bottom: 12px; width: min(56%, 390px); padding: 18px; background: var(--raised); border: 1px solid var(--line); border-radius: 16px; box-shadow: -18px 0 48px rgba(0, 17, 68, 0.16); opacity: 0; overflow: hidden; }
.jk-head { display: flex; align-items: center; gap: 12px; }
.jk-head .jc-dot { width: 22px; height: 22px; }
.jk-name { margin: 0; font-size: 19px; line-height: 24px; font-weight: 600; color: var(--ink); }
.jk-sub { margin: 2px 0 0; font-size: 13px; color: var(--ink-muted); }
.jk-desc { margin: 0; font-family: var(--serif); font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.jk-facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.jk-facts div { border-top: 1px solid var(--line); padding-top: 6px; min-width: 0; }
.jk-facts dt { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.jk-facts dd { margin: 2px 0 0; font-size: 14.5px; font-weight: 500; color: var(--ink); }
.jk-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.jk-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; color: var(--ink); }
.jk-tag::before { content: ""; width: 8px; height: 8px; border-radius: 999px; border: 1px solid #0f172a; }
.jk-market::before { background: #6ee7b7; } .jk-tech::before { background: #d8b4fe; }
.jk-actions { margin-top: auto; display: flex; justify-content: flex-end; gap: 8px; }
.jk-btn { font-size: 13px; font-weight: 500; padding: 8px 12px; border-radius: 9px; border: 1px solid var(--line-strong); color: var(--ink-muted); }
.jk-primary { background: var(--brand); border-color: var(--brand); color: #ffffff; transition: transform 0.15s ease, box-shadow 0.2s ease; }
.jk-primary.hot { box-shadow: 0 0 0 4px var(--brand-tint); }
.jk-primary.pressed { transform: scale(0.93); }
.journey-on .j-ws { display: flex; flex-direction: column; position: absolute; z-index: 8; background: var(--raised); overflow: hidden; opacity: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.jw-head { flex: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--line); }
.jw-kind { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand); }
.jw-title { margin: 2px 0 0; font-size: 20px; line-height: 24px; font-weight: 600; color: var(--ink); }
.jw-meta { margin: 0; font-size: 12.5px; color: var(--ink-muted); white-space: nowrap; }
.jw-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 186px minmax(0, 1fr); }
.jw-rail { list-style: none; margin: 0; padding: 10px 8px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
.jw-rail li { font-size: 12.5px; line-height: 16px; color: var(--ink-muted); padding: 5px 10px; border-radius: 7px; transition: background 0.2s ease, color 0.2s ease; }
.jw-rail li.on { background: var(--brand-tint); color: var(--brand); font-weight: 600; }
.jw-view { position: relative; min-width: 0; overflow: hidden; }
.jw-content { padding: 14px 22px 48px; will-change: transform; }
.jw-sec { padding: 4px 0 18px; }
.jw-sec h4 { margin: 0 0 8px; font-size: 16px; line-height: 22px; font-weight: 600; color: var(--ink); }
.jw-sec ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.jw-sec li, .jw-srcs { font-family: var(--serif); font-size: 14px; line-height: 1.55; color: var(--ink); }
.jw-srcs { margin: 0; color: var(--ink-muted); }

/* About */
.about-story { padding-block: 140px; text-align: center; }
.about-text { max-width: 760px; margin: 56px auto 0; display: flex; flex-direction: column; gap: 22px; text-align: left; }
.about-text p { margin: 0; font-size: clamp(19px, 1.9vw, 23px); line-height: 1.6; color: var(--ink); }
.about-team { padding-block: 140px; text-align: center; }
.team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 72px; text-align: left; }
.team-card { display: flex; flex-direction: column; gap: 20px; padding: 28px; background: var(--raised); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 20px 56px rgba(0, 17, 68, 0.08); }
.team-card img { width: 120px; height: 120px; border-radius: 999px; object-fit: cover; background: var(--sunken); }
.team-card h3 { margin: 0; font-family: var(--sans); font-size: 26px; line-height: 1.2; font-weight: 600; }
.team-role { margin: 4px 0 12px; font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--brand); }
.team-card p:not(.team-role) { margin: 0 0 14px; font-size: 17px; line-height: 1.6; color: var(--ink-muted); }
.team-card a { font-family: var(--sans); font-size: 15px; font-weight: 500; }

/* Contact: book a call, or send a message */
.contact-band { padding-block: 24px 140px; }
.contact-routes { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; align-items: start; }
.contact-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px; background: var(--raised); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 20px 56px rgba(0, 17, 68, 0.08); font-family: var(--sans); }
.contact-card .label { color: var(--brand); }
.contact-card h2 { margin: 0; font-size: 24px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
.contact-card > p:not(.label) { margin: 0 0 8px; font-family: var(--serif); font-size: 17px; line-height: 1.6; color: var(--ink-muted); }
.contact-form, .launch-form, .cf-done { width: 100%; margin-top: 8px; }
.form-card .launch-form, .form-card .cf-done { margin-top: 0; }
.contact-form, .launch-form { display: flex; flex-direction: column; gap: 18px; }
.contact-form[hidden], .launch-form[hidden] { display: none; }
.cf-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.cf-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cf-field label, .cf-topic legend { font-size: 15px; line-height: 22px; font-weight: 500; color: var(--ink); }
.cf-field .opt { font-weight: 400; color: var(--ink-muted); }
.cf-field .req, .cf-topic .req { margin-left: 2px; color: var(--brand); }
.contact-form .input, .launch-form .input { flex: none; width: 100%; }
.contact-form textarea.input { min-height: 150px; resize: vertical; }
.contact-form .input[aria-invalid="true"], .launch-form .input[aria-invalid="true"] { border-color: #b4231a; }
.cf-topic .choice { color: var(--ink); }
.cf-topic .choice:has(input:checked) { background: var(--brand-tint); border-color: var(--brand); }
.cf-topic.is-invalid .choice { border-color: #b4231a; }
.cf-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cf-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.cf-note { flex: 1 1 240px; }
.cf-done { display: flex; flex-direction: column; gap: 10px; }
.cf-done[hidden] { display: none; }
.cf-done:focus { outline: none; }
.cf-done h3 { margin: 0; font-size: 22px; line-height: 1.3; font-weight: 600; color: var(--ink); }
.cf-done p { margin: 0; font-family: var(--serif); font-size: 17px; line-height: 1.6; color: var(--ink-muted); }

/* Sign-up, in the light design */
.su { padding-top: 152px; padding-bottom: 120px; }
.su-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; }
.su-main { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.su-title { margin: 0; text-align: left; font-size: clamp(42px, 5.4vw, 72px); }
.su-main .sub-lead { margin: 0; text-align: left; }
.su-facts li { background: var(--raised); border: 1px solid var(--line); color: var(--ink); }
.su .form-card { align-self: stretch; border: 1px solid var(--line); box-shadow: 0 24px 64px rgba(0, 17, 68, 0.1); }
.su-vote legend { color: var(--ink); }
.su-vote label { color: var(--ink); background: var(--raised); border-color: var(--line); }
.su-vote .small { color: var(--ink-muted); }

@media (max-width: 860px) {
  .hiw-row, .hiw-flip { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .hiw-flip .hiw-copy { order: 0; }
  .hiw-sources { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 48px; }
  .team-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-routes { grid-template-columns: minmax(0, 1fr); }
  .cf-row { grid-template-columns: minmax(0, 1fr); }
  .su-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .j-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .journey-on .j-stage { padding: 104px 0 12px; align-items: stretch; }
  .journey-on .j-grid { display: flex; flex-direction: column; align-items: stretch; gap: 12px; height: 100%; }
  .journey-on .j-visual, .journey-on .j-cta { align-self: stretch; }
  .journey-on .j-cta { order: 3; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; margin-top: 0; padding-top: 10px; }
  .journey-on .j-cta p { font-size: 12.5px; line-height: 1.35; }
  .journey-on .j-cta .btn { flex: none; font-size: 13.5px; padding: 9px 13px; }
  .j-grid { grid-template-areas: "copy" "cta" "visual"; }
  .journey-on .j-copy { flex: none; min-height: 236px; }
  .journey-on .j-progress { left: -10px; }
  .journey-on .j-text { top: 44px; gap: 8px; }
  .journey-on .j-text h2, .j-copy .hiw-copy h2 { font-size: 25px; }
  .journey-on .j-text p:not(.hiw-num) { font-size: 14.5px; line-height: 1.5; }
  .journey-on .j-visual { flex: 1 1 auto; aspect-ratio: auto; max-height: none; min-height: 360px; border-radius: 16px; }
  .journey-on .jv-head { min-height: 46px; padding: 6px 10px; gap: 6px; flex-wrap: wrap; }
  .jv-title { font-size: 11px; }
  .jv-chip, .jv-addf { font-size: 11px; padding: 3px 7px; }
  .jv-count { font-size: 12px; }
  .journey-on .jv-chat { padding: 10px 12px 12px; }
  .jv-thread { gap: 8px; }
  .jv-thread .ha-q { font-size: 13px; padding: 8px 11px; }
  .jv-thread .sd-steps { font-size: 11.5px; line-height: 16px; }
  .jv-thread .jw-a { font-size: 13.5px; }
  .jv-thread .sd-action { font-size: 12px; }
  .jc-row { grid-template-columns: 13px minmax(0, 1.3fr) minmax(0, 1fr); gap: 10px; padding: 7px 0; font-size: 13px; }
  .jc-what { display: none; }
  .jc-cdot, .jc-dot { width: 13px; height: 13px; }
  .journey-on .jv-cat { padding: 0 12px; }
  .jc-selbar { padding: 8px 0 10px; font-size: 12.5px; }
  .jv-dlg { padding: 16px; }
  .journey-on .jv-toast { font-size: 12.5px; }
  .journey-on .j-workspace { width: 94%; padding: 14px; }
  .journey-on .j-collection { padding: 12px 14px; }
  .j-workspace .ha-q { font-size: 13px; padding: 8px 11px; margin-bottom: 8px; }
  .j-workspace .sd-steps { font-size: 11.5px; line-height: 16px; margin-bottom: 6px; }
  .jw-a { font-size: 14px; margin-bottom: 8px; }
  .jc-list li { padding: 6px 0; font-size: 13.5px; }
  .journey-on .j-collection.full .jc-list li { grid-template-columns: 13px minmax(0, 1.3fr) minmax(0, 1fr); gap: 10px; }
  .journey-on .j-collection.full .jcl-what, .jcol-table .jt-what, .jcol-table th:nth-child(4), .jcol-table td:nth-child(4) { display: none; }
  .journey-on .jcol-main, .journey-on .j-collection .hc-head { padding-left: 14px; padding-right: 14px; }
  .journey-on .jcol-feed { left: 14px; right: 14px; }
  .jcol-feed li { grid-template-columns: 62px minmax(0, 1fr); font-size: 13px; padding: 8px 0; }
  .jf-when { grid-row: auto; }
  .jf-kind { grid-row: auto; grid-column: 2; }
  .jf-what, .jf-src { grid-column: 2; }
  .journey-on .jcol-sheet { padding: 12px 14px 62px; gap: 8px; }
  .jcol-sheet .ha-q { font-size: 13px; padding: 8px 11px; }
  .jcol-table { font-size: 12px; }
  .jcol-sum { font-size: 13.5px; }
  .journey-on .jcol-ask { margin: 6px 10px 10px; font-size: 13px; }
  .journey-on .j-card { top: auto; left: 10px; right: 10px; bottom: 10px; width: auto; max-height: 86%; padding: 14px; gap: 9px; }
  .jk-desc { font-size: 13.5px; }
  .jk-facts dd { font-size: 13.5px; }
  .jw-body { grid-template-columns: minmax(0, 1fr); }
  .jw-rail { display: none; }
  .jw-head { flex-wrap: wrap; align-items: flex-start; padding: 12px 14px 10px; }
  .jw-content { padding: 12px 14px 40px; }
  .jw-sec li { font-size: 13.5px; }
}
@media (max-width: 640px) {
  .sub-hero { padding-top: 120px; padding-bottom: 64px; }
  .sub-title { font-size: 40px; }
  .hiw-stage, .hiw-band, .about-story, .about-team { padding-block: 88px; }
  .hiw-copy p:not(.hiw-num) { font-size: 17px; }
  .hiw-visual.person-graph { aspect-ratio: 4 / 5; }
  .ha-rows li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .hiw-cta { margin-top: 48px; flex-direction: column; align-items: flex-start; }
  .hiw-cta p { font-size: 16px; }
  .su { padding-top: 116px; }
}

/* Small windows (small-screen audit, 2026-11-09: https://claude.ai/artifact/5Y2G6eE11UK33AknRiHxW8). The held sections
   fit the window's height as well as its width. The cards deck sizes its text by height too and its graph shrinks to fit
   the card (js/people-v2.js then zooms a card's text down if it still doesn't fit); How it works' panel stays inside the
   space under the launch bar, and on short phones its text above is tighter and its rows, not its button, give way.
   On 1440 x 900 and taller phones nothing changes. */
.deck-on .person { padding: clamp(18px, min(4vw, 5.5vh), 48px); }
.deck-on .person-inner { height: 100%; grid-template-rows: minmax(0, 1fr); }
.deck-on .person-graph { max-height: 100%; }
.deck-on .person-graph .pg-title, .deck-on .person-graph .sg-legend { zoom: var(--gs, 1); }
.deck-on .person-who { font-size: clamp(28px, min(4.6vw, 7vh), 62px); }
.deck-on .person-job { margin-top: clamp(6px, 2vh, 16px); font-size: clamp(14px, min(1.7vw, 2.6vh), 22px); }
.deck-on .person-q { margin-top: clamp(10px, 3.4vh, 28px); font-size: clamp(13.5px, 2.4vh, 17px); }
.deck-on .person-a { margin-top: clamp(8px, 2vh, 16px); font-size: clamp(14px, 2.7vh, 19px); }
.journey-on .jc-rows { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.journey-on .jc-selbar { flex: none; }
@media (min-width: 761px) and (max-height: 820px) {
  .deck-on .people-stage { gap: 14px; padding-bottom: 14px; }
  .deck-on .people-title { font-size: clamp(30px, 6.5vh, 66px); }
  .deck-on .people-tabs { margin-top: 4px; }
}
@media (max-width: 760px) {
  .deck-on .person { padding: clamp(14px, 2.8vh, 22px) 20px; }
  .deck-on .person-who { font-size: clamp(26px, 5vh, 34px); }
  .deck-on .person-job { margin-top: clamp(4px, 1vh, 8px); font-size: clamp(14px, 2.2vh, 16px); }
  .deck-on .person-q { margin-top: clamp(10px, 2vh, 16px); font-size: clamp(13px, 2.1vh, 14.5px); }
  .deck-on .person-a { margin-top: clamp(6px, 1.4vh, 10px); font-size: clamp(13.5px, 2.3vh, 15.5px); }
  .deck-on .person-graph { min-height: clamp(100px, 16vh, 180px); }
}
@media (max-width: 760px) and (max-height: 720px) {
  .deck-on .person-graph .sg-legend { display: none; }
  .deck-on .person-graph { min-height: clamp(70px, 11vh, 100px); }
  .journey-on .j-copy { min-height: 196px; }
  .journey-on .j-text { top: 38px; }
  .journey-on .j-text h2 { font-size: 22px; }
  .journey-on .j-text p:not(.hiw-num) { font-size: 13.5px; }
  .journey-on .j-visual { min-height: 0; }
}

/* The launch banner (the user, 2026-11-10: "go back to it being a headline banner"). One slim line across the very top of
   every page, always there; it replaced the hero's button and note and the floating bar under the nav. The page and
   everything placed from the top of the window (the nav, the clear band under it in js/topfade-v2.js, the held sections
   and the hero's resting point in js/hero-scroll-v2.js) sit lower by its height, --banner-h. */
body { --banner-h: 0px; }
body.has-banner { --banner-h: 40px; padding-top: var(--banner-h); }
.top-banner,
.has-pagegraph body > .top-banner:not(.page-graph):not(.sticky-bar) { position: fixed; z-index: 21; top: 0; left: 0; right: 0; }
.top-banner { height: var(--banner-h); display: flex; align-items: center; justify-content: center; gap: 14px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: var(--navy); font-family: var(--sans); font-size: 13.5px; line-height: 18px; }
.top-banner p { margin: 0; min-width: 0; color: rgba(255, 255, 255, 0.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-banner p b { color: #ffffff; font-weight: 600; }
.top-banner .tb-short { display: none; }
.top-banner a { flex: none; color: var(--navy); background: #ffffff; border-radius: 999px; padding: 5px 13px; font-size: 13px; line-height: 18px; font-weight: 600; text-decoration: none; transition: background 0.2s ease; }
.top-banner a:hover { background: var(--brand-tint); color: var(--navy); }
.top-banner a:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
body.has-banner > .pill-nav,
.has-pagegraph body.has-banner > .pill-nav:not(.page-graph):not(.sticky-bar) { top: var(--banner-h); }
.v2 section[id] { scroll-margin-top: calc(112px + var(--banner-h)); }
.hero-scroll .v2-hero .hero-copy { top: calc(112px + var(--banner-h)); }
.deck-on body.has-banner .people-stage { padding-top: calc(132px + var(--banner-h)); }
.journey-on body.has-banner .j-stage { padding-top: calc(124px + var(--banner-h)); }
.hero-scroll body.has-banner .v2-hero .syndy-demo {
  height: calc(var(--h0) + (min(100vh - 150px - var(--banner-h), 760px) - var(--h0)) * var(--p));
  height: calc(var(--h0) + (min(100svh - 150px - var(--banner-h), 760px) - var(--h0)) * var(--p)); }
@media (min-width: 761px) {
  .journey-on body.has-banner .j-visual { max-height: calc(100vh - 164px - var(--banner-h)); max-height: calc(100svh - 164px - var(--banner-h)); }
}
/* The hero fits a shorter window: less room above, a smaller heading, and Syndiza's panel sized to what is left
   (js/hero-scroll-v2.js sets --h0), so the whole panel shows when the page opens. */
.v2-hero h1 { margin-top: 0; }
@media (min-width: 641px) and (max-height: 820px) {
  .v2-hero { padding-top: clamp(128px, 18vh, 152px); }
  .v2-hero h1 { font-size: clamp(52px, min(8vw, 12vh), 112px); }
  .v2-hero .syndy-demo { margin-top: clamp(24px, 5vh, 72px); }
}
@media (max-width: 960px) {
  .top-banner .tb-long { display: none; }
  .top-banner .tb-short { display: inline; }
}
@media (max-width: 760px) {
  .deck-on body.has-banner .people-stage { padding-top: calc(112px + var(--banner-h)); }
  .journey-on body.has-banner .j-stage { padding-top: calc(104px + var(--banner-h)); }
}
@media (max-width: 640px) {
  body.has-banner { --banner-h: 46px; }
  .top-banner { gap: 10px; font-size: 11.5px; line-height: 15px; }
  .top-banner p { white-space: normal; }
  .top-banner a { font-size: 12px; padding: 5px 11px; }
  .v2-hero { padding-top: 128px; }
  .v2-hero .syndy-demo { margin-top: clamp(24px, 4vh, 48px); }
  .hero-scroll .v2-hero .hero-copy { top: calc(88px + var(--banner-h)); }
}

/* The spinning card (the user, 2026-11-10: "Keep the line at the top saying say hello to syndiza all the way to the end
   of the carousel scroll. Dont enlarge the cards during the scroll ... keep one card spinning all the way through").
   js/hero-scroll-v2.js wraps the heading and the card in .hero-stage and holds it at --stage-top, where it opens, for
   four screens (a .hero-hold spacer after it); js/hero-chat.js turns the one card through the four conversations. The
   card keeps its opening size (--h0; the rise is off, so --p stays 0). */
html.hero-spin .v2-hero .hero-stage { position: sticky; top: var(--stage-top, 0px); z-index: 1; display: flex; flex-direction: column; align-items: center; width: 100%; }
html.hero-spin .v2-hero .hero-copy { position: relative; top: auto; opacity: 1; transform: none; }
html.hero-spin .v2-hero .syndy-demo { position: relative; }
html.hero-spin .v2-hero .sd-flip { animation: none; }
html.hero-spin .hero-hold { flex: none; width: 100%; }

/* The hero heading (the user, 2026-11-10): "Ask Syndiza about sectors / companies / investments / people", the last word
   following the conversation on the card (js/hero-chat.js setTopic) and fading in as it changes. One line on a laptop
   or desktop; on a phone the topic word takes its own line. */
.v2-hero h1 { font-size: clamp(36px, 4.6vw, 76px); }
.v2-hero h1 .hero-topic { display: inline-block; color: var(--brand); }
@media (min-width: 641px) { .v2-hero h1 .hero-topic { text-align: left; } }
.v2-hero h1 .hero-topic.swap { animation: topic-in 0.35s ease both; }
@keyframes topic-in { from { opacity: 0; transform: translateY(0.18em); } to { opacity: 1; transform: none; } }
@media (min-width: 641px) and (max-height: 820px) { .v2-hero h1 { font-size: clamp(36px, min(4.6vw, 9vh), 76px); } }
@media (max-width: 640px) {
  .v2-hero h1 { font-size: clamp(30px, 9.5vw, 40px); line-height: 1.08; }
  .v2-hero h1 .hero-topic { display: block; }
}
@media (prefers-reduced-motion: reduce) { .v2-hero h1 .hero-topic.swap { animation: none; } }