/* blue for headings and labels, grey for running text */
:root {
  color-scheme: light;
  --paper: #F5F5F5;
  --paper-2: #EAEAEA;
  --ink: #4757B3;
  --ink-soft: #4A97C1;
  --text: #323232;
  --rule: rgba(71, 87, 179, .26);
  --duo: #4757B3;
  --sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: var(--sans);
  --gutter: clamp(16px, 3.2vw, 44px);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background-color: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* inverted per element: script.js sets --sel-bg to the text color and --sel-fg to the background behind it */
::selection { background: var(--sel-bg, var(--ink)); color: var(--sel-fg, var(--paper)); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
img, canvas, svg { max-width: 100%; }

.label {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase; line-height: 1.45;
}
.display {
  font-family: var(--sans); font-weight: 800;
  text-transform: uppercase; line-height: .84; letter-spacing: -.045em;
  margin: 0;
}
.soft { color: var(--text); }
/* headings, labels and the menu stay blue */
h1, h2, h3, .display, .quote, .label, .bar a, .name { color: var(--ink); }
#team h2.display { color: #071724; }
.label.soft { color: var(--text); }
p { margin: 0; }

/* ---------- bar ---------- */
/* sits at the very top of the page over the hero's right column, and scrolls away with it */
.bar {
  display: flex; justify-content: flex-end; align-items: baseline; gap: 16px;
  position: absolute; top: 0; left: 0; right: 0; z-index: 15;
  padding: calc(clamp(16px, 1.3vw, 24px) + env(safe-area-inset-top, 0px)) clamp(24px, 3vw, 48px) 16px;
}
.bar nav { display: flex; gap: clamp(14px, 1.4vw, 24px); flex-wrap: wrap; }
.bar a {
  text-decoration: none;
  font-size: clamp(16px, 1.3vw, 23px); font-weight: 600; letter-spacing: -.01em;
  color: rgba(245, 245, 245, .78); /* light, since the bar sits over the navy hero */
  transition: color .2s ease;
}
.bar a:hover { color: #fff; }
.brand { font-weight: 500; }
/* the brand and the menu button only appear once the links fold away on a phone */
.bar-brand, .menu-btn { display: none; }

/* ---------- hero: brain card left, tagline right, the name running across the bottom ---------- */
.hero {
  --pad: clamp(16px, 1.3vw, 24px);
  position: relative;
  display: grid; grid-template-columns: 48% 1fr;
  height: clamp(600px, 100vh, 1080px);
  padding: var(--pad) var(--pad) 0; /* no bottom padding: the scan sits right on the hero's lower edge */
  overflow: hidden;
  background: #0A1B2F; /* the scan's own navy */
}
/* with the colour flood running (script.js), the page below the hero starts navy too: a fixed navy sheet behind
   everything, faded out by opacity so the switch never has to repaint the page */
.flood-layer { position: fixed; inset: 0; z-index: -1; background: #0A1B2F; pointer-events: none; will-change: opacity; }
/* the scan sits whole in the card; the card takes the scan's own navy so the edges disappear */
.hero-card { position: relative; margin: 0; border-radius: 14px; overflow: hidden; background: #0A1B2F; }
.hero-card .hero-scan { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
/* the logo is white, so it lives on the card, which stays navy whichever way the hero is showing */
.hero-logo {
  position: absolute; z-index: 2;
  top: clamp(14px, 1.6vw, 28px); left: clamp(14px, 1.6vw, 28px);
  display: block; width: auto; height: clamp(44px, 4vw, 72px);
}

/* the tagline is the hero's only text: set large, flush left, resting at the foot of the column level with the scan */
.hero-side {
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: 0 clamp(8px, 2vw, 40px) clamp(36px, 6vh, 88px) clamp(28px, 4.6vw, 96px);
}
.hero-tag {
  position: relative; margin: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  font-size: clamp(46px, 6.4vw, 124px); font-weight: 800; line-height: .86; letter-spacing: -.05em;
  text-transform: uppercase; color: var(--paper);
}
/* the answer, "measured.", in the serif italic, larger, as the line the other two lead up to */
.hero-tag .line--accent {
  margin-top: .06em;
  font-family: "EB Garamond", Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400;
  font-size: 1.36em; line-height: .9; letter-spacing: -.025em; text-transform: none;
}

/* hover: the letters nearest the cursor brighten and thicken, fading off over the next few.
   script.js splits each line into .ch letters and sets --h on each, 0 (resting) to 1 (under the cursor) */
.hero-tag .ch {
  --h: 0;
  cursor: pointer;
  font-weight: calc(600 + 300 * var(--h));
  color: color-mix(in srgb, var(--paper) calc(38% + 62% * var(--h)), transparent);
}
.hero-tag .line--accent .ch { font-weight: calc(400 + 350 * var(--h)); }
/* no cursor to follow on touch screens: show the tagline at full strength */
@media (hover: none) { .hero-tag .ch { --h: 1; } }


/* ---------- sections ---------- */
main > section { padding: clamp(72px, 10vw, 140px) var(--gutter) 0; }
h2.display { font-size: clamp(44px, 7.4vw, 120px); max-width: 16ch; text-wrap: balance; margin-bottom: clamp(28px, 4vw, 48px); }
h3 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; margin: 0 0 8px; }
.lede { font-size: clamp(22px, 2.5vw, 32px); line-height: 1.22; font-weight: 500; letter-spacing: -.015em; max-width: 30ch; text-wrap: pretty; }
.body { max-width: 62ch; }
.cols { display: grid; gap: clamp(22px, 3vw, 48px); }
.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.unit { border-top: 1px solid var(--rule); padding-top: 14px; }
.unit p { color: var(--text); }

/* problem */
.stat { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 24px; align-items: end; }
.stat .num { font-size: clamp(110px, 17vw, 260px); }
.stat p { max-width: 30ch; padding-bottom: .6em; }
.triad { display: flex; gap: 10px 22px; flex-wrap: wrap; margin-top: 28px; font-weight: 700; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.02em; }
.triad span + span::before { content: "·"; margin-right: 22px; color: var(--ink-soft); }
.persist { list-style: none; margin: 0; padding: 0; }
.persist li { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.persist li:first-child { border-top: 1px solid var(--rule); }

/* instrument */
.pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); }
.pillars div { padding: 18px 18px 22px 0; }
.pillars div + div { border-left: 1px solid var(--rule); padding-left: 18px; }
.pillars strong { display: block; font-size: clamp(20px, 2vw, 26px); letter-spacing: -.02em; line-height: 1.1; margin-bottom: 10px; }
/* the charcoal band: four words beside the brain's pathways, then one line in italic */
.measure-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 64px); align-items: center;
  margin-top: clamp(56px, 8vw, 110px);
  /* a dark band edge to edge, the same grey as the picture's ground */
  margin-inline: calc(-1 * var(--gutter)); padding: clamp(28px, 3.5vw, 52px) var(--gutter);
  background: #323232;
}
/* the words stand flush left at the top of the band, the italic line settles at the bottom, level with the foot of the brain */
.convene {
  --fs: clamp(48px, 6.2vw, 100px);
  align-self: stretch;
  display: flex; flex-direction: column; justify-content: space-between; gap: clamp(28px, 3vw, 48px);
  padding-block: clamp(4px, 1vw, 16px);
  padding-left: clamp(0px, 4vw, 80px);
}
.convene-words {
  margin: 0;
  font-size: var(--fs); font-weight: 800; line-height: .86; letter-spacing: -.045em;
  text-transform: uppercase; color: #F5F5F5;
}
/* each word rises from behind its own mask, a beat apart, so they land almost together */
.convene-words .w { display: block; overflow: hidden; padding-bottom: .22em; margin-bottom: -.22em; }
/* all four words are set in the italic serif */
.convene-words .w > span {
  font-family: "EB Garamond", Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400;
  font-size: 1.16em; line-height: 1; letter-spacing: -.01em; text-transform: none;
}
.convene-words .w > span { display: block; transition: transform 1s cubic-bezier(.19, 1, .22, 1); }
.convene-words .w:nth-child(2) > span { transition-delay: .07s; }
.convene-words .w:nth-child(3) > span { transition-delay: .14s; }
.convene-words .w:nth-child(4) > span { transition-delay: .21s; }
/* the same italic serif as the hero's captions */
.convene-line {
  margin: 0; max-width: 24ch;
  font-family: "EB Garamond", Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400;
  font-size: clamp(22px, 2.2vw, 34px); line-height: 1.2; color: rgba(245, 245, 245, .72); text-wrap: balance;
  transition: opacity .9s ease .45s, transform 1.1s cubic-bezier(.19, 1, .22, 1) .45s;
}
.convene-line::before {
  content: ""; display: block; width: 56px; height: 1px; margin-bottom: clamp(14px, 1.4vw, 20px);
  background: rgba(245, 245, 245, .4); transform-origin: left center;
  transition: transform .9s cubic-bezier(.19, 1, .22, 1) .35s;
}
/* script.js arms these before the band scrolls in; without it they simply show */
.convene.armed:not(.is-in) .w > span { transform: translateY(105%); }
.convene.armed:not(.is-in) .convene-line { opacity: 0; transform: translateY(12px); }
.convene.armed:not(.is-in) .convene-line::before { transform: scaleX(0); }
.measure-art { margin: 0; aspect-ratio: 2000 / 1455; overflow: hidden; background: #323232; translate: clamp(-80px, -4vw, 0px) 0; }
.measure-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .measure-row { grid-template-columns: minmax(0, 1fr); } .measure-art { translate: none; } }

/* ---------- the voiceprint: one ink line, the voice, held still behind the page while the beats scroll past (script.js) ---------- */
main > section.vp { padding: 0; }
/* clip, not hidden: it keeps the stage sticky while stopping it from hanging past the section's end into the gap above the roadmap */
/* the field sits on a slightly darker paper than the rest of the page */
.vp { position: relative; overflow: clip; background: var(--paper-2); }
/* the line's stage: pinned to the screen for the whole section, and taking no room of its own */
.vp-stage { position: sticky; top: 0; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh; pointer-events: none; display: none; }
.vp.live .vp-stage { display: block; }
.vp-field { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }

/* each beat has a screen of its own; the line runs through the gap between the words and the note as it passes the middle */
.vp-beat {
  position: relative; z-index: 1;
  min-height: 100vh; min-height: 100svh; padding: 12vh var(--gutter);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.vp-kicker { margin-bottom: 14px; }
.vp-say {
  margin: 0 auto; max-width: 15ch;
  font-size: clamp(38px, 6.2vw, 108px); font-weight: 700; line-height: .98; letter-spacing: -.045em; text-wrap: balance;
}
/* the answer word of each line in the hero's italic serif */
.vp-say em {
  font-family: "EB Garamond", Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400;
  font-size: 1.14em; letter-spacing: -.02em;
}
.vp-note { margin: 14vh auto 0; max-width: 40ch; font-size: clamp(14px, 1.05vw, 17px); line-height: 1.5; color: var(--text); text-wrap: balance; }

/* the answer under the last line: a statement of its own, a size down from the line above it */
.vp-answer {
  margin-top: 12vh; max-width: none;
  font-size: clamp(28px, 3.6vw, 64px); font-weight: 700; line-height: 1; letter-spacing: -.04em; color: var(--ink); text-wrap: balance;
}
.vp-answer em { font-family: "EB Garamond", Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; font-size: 1.14em; letter-spacing: -.02em; }

/* a longer line runs wider, so it sits in fewer rows */
.vp-say--wide { max-width: 24ch; }

/* the two rows that pass each other, each held on one line */
.vp-row { display: block; white-space: nowrap; }
.vp-say:has(.vp-row) { max-width: none; }

/* the charcoal band crosses over the wave field, and the field ends there: the data chapter after it sits on plain paper */
.vp-band { position: relative; z-index: 1; padding: 0 var(--gutter); }

/* ---------- after the band: the old version's sections, on paper, spaced as they were ---------- */
.vd { position: relative; z-index: 1; background: var(--paper); }
.vd-old { padding: clamp(72px, 10vw, 140px) var(--gutter) 0; }
/* the instrument: a lead on the left, a short note on the right */
/* the signal: a wide strip where the noise falls away from the voice and the voice becomes a graph */
.signal { margin: clamp(40px, 5vw, 80px) 0 0; }
.signal-cv { display: block; width: 100%; height: clamp(180px, 22vw, 340px); max-width: none; }
.instrument { align-items: start; margin-top: 0; }
/* with no heading above it, the lead carries the section */
.instrument .lede { max-width: 24ch; font-size: clamp(28px, 3.2vw, 52px); line-height: 1.12; letter-spacing: -.025em; color: var(--ink); }
.instrument-how { max-width: 48ch; font-size: clamp(16px, 1.15vw, 20px); line-height: 1.65; color: var(--text); text-wrap: pretty; }
.trial .display { color: var(--paper); }
/* trial */
/* runs edge to edge: pulls out past the section's side gutter, then pads the text back in line with the page */
.trial { margin-top: clamp(40px, 6vw, 72px); margin-inline: calc(-1 * var(--gutter)); background: var(--ink); color: var(--paper); padding: clamp(40px, 5vw, 72px) var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 20px 40px; }
.trial .display { font-size: clamp(36px, 5vw, 76px); }
.trial p { max-width: 58ch; }

/* ---------- the written sections: motion and response layered on the layout above (script.js) ---------- */
/* headlines: each word sits behind a mask it rises out of, and the mask comes off once it has landed */
.split-head .wd { display: inline-block; clip-path: inset(-.25em -.3em -.16em -.3em); }
.split-head.risen .wd { clip-path: none; }
.split-head .wd-in { display: inline-block; }

/* body copy: one clipping box per line, and the text floats up from the foot of its own line as it scrolls in */
.line-mask { display: block; overflow: hidden; }
.line-mask > span { display: block; transform: translate3d(0, var(--hidden, 110%), 0); will-change: transform; }

/* a line of ink runs along a rule and off the far end; hovering draws it back in and holds it */
@keyframes rule-sweep {
  0% { transform: scaleX(0); transform-origin: left; }
  50% { transform: scaleX(1); transform-origin: left; }
  50.1% { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}
#why .unit { position: relative; isolation: isolate; }
#why .unit::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: var(--ink); transform: scaleX(0); transform-origin: right;
  transition: transform .7s cubic-bezier(.65, 0, .35, 1);
}
#why .unit.swept::before { animation: rule-sweep 1.4s cubic-bezier(.65, 0, .35, 1) var(--d, 0s) backwards; }
/* a soft light that follows the pointer across the column */
#why .unit::after {
  content: ""; position: absolute; inset: 0 -16px -16px; z-index: -1; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(71, 87, 179, .09), transparent 70%);
  opacity: 0; transition: opacity .4s ease;
}
#why .unit h3 { transition: transform .5s cubic-bezier(.19, 1, .22, 1); }

#progress .persist li { position: relative; transition: padding-left .5s cubic-bezier(.19, 1, .22, 1), color .3s ease; }
#progress .persist li::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--ink); transform: scaleX(0); transform-origin: right;
  transition: transform .7s cubic-bezier(.65, 0, .35, 1);
}
#progress .persist li.swept::after { animation: rule-sweep 1.2s cubic-bezier(.65, 0, .35, 1) var(--d, 0s) backwards; }
#progress .persist .count { font-variant-numeric: tabular-nums; }

@media (hover: hover) {
  #why .unit:hover::before { transform: scaleX(1); transform-origin: left; }
  #why .unit:hover::after { opacity: 1; }
  #why .unit:hover h3 { transform: translateX(6px); }
  #progress .persist li:hover { padding-left: 12px; color: var(--ink); }
  #progress .persist li:hover::after { transform: scaleX(1); transform-origin: left; }
}


/* the pieces script.js moves */
.vp-w, .vp-ch { display: inline-block; }
.vp-w { transform-origin: 50% 100%; }
.vp-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }

/* tables */
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th { text-align: left; font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; padding: 10px 16px 10px 0; border-bottom: 2px solid var(--ink); vertical-align: bottom; }
td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
td.k { font-weight: 700; white-space: nowrap; }
td.r, th.r { text-align: right; padding-right: 0; }
.room td:last-child { font-weight: 600; }
.note { margin-top: 18px; max-width: 70ch; font-size: 15px; }

/* chart */
.versus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); margin-top: clamp(36px, 5vw, 56px); }
.versus figure { margin: 0; border-top: 2px solid var(--ink); padding-top: 12px; }
.versus svg { display: block; width: 100%; height: auto; margin: 10px 0; }
.versus figcaption { font-weight: 600; letter-spacing: -.01em; }
.chart-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; margin-top: 16px; }
.btn {
  font-family: var(--mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--paper); background: var(--ink); border: 0; padding: 10px 14px; cursor: pointer;
}
.btn:hover { background: var(--ink-soft); }

/* market */
.big-figure { font-size: clamp(64px, 11vw, 176px); }
.som { display: grid; gap: 14px; margin-top: 12px; }
.som-row { display: grid; grid-template-columns: 11ch minmax(0, 1fr); gap: 16px; align-items: center; }
.som-track { position: relative; height: 34px; }
.som-fill { height: 100%; background: var(--ink); background-image: radial-gradient(var(--paper) 22%, transparent 24%); background-size: 6px 6px; }
.som-row:nth-child(2) .som-fill { background-size: 5px 5px; }
.som-row:nth-child(3) .som-fill { background-image: none; }
.som-val { position: absolute; top: 50%; transform: translateY(-50%); padding-left: 10px; font-weight: 700; white-space: nowrap; }
.som-axis { display: grid; grid-template-columns: 11ch minmax(0, 1fr); gap: 16px; }
.som-axis div { display: flex; justify-content: space-between; border-top: 1px solid var(--rule); padding-top: 6px; }

.path { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.path div { padding: 14px 14px 18px 0; }
.path div + div { padding-left: 14px; border-left: 1px solid var(--rule); }
.path strong { display: block; font-size: 22px; letter-spacing: -.02em; line-height: 1.1; margin: 8px 0 6px; }
.path div:first-child { background: var(--ink); color: var(--paper); padding-left: 14px; }
.path div:first-child .soft { color: var(--paper); opacity: .8; }

/* plan */
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.step { padding: 16px 14px 20px 0; position: relative; }
.step + .step { padding-left: 14px; border-left: 1px solid var(--rule); }
.step .n { font-size: clamp(48px, 6vw, 92px); display: block; margin-bottom: 14px; }
.step strong { display: block; font-size: 19px; letter-spacing: -.01em; line-height: 1.15; margin-bottom: 8px; }
.step.done .n { color: var(--ink-soft); }
.step.here { background: var(--ink); color: var(--paper); padding-left: 14px; }
.step.here .label { color: var(--paper); }
.products { margin-top: clamp(48px, 7vw, 88px); }
.price { font-weight: 700; margin-top: 10px; display: block; }

.tiers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.tier { padding: 14px 14px 20px 0; }
.tier + .tier { padding-left: 14px; border-left: 1px solid var(--rule); }
.tier strong { display: block; font-size: 19px; letter-spacing: -.01em; line-height: 1.15; margin: 6px 0 8px; }
.tier p { font-size: 14px; color: var(--ink-soft); }
.tier .bar-t { height: 8px; background: var(--ink); margin-top: 14px; }

/* close */
.team { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 64px); }
.person { font-size: clamp(26px, 3vw, 40px); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }

/* team */
.crew-head { margin: clamp(40px, 6vw, 72px) 0 20px; font-size: clamp(16px, 1.5vw, 22px); letter-spacing: .08em; color: #071724; }
.crew-head:first-of-type { margin-top: 0; }
.crew-head.center { text-align: center; }
.photo {
  position: relative; overflow: hidden; aspect-ratio: 1 / 1; max-width: 100%;
  background-color: var(--paper-2);
}
.photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;
}
.photo .ph { position: absolute; left: 10px; bottom: 10px; background: var(--paper); color: var(--ink); padding: 2px 6px; }
.name { font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; letter-spacing: -.025em; line-height: 1.05; margin: 14px 0 6px; }
.li { display: inline-block; margin-top: 10px; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.li:hover { color: var(--ink-soft); }
/* founders: two cards side by side -- photo left, name set large on the right */
.founders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.founder {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 32px);
  padding: clamp(10px, 1vw, 14px);
  border-radius: 16px; background: var(--paper-2);
}
.founder-photo { border-radius: 10px; }
.founder-photo img { transition: transform .8s cubic-bezier(.19, 1, .22, 1); }
.founder:hover .founder-photo img { transform: scale(1.05); }
.founder-text {
  display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
  padding: clamp(6px, 1vw, 14px) clamp(4px, .8vw, 10px) clamp(6px, 1vw, 14px) 0;
}
.founder-role { margin: 0; }
.founder-name {
  margin: auto 0 0; display: flex; flex-direction: column;
  font-size: clamp(30px, 3.6vw, 64px); font-weight: 800; line-height: .88; letter-spacing: -.045em;
  text-transform: uppercase; color: var(--ink);
  overflow-wrap: anywhere;
}
.founder-link {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; border: 1px solid var(--ink); border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  color: var(--ink);
  transition: background-color .25s ease, color .25s ease;
}
.founder-link:hover { background: var(--ink); color: var(--paper); }
.founder-link span { transition: transform .25s ease; }
.founder-link:hover span { transform: translate(2px, -2px); }
.advisors { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.advisors .name { font-size: 20px; }
/* advisors on hover: the photo eases in and a blue LinkedIn band rises over its foot */
.advisors .member { position: relative; }
.advisors .photo { border-radius: 10px; }
.advisors .photo img { transition: transform .7s cubic-bezier(.19, 1, .22, 1), filter .5s ease; }
.advisors .photo::after {
  content: "LinkedIn ↗";
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 12px 14px;
  background: var(--ink); color: var(--paper);
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  transform: translateY(101%);
  transition: transform .45s cubic-bezier(.19, 1, .22, 1);
}
.advisors .member.scholar .photo::after { content: "Google Scholar ↗"; }
.advisors .member:hover .photo img { transform: scale(1.08); filter: saturate(1.1); }
.advisors .member:hover .photo::after { transform: none; }
.advisors .member:hover .name { color: var(--ink-soft); }
.advisors .name { transition: color .25s ease; }
/* the whole card opens their LinkedIn */
.advisors .li::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.advisors .li { display: block; margin: 0; border: 0; padding: 0; }
/* outline only when tabbing with the keyboard, never after a mouse click */
.advisors .member:has(.li:focus-visible) { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 10px; }
.advisors .li:focus-visible { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (hover: none) { .advisors .photo::after { display: none; } }
.logo-strip {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px clamp(20px, 3vw, 40px);
  padding: clamp(20px, 3vw, 32px) 0;
}
.logo { text-decoration: none; position: relative; height: clamp(56px, 6vw, 84px); display: flex; align-items: center; justify-content: center; min-width: 120px; }
.logo img { height: 100%; width: auto; max-width: 200px; object-fit: contain; }
.logo .ph { border: 1px dashed var(--rule); padding: 10px 18px; white-space: nowrap; }
/* the name only appears while the pointer is on the mark (from the Header draft) */
.logo-strip { padding-bottom: clamp(36px, 4vw, 48px); }
.logo-name {
  position: absolute; top: calc(100% + 10px); left: 50%;
  width: max-content; max-width: 180px;
  font-size: clamp(10px, .8vw, 13px); letter-spacing: .08em; text-align: center;
  color: var(--text);
  opacity: 0; transform: translate(-50%, -4px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.logo:hover .logo-name, .logo:focus-visible .logo-name { opacity: 1; transform: translate(-50%, 0); }
[hidden] { display: none !important; }

/* ---------- narrow ---------- */
@media (max-width: 900px) {
  .c4, .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillars div:nth-child(3) { border-left: 0; padding-left: 0; }
  .pillars div { border-top: 1px solid var(--rule); }
  .steps, .path, .tiers { grid-template-columns: minmax(0, 1fr); }
  .step + .step, .path div + div, .tier + .tier { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; }
  .step.here, .path div:first-child { padding-left: 14px; }
  .step { display: grid; grid-template-columns: 5ch minmax(0, 1fr); gap: 0 16px; align-items: start; }
  .step .n { grid-row: span 3; margin: 0; }
}
@media (max-width: 1100px) {
  .founders { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
  /* one card per row leaves the name room to be set larger */
  .founder-name { font-size: clamp(30px, 6vw, 56px); }
}
/* phones, and tablets held upright: the brain on top, the tagline under it */
@media (max-width: 760px), (max-width: 1100px) and (max-aspect-ratio: 4/5) {
  .hero {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: 54vh auto; grid-template-rows: 54svh auto;
    height: auto; padding: 64px 12px 56px; gap: 32px;
  }
  .hero-side { padding: 0 8px; }
  .hero-tag { font-size: clamp(44px, 13vw, 96px); }
}
@media (max-width: 760px) {
  .c2, .c3, .team, .trial, .versus { grid-template-columns: minmax(0, 1fr); }
  .stat { grid-template-columns: minmax(0, 1fr); }
  .som-row, .som-axis { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .som-axis span:first-child { display: none; }
}
@media (max-width: 1200px) {
  .advisors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .advisors { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .advisors .member { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .advisors .name { margin-top: 0; }
  .advisors .photo .ph { display: none; }
}
@media (max-width: 480px) {
  .c4, .pillars { grid-template-columns: minmax(0, 1fr); }
  .pillars div + div { border-left: 0; padding-left: 0; }
}

/* custom scroll pill, same as the Header draft; the native bar is hidden */
:root { --thumb: rgba(7, 23, 36, 0.3); --thumbhover: rgba(7, 23, 36, 0.75); }
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }
body { scrollbar-width: none; }
#scrollbar { position: fixed; top: 14px; bottom: 14px; right: 0; width: 12px; z-index: 20; pointer-events: none; }
#scrollthumb {
  position: absolute; top: 0; right: 4px; will-change: transform; width: 6px;
  background-color: var(--thumb); border-radius: 10px;
  pointer-events: auto; cursor: default; display: none;
}
#scrollthumb:hover, #scrollthumb.dragging { background-color: var(--thumbhover); }
#scrollbar.on-dark { --thumb: rgba(201, 201, 201, 0.45); --thumbhover: rgba(201, 201, 201, 0.8); }


/* ======================================================================
   contact footer, imported from website drafts/Header (style.css)
   ====================================================================== */

#communication, #communication *{ font-family: "Hanken Grotesk", sans-serif; }
#communication{ font-weight: 300; line-height: normal; }

/* CONTACT — a pale editorial card floating on the dark marbled texture: headline across the top,
   details and the form inside, a nav bar along the bottom edge */

#communication{
    position: relative;
    isolation: isolate;

    background-color: #0B0B0B;
}

/* the marbled texture, dimmed so the card reads as the lit thing on the page */
.commsbg{
    position: absolute;
    inset: 0;
    z-index: 0;

    background-image:
        linear-gradient(rgba(8, 8, 8, 0.30), rgba(8, 8, 8, 0.48)),
        url("images/contact-texture.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    pointer-events: none;
}

#commsbody{
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;
    justify-content: center;

    box-sizing: border-box;
    /* room at the bottom for the back-to-top button in the corner, under the card */
    padding: 80px 90px 84px;

    /* only as tall as the card needs, not a full screen like the other sections */
    min-height: 0;
}

/* the card itself */
.contactpanel{
    --accent: #2f6ca8;
    --ink: #0A0A0A;
    --card: #F4F3EF;
    --cardmuted: #6B6B66;
    --cardline: rgba(10, 10, 10, 0.16);

    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 980px;
    margin: 0 auto;

    box-sizing: border-box;
    padding: 22px 30px 0;

    background-color: var(--card);
    color: var(--ink);

    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45);

    opacity: 0;
    transform: translateY(40px);
}

#communication.inview .contactpanel{
    animation: contactsettle 1s cubic-bezier(0.19, 1, 0.22, 1) 0.15s forwards;
}

@keyframes contactsettle{
    to{
        opacity: 1;
        transform: none;
    }
}

/* the headline row: small index mark, the word, then the year stamp */
.cardhead{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 18px;
}


/* sized by script to fill the row between the index mark and the year */
.contactword{
    position: relative;

    width: max-content;
    margin: 0 auto 0 0;

    font-size: 12vw;
    font-weight: 800;
    line-height: 0.78;
    letter-spacing: -0.045em;
    text-transform: uppercase;
    white-space: nowrap;

    color: var(--ink);
    user-select: none;
}

/* each letter rises out of its own slot once the section comes into view */
.contactword .contactslot{
    display: inline-block;
    overflow: hidden;

    padding-top: 0.06em;
    margin-top: -0.06em;
}

.contactword .contactletter{
    display: inline-block;

    transform: translateY(105%);
}

#communication.inview .contactword .contactletter{
    animation: contactrise 1.1s cubic-bezier(0.19, 1, 0.22, 1) forwards;
    animation-delay: calc(var(--i) * 70ms + 150ms);
}

@keyframes contactrise{
    to{
        transform: none;
    }
}

/* details on the left, form on the right */
.cardbody{
    position: relative;

    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr);
    column-gap: 60px;

    margin-top: 26px;
    padding-bottom: 26px;
}

.cardmeta{
    display: flex;
    flex-direction: column;
    gap: 18px;

    transition: opacity 0.4s ease;
}

.metalabel{
    margin: 0 0 8px;

    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.6px;
    text-transform: uppercase;

    color: var(--cardmuted);
}

.metaline{
    margin: 0;

    font-size: 13px;
    font-weight: 300;
    line-height: 1.6;
    letter-spacing: 0.2px;

    color: var(--ink);
}

.metaline a{
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--cardline);

    transition: border-color 0.25s ease, color 0.25s ease;
}

.metaline a:hover{
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* the small frame the reference tucks into the corner */
.metashot{
    margin: auto 0 0;

    width: 140px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.metashot img{
    width: 100%;
    height: 100%;

    object-fit: cover;
    filter: grayscale(1) contrast(1.05);
}

.contacteyebrow{
    margin: 0;

    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.6px;
    text-transform: uppercase;

    color: var(--cardmuted);
}

.contactgrid{
    margin-top: 20px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 36px;
    row-gap: 14px;
}

.contactfield.wide, .contactconsent, .contactsendrow{
    grid-column: 1 / -1;
}

/* every field is a label sitting on its own rule, lifting once it has focus or content */
.contactfield{
    position: relative;

    display: block;
    padding-top: 16px;
}

.contactfield input, .contactfield textarea{
    display: block;
    width: 100%;
    box-sizing: border-box;

    margin: 0;
    padding: 4px 0 10px;

    border: 0;
    border-bottom: 1px solid var(--cardline);
    border-radius: 0;
    background: none;

    color: var(--ink);
    font-family: inherit;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: -0.2px;

    transition: border-color 0.25s ease;
}

.contactfield textarea{
    min-height: 76px;
    resize: none;

    line-height: 1.5;
}

.contactfield input:focus, .contactfield textarea:focus{
    outline: none;
    border-bottom-color: var(--ink);
}

.contactfieldlabel{
    position: absolute;
    left: 0;
    top: 22px;

    font-size: 16px;
    font-weight: 300;
    letter-spacing: -0.2px;

    color: var(--cardmuted);
    pointer-events: none;

    transition: top 0.22s ease, font-size 0.22s ease, color 0.22s ease, letter-spacing 0.22s ease;
}

.contactfield input:focus + .contactfieldlabel,
.contactfield input:not(:placeholder-shown) + .contactfieldlabel,
.contactfield textarea:focus + .contactfieldlabel,
.contactfield textarea:not(:placeholder-shown) + .contactfieldlabel{
    top: 0;

    font-size: 10px;
    letter-spacing: 1.6px;
    text-transform: uppercase;

    color: var(--cardmuted);
}

/* a field that was left empty on send */
.contactfield.missing input, .contactfield.missing textarea{
    border-bottom-color: #b4472f;
}

.contactfield.missing .contactfieldlabel{
    color: #b4472f;
}

.contactconsent{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;

    max-width: 46ch;

    font-size: 12px;
    font-weight: 300;
    line-height: 1.5;

    color: var(--cardmuted);
    cursor: pointer;
}

.contactconsent input{
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.contactbox{
    flex: none;

    width: 16px;
    height: 16px;
    margin-top: 1px;
    box-sizing: border-box;

    display: grid;
    place-items: center;

    border: 1px solid var(--cardmuted);
    border-radius: 2px;

    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.contactbox svg{
    width: 10px;
    height: 10px;

    fill: none;
    stroke: var(--card);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;

    stroke-dasharray: 20;
    stroke-dashoffset: 20;

    transition: stroke-dashoffset 0.25s ease 0.05s;
}

.contactconsent input:checked + .contactbox{
    background-color: var(--ink);
    border-color: var(--ink);
}

.contactconsent input:checked + .contactbox svg{
    stroke-dashoffset: 0;
}

.contactconsent input:focus-visible + .contactbox{
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}

.contactconsent.missing .contactbox{
    border-color: #b4472f;
}

.contactsendrow{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    margin-top: 2px;
    padding-top: 16px;

    border-top: 1px solid var(--cardline);
}

.contactstatus{
    margin: 0;

    font-size: 12px;
    font-weight: 300;

    color: var(--cardmuted);
}

/* a pill, outlined in ink, that fills on hover */
.contactsend{
    flex: none;
    margin: 0;
    padding: 8px 20px;

    border: 1px solid var(--ink);
    border-radius: 999px;
    background: none;
    cursor: pointer;

    font-family: inherit;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;

    color: var(--ink);

    transition: background-color 0.25s ease, color 0.25s ease;
}

.contactsend:hover{
    background-color: var(--ink);
    color: var(--card);
}

.contactsend:focus-visible{
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}

/* the bar along the bottom edge of the card */
.cardfoot{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 28px;

    padding: 12px 0;

    border-top: 1px solid var(--cardline);
}

.footmark{
    flex: none;

    margin-right: auto;

    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.2px;

    color: var(--cardmuted);
}

/* back to the hero: a round arrow in the bottom-right corner of the screen; the words slide out beside it on hover */
.footup{
    position: absolute;
    right: 20px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    z-index: 2;

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;

    text-decoration: none;
    color: #fff;
}

.footupicon{
    flex: none;

    width: 44px;
    height: 44px;
    box-sizing: border-box;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;

    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.footupicon svg{
    width: 18px;
    height: 18px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.footuplabel{
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    white-space: nowrap;

    opacity: 0;
    transform: translateX(10px);
    pointer-events: none;

    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.footup:hover .footupicon, .footup:focus-visible .footupicon{
    background-color: #fff;
    border-color: #fff;
    color: #0B0B0B;
}

.footup:hover .footupicon svg, .footup:focus-visible .footupicon svg{
    transform: translateY(-3px);
}

.footup:hover .footuplabel, .footup:focus-visible .footuplabel{
    opacity: 1;
    transform: none;
}

.footup:focus-visible{
    outline: none;
}

.footup:focus-visible .footupicon{
    outline: 2px solid #7fb3e0;
    outline-offset: 3px;
}

/* once sent, the form fades back and a thank-you takes its place */
.cardform{
    transition: opacity 0.4s ease;
}

.contactthanks{
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;

    opacity: 0;
    visibility: hidden;

    transition: opacity 0.5s ease 0.3s, visibility 0s linear 0.8s;
}

.contactthanks h3{
    margin: 0;

    font-size: clamp(36px, 4.4vw, 72px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -2px;
}

.contactthanks p{
    margin: 0;
    max-width: 36ch;

    font-size: 16px;
    font-weight: 300;
    line-height: 1.5;

    color: var(--cardmuted);
}

.contactpanel.sent .cardform,
.contactpanel.sent .cardmeta{
    opacity: 0;
    pointer-events: none;
}

.contactpanel.sent .contactthanks{
    opacity: 1;
    visibility: visible;

    transition: opacity 0.5s ease 0.3s, visibility 0s;
}

@media (max-width: 1100px){
    #commsbody{
        padding: 72px 32px 80px;
    }

    .cardbody{
        grid-template-columns: 1fr;
        row-gap: 44px;
    }

    .metashot{
        margin-top: 0;
    }
}

@media (max-width: 760px){
    #commsbody{
        padding: 56px 16px 76px;
    }

    .contactpanel{
        padding: 20px 20px 0;
    }

    .cardhead{
        gap: 10px;
    }

    .contactgrid{
        grid-template-columns: 1fr;
    }

    .contactsendrow{
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .cardfoot{
        gap: 14px;
    }
}

@media (prefers-reduced-motion: reduce){
    .contactword .contactletter, .contactpanel{
        animation: none !important;
        transform: none;
        opacity: 1;
    }
}

/* scroll reveals (GSAP sets the starting state; this keeps them visible without it) */
.reveal { will-change: opacity, transform; }


/* ======================================================================
   press release, imported from website drafts/Header (style.css)
   ====================================================================== */

#documentation, #pressmodal{
    /* the Header draft's palette, kept for this section */
    --page: #F5F5F5;
    --panel: #F5F5F5;
    --text: #071724;
    --strong: #071724;
    --muted: #5C5C5C;
    --faint: #5C5C5C;
    --line: rgba(0, 0, 0, 0.16);
    --accent: #2f6ca8;

    font-family: "Hanken Grotesk", sans-serif;
    font-weight: 300;
    line-height: normal;
}

main > section#documentation{
    padding: clamp(96px, 12vw, 180px) 0 0;
}

#documentation .sectionbody{
    min-height: 100vh;
    padding-left: 150px;
}

.pressmodalclose{
    border: 0;
    background: none;
    cursor: pointer;
    font-family: inherit;
}

/* PRESS RELEASE — a centred headline pins mid-viewport while two staggered columns of cards ride over it */

#docsbody{
    padding-right: 150px;
    padding-bottom: 300px;
}

.press{
    position: relative;

    padding-top: 40px;

    /* the headline holds the left column; the cards run down the right */
    display: grid;
    grid-template-columns: minmax(0, 0.45fr) minmax(0, 0.55fr);
    gap: 70px;

    align-items: start;
}

/* zero-height so it takes no room in the flow; the inner block is lifted half its own height to sit on the sticky line */
.pressheading{
    position: sticky;
    top: 50vh;
    z-index: 0;

    height: 0;
}

.pressheadinginner{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    transform: translateY(-50%);

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;

    text-align: left;
    pointer-events: none;
}

.presseyebrow{
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;

    color: var(--faint);
}

.presstitle{
    margin: 0;

    font-size: clamp(24px, 3.9vw, 56px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -2px;
    white-space: nowrap;
    text-transform: uppercase;

    color: #2B2B2B;
}

/* six tracks, and each card takes as many as it wants */
.pressgrid{
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 34px;
    align-items: start;
}

/* COMING SOON — a light veil over the cards with a label that pins mid-viewport as you scroll past */
.presswrap{
    position: relative;
}

.presssoon{
    position: absolute;
    inset: -20px;
    z-index: 2;

    background: rgba(245, 245, 245, 0.35);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    border-radius: 16px;
}

/* set in the section's own type, like the headline beside it: eyebrow, then a short line */
.presssoonmsg{
    position: sticky;
    top: calc(50vh - 22px);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;

    padding: 0 20px;
    text-align: center;
}

.presssoontitle{
    margin: 0;

    font-size: clamp(22px, 2.3vw, 34px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -1.2px;

    color: #2B2B2B;
}

/* this one rides up into the space the row above leaves open */
.presscard.pullup{
    margin-top: -150px;
}

/* the three kinds of item share the span classes but nothing else */
.presscard.span2,
.pressphoto.span2,
.pressclip.span2{
    grid-column: span 2;
}

.presscard.span3,
.pressphoto.span3,
.pressclip.span3{
    grid-column: span 3;
}

.presscard.span4,
.pressphoto.span4,
.pressclip.span4{
    grid-column: span 4;
}

/* a photograph, standing on its own */
.pressphoto{
    margin: 0;

    aspect-ratio: var(--ratio, 16 / 9);
    overflow: hidden;

    border-radius: 4px;
    background-color: color-mix(in srgb, var(--strong) 6%, transparent);
}

.pressphoto img{
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;
}

.pressphoto:hover img{
    transform: scale(1.03);
}

/* a clip: the YouTube poster with a play mark over it */
.pressclip{
    position: relative;

    display: block;

    aspect-ratio: var(--ratio, 16 / 9);
    overflow: hidden;

    border-radius: 4px;
    background-color: color-mix(in srgb, var(--strong) 8%, transparent);

    text-decoration: none;
}

.pressclipthumb{
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.4s ease, filter 0.3s ease;
}

.pressclip:hover .pressclipthumb{
    transform: scale(1.03);
    filter: brightness(0.85);
}

.pressplay{
    position: absolute;
    left: 50%;
    top: 50%;

    width: 58px;
    height: 40px;

    transform: translate(-50%, -50%);

    border-radius: 9px;
    background-color: rgba(0, 0, 0, 0.55);

    transition: background-color 0.3s ease, transform 0.3s ease;
}

.pressplay::after{
    content: "";
    position: absolute;
    left: 52%;
    top: 50%;

    width: 0;
    height: 0;

    transform: translate(-50%, -50%);

    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 15px solid #fff;
}

.pressclip:hover .pressplay{
    background-color: #c4302b;
    transform: translate(-50%, -50%) scale(1.06);
}

.presscard{
    padding: 26px 28px 22px;

    border: 1px solid var(--line);
    border-radius: 4px;

    background-color: var(--panel);

    transition: border-color 0.3s ease;
}

.presscard:hover{
    border-color: var(--accent);
}

/* the cards are previews now, so they size to their own clamped text */
.presscard.tall{
    box-sizing: border-box;
    min-height: 0;

    display: flex;
    flex-direction: column;
}

.presscard{
    cursor: pointer;
}

.presscard:focus-visible{
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* only the first few lines show on the card */
.presstext{
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.presstext p{
    margin: 0 0 10px;
}

.pressmore{
    display: inline-block;
    margin: 4px 0 14px;

    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;

    color: var(--accent);
}

/* the reader that opens over the page */
.pressmodal{
    position: fixed;
    inset: 0;
    z-index: 60;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: clamp(16px, 4vh, 60px);
    box-sizing: border-box;
}

.pressmodal[hidden]{
    display: none;
}

.pressmodalback{
    position: absolute;
    inset: 0;

    background-color: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(3px);
}

.pressmodalpanel{
    position: relative;

    width: min(760px, 100%);
    max-height: 100%;
    box-sizing: border-box;
    overflow-y: auto;

    padding: clamp(28px, 4vw, 54px);

    border: 1px solid var(--line);
    border-radius: 8px;

    background-color: var(--panel);
    color: var(--text);
}

.pressmodalclose{
    position: absolute;
    top: 14px;
    right: 18px;

    padding: 0;

    font-size: 30px;
    line-height: 1;

    color: var(--muted);
}

.pressmodalclose:hover{
    color: var(--accent);
}

.pressmodalbody p{
    margin: 0 0 18px;

    font-size: 16px;
    font-weight: 300;
    line-height: 1.75;

    color: var(--text);
}

.pressmodalfoot{
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.presscard.tall .presscardfoot{
    margin-top: auto;
}

.presscard p{
    margin: 0 0 16px;

    font-size: 14px;
    font-weight: 300;
    line-height: 1.7;

    color: var(--text);
}

.presscard p:last-of-type{
    margin-bottom: 0;
}

.presscardfoot{
    margin-top: 26px;
    padding-top: 20px;

    border-top: 1px solid var(--line);

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.pressperson{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;

    min-width: 0;
}

.pressavatar{
    flex: none;

    width: 38px;
    height: 38px;
    border-radius: 4px;

    background-color: var(--page);
    border: 1px solid var(--line);

    overflow: hidden;
}

.pressavatar img{
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.presslines{
    display: flex;
    flex-direction: column;
    gap: 3px;

    min-width: 0;
}

.pressname{
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.2px;

    color: var(--strong);
}

.pressrole{
    font-size: 12px;
    font-weight: 300;

    color: var(--muted);
}

.presslink{
    flex: none;

    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;

    font-size: 12.5px;
    font-weight: 400;
    text-decoration: none;

    color: var(--muted);

    transition: color 0.25s ease;
}

.presslink:hover{
    color: var(--accent);
}

.presslink svg{
    width: 15px;
    height: 15px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 1000px){
    .press{
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .pressheading{
        position: static;
        height: auto;
    }

    .pressheadinginner{
        position: static;
        transform: none;

        align-items: flex-start;
        text-align: left;
    }

    .pressgrid{
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .presscard.pullup{
        margin-top: 0;
    }

    .presscard.span2, .presscard.span3, .presscard.span4,
    .pressphoto.span2, .pressphoto.span3, .pressphoto.span4,
    .pressclip.span2, .pressclip.span3, .pressclip.span4{
        grid-column: span 1;
        margin-top: 0;
    }

    .presstitle{
        letter-spacing: -1.8px;
    }
}

/* once the columns stack, the 150px side margins leave the cards no room; they come in to the page gutter
   (#documentation .sectionbody is more specific than #docsbody, so both ids are needed to win) */
@media (max-width: 1000px){
    #documentation #docsbody{
        min-height: 0;
        padding-left: var(--gutter);
        padding-right: var(--gutter);
        padding-bottom: clamp(72px, 12vw, 140px);
    }
}


/* ---------- the hero's entrance, played as soon as the page opens ---------- */
/* each tagline line rises from behind its own mask */
.hero-tag .line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.hero-tag .line > span { display: block; transition: transform 1.1s cubic-bezier(.19, 1, .22, 1); }
.hero-tag .line:nth-child(2) > span { transition-delay: .09s; }
.hero-tag .line:nth-child(3) > span { transition-delay: .18s; }
/* the serif's tall letters reach above its tight line, so its mask gets extra room on top */
.hero-tag .line--accent { padding-top: .12em; margin-top: -.06em; }
.hero-card { transition: transform 1.4s cubic-bezier(.19, 1, .22, 1), opacity .8s ease; }
.bar { transition: opacity .8s ease .35s; }

body.is-loading .hero-tag .line > span { transform: translateY(110%); }
body.is-loading .hero-card { transform: scale(.72) rotate(-5deg); opacity: 0; }
body.is-loading .bar { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  body.is-loading .hero-tag .line > span, body.is-loading .hero-card { transform: none; }
  body.is-loading .hero-card, body.is-loading .bar { opacity: 1; }
}


/* ======================================================================
   phone layout: everything below tightens the page for one thumb and a
   narrow column; the desktop design above is untouched
   ====================================================================== */

/* the custom scroll pill is a mouse affordance; touch screens scroll natively */
@media (pointer: coarse) { #scrollbar { display: none; } }

@media (max-width: 760px) {
  body { font-size: 16px; }

  /* ---- bar: brand on the left, a Menu pill on the right that stays within reach ---- */
  .bar {
    z-index: 50;
    justify-content: space-between; align-items: center;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 12px;
  }
  /* as tall as the Menu pill and level with it, so the two read as one row */
  .bar .bar-brand { display: flex; align-items: center; height: 44px; }
  .bar .bar-brand img { display: block; height: 40px; width: auto; }
  /* the logo moves up into the bar, so the card doesn't repeat it */
  .hero-logo { display: none; }
  .menu-btn {
    position: fixed; z-index: 2;
    top: calc(10px + env(safe-area-inset-top, 0px)); right: 12px;
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 44px; padding: 0 16px 0 18px;
    border: 1px solid transparent; border-radius: 999px;
    /* the hero's own navy; at the very top it sits flush on the hero with no edge, and a faint edge comes in once
       the page scrolls (script.js sets .edged), so it never vanishes against the navy further down */
    background: #0A1B2F; color: #F5F5F5;
    font: 600 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
    box-shadow: 0 6px 20px rgba(14, 48, 68, .18);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .menu-btn__icon { position: relative; width: 16px; height: 10px; }
  .menu-btn__icon i {
    position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor;
    transition: transform .35s cubic-bezier(.19, 1, .22, 1), top .35s cubic-bezier(.19, 1, .22, 1);
  }
  .menu-btn__icon i:first-child { top: 1px; }
  .menu-btn__icon i:last-child { top: 7.5px; }
  .menu-btn { transition: border-color .3s ease; }
  .menu-btn.edged { border-color: rgba(245, 245, 245, .18); }
  .bar.open .menu-btn { background: var(--paper); color: var(--ink); box-shadow: none; }
  .bar.open .menu-btn__icon i:first-child { top: 4.25px; transform: rotate(45deg); }
  .bar.open .menu-btn__icon i:last-child { top: 4.25px; transform: rotate(-45deg); }

  /* the links become a full-screen sheet, set large */
  .bar nav {
    position: fixed; inset: 0; z-index: 1;
    display: flex; flex-direction: column; justify-content: flex-end; gap: 0;
    padding: 96px 16px calc(36px + env(safe-area-inset-bottom, 0px));
    background: var(--ink);
    opacity: 0; visibility: hidden;
    transition: opacity .35s ease, visibility 0s linear .35s;
  }
  .bar.open nav { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s; }
  .bar nav a {
    display: block; padding: 10px 0;
    border-top: 1px solid rgba(245, 245, 245, .22);
    font-size: clamp(36px, 11vw, 52px); font-weight: 800; line-height: 1; letter-spacing: -.045em; text-transform: uppercase;
    color: var(--paper);
    transform: translateY(16px);
    transition: transform .6s cubic-bezier(.19, 1, .22, 1), color .2s ease;
  }
  .bar nav a:last-child { border-bottom: 1px solid rgba(245, 245, 245, .22); }
  .bar.open nav a { transform: none; }
  .bar.open nav a:nth-child(2) { transition-delay: .03s; }
  .bar.open nav a:nth-child(3) { transition-delay: .06s; }
  .bar.open nav a:nth-child(4) { transition-delay: .09s; }
  .bar.open nav a:nth-child(5) { transition-delay: .12s; }
  .bar nav a:hover, .bar nav a:active { color: #B3D6EA; }
  html.menu-open, html.menu-open body { overflow: hidden; }

  /* ---- sections: one rhythm, one gutter ---- */
  main > section { padding-top: 72px; }
  h2.display { font-size: clamp(40px, 12vw, 56px); max-width: none; margin-bottom: 24px; }
  .lede { font-size: 21px; }
  .measure-row { margin-top: 48px; padding-block: 28px; gap: 24px; }
  .convene { --fs: clamp(44px, 14vw, 64px); }
  .c3 { gap: 22px; }
  .team { gap: 22px; }
  .persist li { padding: 14px 0; }
  .vp-say { font-size: clamp(34px, 10.5vw, 56px); }
  .vp-note { margin-top: 12vh; }
  .vd-old { padding-top: 72px; }
  #why .lede { margin-bottom: 32px !important; }
  .trial { padding-block: 40px; gap: 18px; }
  .trial .display { font-size: clamp(34px, 10vw, 46px); }
  .vp-row { white-space: normal; }

  /* ---- founders: photo beside the name, both cards stacked ---- */
  .founders { gap: 12px; }
  .founder { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 14px; padding: 10px; border-radius: 14px; }
  .founder-text { gap: 12px; padding: 4px 4px 4px 0; }
  .founder-name { font-size: clamp(26px, 8vw, 36px); }
  .founder-link { padding: 10px 16px; min-height: 44px; }

  /* ---- collaborators: logos in a tidy row, not a ragged wrap ---- */
  .crew-head { margin: 48px 0 16px; }
  .logo-strip { gap: 16px 24px; padding: 8px 0 0; }
  .logo { height: 60px; min-width: 0; }
  .logo img { max-width: 140px; }

  /* ---- press ---- */
  main > section#documentation { padding-top: 72px; }
  .press { padding-top: 0; gap: 28px; }
  .presseyebrow { font-size: 11px; }
  /* only a short, fading peek of the placeholder cards, with "Coming soon" centred on it */
  .presswrap { max-height: 420px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
  .presssoon { inset: 0; display: grid; place-items: center; }
  .presssoonmsg { position: static; }
  .presstitle { font-size: clamp(40px, 12vw, 56px); font-weight: 800; letter-spacing: -.045em; line-height: .9; white-space: normal; color: var(--ink); }
  .pressheadinginner { gap: 12px; }
  .pressgrid { gap: 16px; }
  /* stacked, the photo would sit second; the video placeholder takes that spot instead */
  .pressphoto { display: none; }
  .presscard { padding: 20px 18px 16px; }
  .presscard p { font-size: 15px; line-height: 1.6; }
  .presscardfoot { margin-top: 18px; padding-top: 14px; }
  .pressmodal { padding: 0; align-items: flex-end; }
  .pressmodalpanel { width: 100%; max-height: 88vh; max-height: 88svh; padding: 52px 20px calc(24px + env(safe-area-inset-bottom, 0px)); border-radius: 16px 16px 0 0; border-width: 1px 0 0; }
  .pressmodalclose { top: 10px; right: 10px; width: 44px; height: 44px; }

  /* ---- contact ---- */
  #commsbody { padding: 48px 12px calc(76px + env(safe-area-inset-bottom, 0px)); }
  .contactpanel { padding: 18px 18px 0; }
  .cardbody { margin-top: 20px; row-gap: 32px; }
  /* details as a compact grid: the email gets the full width, the rest pair up */
  .cardmeta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
  .cardmeta .metablock:first-child { grid-column: 1 / -1; }
  .metaline { font-size: 14px; overflow-wrap: anywhere; }
  /* a finger-sized hit area around the links without moving their underline */
  .metaline a { position: relative; }
  .metaline a::after { content: ""; position: absolute; inset: -12px -6px; }
  .metalabel, .contacteyebrow, .footmark { font-size: 11px; }
  .contactsend { font-size: 11px; }
  .metashot { display: none; }
  .contactgrid { margin-top: 12px; row-gap: 10px; }
  .contactconsent { font-size: 13px; padding: 6px 0; }
  .contactsendrow { flex-direction: row; align-items: center; gap: 16px; }
  .contactstatus { flex: 1; }
  .contactsend { flex: none; min-height: 44px; }
  .cardfoot { padding: 14px 0; }
}

/* advisors as a list on phones: a small arrow says the whole row opens LinkedIn */
@media (max-width: 600px) {
  .advisors .member { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; padding: 14px 0; }
  .advisors .member:first-child { border-top: 1px solid var(--rule); }
  .advisors .member::after { content: "↗"; color: var(--ink); font-size: 18px; }
  .advisors .photo { border-radius: 8px; }
  .advisors .name { font-size: 18px; margin-bottom: 4px; }
}

/* collaborator names are a hover tooltip; on touch a tap would leave one stranded, half off the screen */
@media (hover: none) { .logo-name { display: none; } }

@media (max-width: 360px) {
  .founder { grid-template-columns: minmax(0, 1fr); }
  .founder-photo { aspect-ratio: 4 / 3; }
  .cardmeta { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .bar nav, .bar nav a, .menu-btn__icon i { transition: none !important; transform: none; }
}


/* ---------- roadmap: scroll-driven contour terrain, imported from website drafts/Extra/projects topo ---------- */
main > section#roadmap {
  /* roadmap runs its own palette: dark navy ground, light grey lines/text */
  --paper: #071724;
  --paper-2: #0C2131;
  --ink: #C9C9C9;
  --ink-soft: #C9C9C9;
  --text: #C9C9C9;
  --rule: rgba(201, 201, 201, .26);
  --rm-card: rgba(255, 255, 255, .09); /* frosted glass: a see-through white, blurred over the terrain (see .rm-card) */
  --rm-muted: var(--ink-soft);
  --rm-label: var(--ink-soft);
  --rm-bar: var(--rule);
  position: relative;
  /* one screen until opened (script.js): the flight only takes its long scroll once asked for */
  height: 100vh; height: 100dvh;
  /* the terrain sits in a rounded panel inset from the page's edges, like the reasons panel above it */
  padding: var(--rm-inset);
  margin-top: clamp(72px, 10vw, 140px);
  background: transparent;
  color: var(--ink);
  --rm-inset: clamp(8px, .65vw, 12px);
}
main > section#roadmap { transition: padding .6s cubic-bezier(.65, 0, .35, 1); }
/* exploring: the panel opens out to fill the whole screen */
main > section#roadmap.is-open { padding: 0; }
main > section#roadmap.is-open { height: 666vh; }   /* the pace of the earlier 700vh flight, with the last milestone taking a shorter share (roadmap.js LAST) */

/* Explore, under the title; the close cross, top left while the flight is open */
#roadmap .rm-open, #roadmap .rm-skip {
  position: absolute; z-index: 5;
  font: 600 15px/1 var(--sans); letter-spacing: .01em; color: #F5F5F5;
  background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(201, 201, 201, .45); border-radius: 999px; cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease, opacity .4s ease;
}
#roadmap .rm-open { left: 50%; top: calc(50% + clamp(56px, 6vw, 96px)); transform: translateX(-50%); padding: 15px 28px; }
#roadmap .rm-skip { left: clamp(16px, 2.4vw, 32px); top: calc(clamp(16px, 2.4vw, 32px) + env(safe-area-inset-top, 0px)); opacity: 0; pointer-events: none; }
/* Explore is no pill: the whole resting screen opens the flight (script.js), so all it shows is a quiet hint, a few
   small words, brightening while the pointer is over the screen */
#roadmap .rm-open {
  padding: 10px 4px; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; border-radius: 0;
  font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(245, 245, 245, .6);
  transition: color .3s ease, opacity .4s ease;
}
#roadmap:not(.is-open) .rm-stage { cursor: pointer; }
#roadmap:not(.is-open) .rm-stage:hover .rm-open { color: #F5F5F5; }
#roadmap .rm-open:focus-visible { outline: 1px solid rgba(245, 245, 245, .7); outline-offset: 6px; }
/* the words sit in the top right corner of the milestones card, on every screen */
#roadmap .rm-open { left: auto; right: 16px; top: 16px; transform: none; }

/* with a mouse, the hint is a circle that rides on the pointer and inverts whatever it passes over (a white disc
   in difference mode: navy turns pale, the white contour lines dark), growing in as the pointer comes onto the
   screen. A touch screen has no pointer to follow, so there it is the words alone */
#roadmap .rm-cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  /* the circle stands in for the pointer itself: script.js hides the pointer on the whole page exactly while the
     circle is showing, since a hover rule would leave a still pointer hidden after the page scrolls out from under it */
  html.rm-cursor-on, html.rm-cursor-on * { cursor: none !important; }
  #roadmap .rm-cursor {
    display: block; position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none;
    width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%;
    background: #fff; mix-blend-mode: difference;
    /* position and size apart, so only the grow-in is eased by CSS; the position follows the pointer every frame */
    translate: var(--x, 0px) var(--y, 0px); scale: 0;
    transition: scale .15s ease-out;
    transform: scale(var(--k, 1));   /* the swell with speed, set every frame by script.js, on top of the grow-in */
  }
  #roadmap .rm-cursor.on { scale: 1; }
}
/* Close: a bare cross, no words (its name is in aria-label); on hover the circle fills
   white and the cross, now navy, turns a quarter */
#roadmap .rm-skip {
  display: inline-flex; align-items: center;
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; border-radius: 999px; padding: 0;
  font-size: 17px; font-weight: 500; letter-spacing: .01em;
  color: rgba(245, 245, 245, .8);
  transition: color .25s ease, opacity .4s ease;
}
#roadmap .rm-skip-o {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  color: #F5F5F5;
  transition: background-color .3s ease, color .3s ease;
}
#roadmap .rm-skip-o svg { display: block; transition: transform .4s cubic-bezier(.19, 1, .22, 1); }
#roadmap .rm-skip:hover { color: #fff; }
#roadmap .rm-skip:hover .rm-skip-o { background: #F5F5F5; color: #071724; }
#roadmap .rm-skip:hover .rm-skip-o svg { transform: rotate(90deg); }
#roadmap .rm-skip:focus-visible { outline: 1px solid rgba(245, 245, 245, .7); outline-offset: 6px; }
#roadmap.is-open .rm-open { opacity: 0; pointer-events: none; }
/* the cross only once the first milestone is up (roadmap.js sets rm-started) */
#roadmap.is-open.rm-started .rm-skip { opacity: 1; pointer-events: auto; }

/* dvh follows a phone's browser bars, so the card at the foot is never tucked under them */
#roadmap .rm-stage {
  position: sticky; top: var(--rm-inset);
  height: calc(100vh - 2 * var(--rm-inset)); height: calc(100dvh - 2 * var(--rm-inset));
  overflow: hidden; border-radius: 10px; background: var(--paper);
  transform-origin: 50% 0;
  transition: top .6s cubic-bezier(.65, 0, .35, 1), height .6s cubic-bezier(.65, 0, .35, 1), border-radius .6s ease;
}
#roadmap.is-open .rm-stage { top: 0; height: 100vh; height: 100dvh; border-radius: 0; }
#roadmap canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; }

/* washes out the terrain before the reveal */
#roadmap .rm-dim { position: absolute; inset: 0; pointer-events: none; background: var(--paper); opacity: .55; }
/* soft vignette so the edges fade into the paper */
#roadmap .rm-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 40% 55%, transparent 55%, rgba(7,23,36,.85) 100%);
}

#roadmap .rm-title {
  position: absolute; left: 50%; top: 50%; margin: 0; font-weight: inherit;
  transform: translate(-50%, -50%);
  text-align: center; pointer-events: none; color: var(--ink);
  will-change: opacity, transform, filter;
}
#roadmap .rm-title .s { display: block; font-size: clamp(48px, 4.9vw, 96px); line-height: .8; transform: translateX(.04em); }
#roadmap .rm-title .l { display: block; font-weight: 400; font-size: clamp(40px, 3.9vw, 76px); line-height: 1; letter-spacing: .01em; }

#roadmap .rm-labels { position: absolute; inset: 0; pointer-events: none; }
#roadmap .rm-lbl {
  position: absolute; left: 0; top: 0;
  font-size: 11px; line-height: 1.15; color: var(--rm-label);
  white-space: nowrap; opacity: 0;
  will-change: transform, opacity;
}
#roadmap .rm-lbl .t { position: absolute; left: 8px; top: -.6em; letter-spacing: .04em; }
#roadmap .rm-lbl .d { position: absolute; width: 4px; height: 4px; left: -2px; top: -2px; border-radius: 50%; background: var(--ink); }
/* summit names sit just right of the marker ring (17px radius) */
#roadmap .rm-lbl.peak .d { display: none; }
#roadmap .rm-lbl.peak .t { color: var(--ink); font-size: clamp(15px, 1.25vw, 22px); left: 30px; text-transform: uppercase; letter-spacing: .08em; }

#roadmap .rm-marker {
  position: absolute; left: 0; top: 0;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1.5px solid var(--ink); border-radius: 50%;
  opacity: 0; pointer-events: none;
  will-change: transform, opacity;
}
#roadmap .rm-marker::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px;
  border-radius: 50%; background: var(--ink);
}
/* thin stem from the ring down to the summit */
#roadmap .rm-marker::before {
  content: ""; position: absolute; left: 50%; top: 100%;
  width: 1px; height: 26px; background: linear-gradient(var(--ink), transparent);
}

#roadmap .rm-card {
  position: absolute;
  right: 1.35vw; top: 66px; bottom: 48px;
  width: clamp(300px, 25.3vw, 490px);
  /* frosted glass on the navy ground: the contour lines show softly through it, and its type is near-white */
  --ink: #FFFFFF;
  --text: #F2F4F6;
  --rm-muted: #EEF1F4;
  --rm-bar: rgba(255, 255, 255, .3);
  color: var(--ink);
  background: var(--rm-card);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  will-change: transform;
  transform: translateY(110vh);
}
/* a browser that can't blur behind the card gets a solid slate in its place, so the text still has a ground */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #roadmap .rm-card { background: rgba(38, 52, 68, .94); }
}
#roadmap .rm-slide { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 26px 24px 0; opacity: 0; }
#roadmap .rm-eyebrow {
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--rm-muted);
}
#roadmap .rm-eyebrow span:last-child { text-align: right; }
#roadmap .rm-brand {
  flex: none; height: 56%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
#roadmap .rm-num { font-weight: 300; font-size: clamp(96px, 7.6vw, 150px); line-height: .8; font-variant-numeric: lining-nums; }
/* the date takes the big slot; sized down so "Sep 2025" fits the card on one line */
#roadmap .rm-num.rm-date { font-size: clamp(44px, 4.4vw, 88px); line-height: .9; white-space: nowrap; }
#roadmap .rm-name { margin-top: 18px; font-size: clamp(17px, 1.4vw, 26px); letter-spacing: .14em; color: var(--ink); }
#roadmap .rm-alt { margin-top: 10px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--rm-muted); }
#roadmap .rm-copy { margin: 3% auto 0; max-width: 330px; font-size: 13px; line-height: 1.55; text-align: center; color: var(--text); }
/* milestone photo: takes whatever height the text leaves, so it adapts to every card size */
#roadmap .rm-slide:has(.rm-photo) { padding-bottom: 56px; }
#roadmap .rm-photo { flex: 1 1 0; min-height: 0; margin: 16px 0 0; overflow: hidden; background: rgba(255, 255, 255, .08); }
#roadmap .rm-photo img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; filter: grayscale(.2); }
#roadmap .rm-photo + .rm-brand { height: auto; padding-top: 22px; }
#roadmap .rm-photo + .rm-brand .rm-date { font-size: clamp(36px, 3.2vw, 64px); }
#roadmap .rm-photo ~ .rm-copy { margin-top: 14px; }
#roadmap .rm-bars {
  position: absolute; left: 24px; right: 24px; bottom: 26px;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px;
}
#roadmap .rm-bars i { display: block; height: 1px; background: var(--rm-bar); position: relative; overflow: hidden; }
#roadmap .rm-bars i b { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(0); }

/* phones and upright tablets: the card sits along the bottom and the terrain takes the top
   (roadmap.js matches this query to shift the camera) */
@media (max-width: 720px) and (min-height: 521px), (max-width: 1100px) and (max-aspect-ratio: 4/5) {
  #roadmap .rm-card {
    left: 16px; right: 16px; width: auto; max-width: 560px; margin-inline: auto;
    top: auto; height: 52vh; height: 52svh; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  #roadmap .rm-brand { height: 50%; }
  /* slides with a photo get a taller card and tighter type so the photo isn't squeezed to a strip */
  #roadmap .rm-card:has(.rm-photo) { height: max(60vh, 430px); height: max(60svh, 430px); }
  #roadmap .rm-photo { min-height: 130px; }
  #roadmap .rm-photo + .rm-brand { padding-top: 14px; }
  #roadmap .rm-photo ~ .rm-copy { margin-top: 10px; }
  /* no swipe-progress bars on phones; the room they kept free goes back to the photo */
  #roadmap .rm-bars { display: none; }
  #roadmap .rm-slide:has(.rm-photo) { padding-bottom: 20px; }
  /* long summit names wrap instead of running off the right edge */
  #roadmap .rm-lbl.peak .t { width: max-content; max-width: min(150px, 38vw); white-space: normal; font-size: 13px; line-height: 1.2; }
}
/* phones on their side: the card runs the full height, set tighter so the copy clears the progress bars */
@media (max-height: 520px) {
  #roadmap .rm-card { top: 12px; bottom: 12px; height: auto; }
  #roadmap .rm-slide { padding-top: 16px; }
  #roadmap .rm-brand { height: 42%; }
  #roadmap .rm-num.rm-date { font-size: 40px; }
  #roadmap .rm-name { margin-top: 10px; font-size: 16px; }
  #roadmap .rm-alt { margin-top: 6px; }
  #roadmap .rm-copy { margin-top: 8px; font-size: 12.5px; line-height: 1.45; }
  #roadmap .rm-bars { display: none; }
  /* too short for a photo to read; the text keeps the room */
  #roadmap .rm-photo { display: none; }
  #roadmap .rm-slide:has(.rm-photo) { padding-bottom: 0; }
  #roadmap .rm-photo + .rm-brand { height: 42%; padding-top: 0; }
  #roadmap .rm-photo + .rm-brand .rm-date { font-size: 40px; }
  #roadmap .rm-photo ~ .rm-copy { margin-top: 8px; }
}