/* Kairo — investor site. One design system: an editorial serif, a clean sans, a monospace for system state;
   neutral structure; ONE accent for Kairo's active intelligence. */

:root {
  /* ground and ink */
  --page: #fcfbf8;
  --panel: #fefdfb;
  --ink: #08090c;
  --ink-soft: #283248;
  --body: #4e6086;
  --meta: #66768f;
  --faint: #9aa3b4;
  --link: #46568c;
  --quiet: #6e7d97; /* the de-emphasised half of a display line */
  --rule: #e2e4e9;
  --hair: #efedea;
  /* night */
  --night: #0f131c;
  --night-2: #151a26;
  --night-ink: #ece8df;
  --night-body: #b9c0cf;
  --night-dim: #8d96aa;
  --night-faint: #5f6880;
  --night-rule: #262d3d;
  /* the one accent: Kairo's active intelligence, state changes, traced relationships */
  --accent: #5b47d6;
  --accent-soft: rgba(91, 71, 214, 0.1);
  --accent-night: #a99bff;
  --accent-night-soft: rgba(169, 155, 255, 0.14);
  /* type */
  --serif: 'Playfair Display', ui-serif, Georgia, 'Times New Roman', serif;
  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  /* layout */
  --container: 1200px;
  --gut: clamp(20px, 4vw, 56px);
  --edge: max(var(--gut), (100% - var(--container)) / 2); /* the 1200px container's edge, as padding */
  --section: clamp(96px, 13vw, 184px);
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 17px/1.55 var(--sans); }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
h1, h2, .hero__title, .display, .display-m, .principle__text, .closing__big, .closing__setup, .twin__brief { text-wrap: balance; }
.nw { white-space: nowrap; }
ul, ol { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.night-ground :focus-visible, .on-night :focus-visible { outline-color: var(--accent-night); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
main { display: block; overflow-x: clip; position: relative; z-index: 1; }
/* the interludes: one canvas over each marked gap, behind the text, scrolling with the page (js/interludes.js) */
.interlude { position: absolute; z-index: -1; pointer-events: none; }

/* ---------- shared building blocks ---------- */
.wrap { width: min(var(--container), 100% - 2 * var(--gut)); margin-inline: auto; }
.section { padding-block: var(--section); }
.eyebrow { font: 600 11.5px/1.2 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--meta); }
.mono { font-family: var(--mono); }
.display { font: 400 clamp(40px, 6.6vw, 96px)/1.0 var(--serif); letter-spacing: -0.015em; text-transform: uppercase; }
.display-m { font: 400 clamp(32px, 4.6vw, 64px)/1.04 var(--serif); letter-spacing: -0.01em; text-transform: uppercase; }
.lede { font: 400 clamp(17px, 1.35vw, 20px)/1.6 var(--sans); color: var(--body); max-width: 36em; }
.note { font: 400 12px/1.5 var(--mono); letter-spacing: 0.01em; color: var(--meta); }
.on-night .note { color: var(--night-dim); }

/* build marks */
.bm { display: inline-block; flex: 0 0 auto; width: 9px; height: 9px; border: 1.5px solid currentColor; vertical-align: 0; }
.bm[data-b='built'] { background: currentColor; }
.bm[data-b='progress'] { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.bm[data-b='next'] { background: transparent; }
.mark { display: inline-flex; align-items: center; gap: 7px; font: 600 10.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.on-night .mark { color: var(--night-body); }

/* buttons: one control style across the page */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border: 1px solid var(--ink); background: transparent; color: var(--ink); font: 500 14px/1 var(--sans); text-decoration: none; cursor: pointer; transition: background-color 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease); }
@media (hover: hover) { .btn:hover { background: var(--ink); color: var(--page); } }
.btn--solid { background: var(--ink); color: var(--page); }
.btn--solid:hover { background: var(--ink-soft); border-color: var(--ink-soft); }
.btn[aria-pressed='true'] { background: var(--ink); color: var(--page); }
.on-night .btn { border-color: var(--night-body); color: var(--night-ink); }
@media (hover: hover) { .on-night .btn:hover { background: var(--night-ink); color: var(--night); border-color: var(--night-ink); } }
.on-night .btn[aria-pressed='true'] { background: var(--night-ink); color: var(--night); border-color: var(--night-ink); }
.link { color: var(--link); font: 500 15px/1 var(--sans); text-decoration: none; border-bottom: 1px solid currentColor; padding: 4px 0; }
.link:hover { color: var(--ink); }
.link, .cta-2, .wordmark { position: relative; }
.link::after, .cta-2::after, .wordmark::after { content: ''; position: absolute; inset: -10px -8px; }

/* ==========================================================================================================
   1 · HERO — sticky, scroll-driven
   ========================================================================================================== */
.hero { position: relative; height: calc(100vh + 300vh); height: calc(100svh + 300svh); background: var(--night); }
.hero__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--page); --horizon: 93vh; }
@media (max-width: 699px) { .hero__stage { --horizon: 95vh; } }
@media (min-width: 700px) { .hero__stage[data-band='thin'] .hero__offline { visibility: hidden; } }   /* a band too thin for the offline caption leaves it out */
#how { scroll-margin-top: 40px; }   /* the jump to How lands with the crossed mind clear of the edge */
.hero__night { position: absolute; left: 0; right: 0; bottom: 0; top: var(--horizon); background: var(--night); }
.hero__canvas, .hero__still { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.hero__still { opacity: 0; }
.hero--no-webgl .hero__canvas { display: none; }
/* without WebGL2: the figures-only still, placed by hero.js in the box the renderer would have used; it inverts at the
   same horizon (measured from its own top) and its edges dissolve into the night */
.hero--no-webgl .hero__still {
  clip-path: inset(max(0px, calc(var(--horizon) - var(--still-top, 0px))) 0 0 0); opacity: calc((var(--hero-p, 0) - 0.18) * 8);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(180deg, transparent, #000 5%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(180deg, transparent, #000 5%, #000 90%, transparent);
  mask-composite: intersect;
}
.hero__stage[data-phase='assembling'] :focus-visible, .hero__stage[data-phase='complete'] :focus-visible { outline-color: var(--accent-night); }
.hero__copy { position: absolute; inset: 0; display: flex; flex-direction: column; pointer-events: none; }
.hero__copy a, .hero__copy button { pointer-events: auto; }
.hero__copy--night { clip-path: inset(var(--horizon) 0 0 0); color: var(--night-ink); }
.hero__copy--night a, .hero__copy--night button { pointer-events: none; }

.mast { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px var(--edge) 0; }
.wordmark { font: 700 22px/1 var(--serif); color: var(--ink); letter-spacing: -0.01em; text-decoration: none; }
.index { display: flex; align-items: center; gap: 6px; font: 500 13px/1 var(--sans); }
.index a { color: var(--meta); text-decoration: none; padding: 8px 2px; white-space: nowrap; }
.index a:hover, .index a.is-hover { color: var(--ink); }
.index .sep { color: var(--faint); }
.hero__main { padding: clamp(48px, 6.4vw, 92px) var(--edge) 0; }
.hero__title { font: 400 clamp(36px, 9.6vw, 140px)/0.97 var(--serif); letter-spacing: -0.02em; color: var(--ink); text-transform: uppercase; }
.hero__sub { font: 400 clamp(16px, 1.3vw, 19px)/1.55 var(--sans); color: var(--body); max-width: 33em; margin-top: 34px; text-wrap: pretty; }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; margin-top: 34px; }
.cta { display: inline-flex; gap: 10px; align-items: center; background: var(--ink); color: var(--page); font: 500 15px/1 var(--sans); padding: 16px 22px; text-decoration: none; transition: background-color 160ms var(--ease); }
.cta:hover, .cta.is-hover { background: var(--ink-soft); }
.cta-2 { color: var(--link); font: 500 15px/1 var(--sans); text-decoration: none; border-bottom: 1px solid currentColor; padding: 4px 0; }
.cta-2:hover, .cta-2.is-hover { color: var(--ink); }
.hero__offline { opacity: var(--offline-o, 1); margin-top: auto; padding: 0 var(--edge) var(--band-pad, calc(3.5vh - 0.5em)); font: 12.5px/1 var(--mono); color: var(--meta); }
.hero__scroll { position: absolute; left: var(--gut); bottom: 24px; font: 11px/1 var(--mono); letter-spacing: 0.08em; color: var(--meta); }
.hero__labels { position: absolute; inset: 0; pointer-events: none; }
.hero__label { position: absolute; transform: translate(-50%, 0); font: 11px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--night-dim); opacity: var(--label-o, 0); white-space: nowrap; text-align: center; }
.hero__label b { display: block; font-weight: 500; color: var(--night-ink); letter-spacing: 0.12em; }

/* the night twin of the copy */
.hero__copy--night .wordmark, .hero__copy--night .hero__title { color: var(--night-ink); }
.hero__copy--night .hero__sub { color: var(--night-body); }
.hero__copy--night .index a, .hero__copy--night .hero__offline, .hero__copy--night .hero__scroll { color: var(--night-dim); }
.hero__copy--night .index a.is-hover { color: var(--night-ink); }
.hero__copy--night .cta { background: var(--night-ink); color: var(--night); }
.hero__copy--night .cta.is-hover { background: #fff; }
.hero__copy--night .cta-2 { color: var(--night-body); }
.hero__copy--night .cta-2.is-hover { color: var(--night-ink); }

@media (max-width: 899px) {
  .index { display: none; }
}
@media (max-width: 699px) {
  .hero__offline { margin-top: 22px; padding-bottom: 0; }
}
@media (max-width: 599px) {
  .hero__main { padding-top: 40px; }
  .hero__title { font-size: 11.3vw; }
  .hero__sub { font-size: 15.5px; margin-top: 20px; }
  .hero__ctas { margin-top: 22px; gap: 14px 22px; }
  .cta { padding: 14px 18px; font-size: 14.5px; }
}

[data-motion='reduce'] .hero { height: auto; }
[data-motion='reduce'] .hero__stage { position: relative; }

/* ==========================================================================================================
   2 · THE FILM
   ========================================================================================================== */
.on-night { background: var(--night); color: var(--night-ink); }
.on-night .eyebrow { color: var(--night-dim); }
.on-night .lede { color: var(--night-body); }
.film-sec { padding: clamp(88px, 11vw, 150px) 0 clamp(110px, 14vw, 200px); }
.film-sec__title { margin-top: 18px; max-width: 15em; }
.film-sec__lede { margin-top: 26px; }
.film { margin-top: clamp(44px, 5.5vw, 72px); }
.film__frame { position: relative; aspect-ratio: 16 / 9; background: #0a0d14; border: 1px solid var(--night-rule); overflow: hidden; overflow: clip; }
.film__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }   /* never crop the film */
.film__poster { position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 13, 20, 0) 55%, rgba(10, 13, 20, 0.85) 100%),
    linear-gradient(90deg, #121726 0 38%, #161c2c 38% 62%, #10141f 62% 100%);
}
.film__poster::before { content: ''; position: absolute; left: 38%; top: 14%; width: 24%; height: 52%; background: linear-gradient(180deg, #2a2f44, #1b2030); box-shadow: inset 0 0 0 1px rgba(236, 232, 223, 0.06); }
.film__poster::after { content: ''; position: absolute; left: 0; right: 0; top: 66%; height: 1px; background: rgba(236, 232, 223, 0.08); }
/* with the real film: one of its own frames under the slate and the title (the drawn stand-in frame is retired) */
.film[data-has-film] .film__poster { background: linear-gradient(180deg, rgba(10, 13, 20, 0.55) 0%, rgba(10, 13, 20, 0.05) 30%, rgba(10, 13, 20, 0.1) 55%, rgba(10, 13, 20, 0.82) 100%), var(--film-poster, none) center / cover no-repeat, #0a0d14; }
.film[data-has-film] .film__poster::before, .film[data-has-film] .film__poster::after { display: none; }
.film[data-has-film] .film__play { background: rgba(10, 13, 20, 0.55); border-color: rgba(236, 232, 223, 0.9); }
@media (max-width: 599px) { .film[data-has-film] .film__poster { background-size: 100% 100%, 122% auto; background-position: 0 0, 100% 30%; } }   /* the speaker clears the play button on phones */
/* captions, drawn by the page so they sit just above the controls in every browser; they scale with the frame */
.film__frame { container-type: inline-size; }
.film__cc { position: absolute; left: 5%; right: 5%; bottom: calc(var(--bar-h, 56px) + 1.4cqi); text-align: center; pointer-events: none; }
.film__cue { display: inline; padding: 0.12em 0.4em; background: rgba(8, 9, 12, 0.74); color: #fcfbf8; font: 400 clamp(12px, 2.05cqi, 34px)/1.42 var(--sans); white-space: pre-line; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.film__grain { position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 3px 3px; mix-blend-mode: screen; }
.film__slate { position: absolute; left: 4%; top: 6%; font: 500 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--night-dim); }
.film__name { position: absolute; left: 4%; bottom: 7%; font: 400 clamp(26px, 4vw, 58px)/1 var(--serif); text-transform: uppercase; letter-spacing: -0.01em; color: var(--night-ink); }
.film__play { position: absolute; left: 50%; top: 50%; width: clamp(64px, 7vw, 92px); height: clamp(64px, 7vw, 92px); margin: calc(clamp(64px, 7vw, 92px) / -2) 0 0 calc(clamp(64px, 7vw, 92px) / -2); border-radius: 50%; border: 1px solid rgba(236, 232, 223, 0.7); background: rgba(10, 13, 20, 0.35); cursor: pointer; transition: background-color 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease); }
@media (hover: hover) { .film__play:hover { background: var(--night-ink); border-color: var(--night-ink); } .film__play:hover .film__tri { border-left-color: var(--night); } }
.film__tri { position: absolute; left: 50%; top: 50%; margin: -10px 0 0 -6px; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent var(--night-ink); }
.film[data-state='playing'] .film__play, .film[data-state='paused'] .film__play, .film[data-state='playing'] .film__poster, .film[data-state='paused'] .film__poster { display: none; }
.film__bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.72)); }
.film__ctl { min-width: 36px; height: 32px; padding: 0 4px; background: none; border: 0; color: var(--night-ink); font: 500 12px/1 var(--mono); cursor: pointer; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); }
/* captions off: the label stays fully legible on any frame and is struck through; on: it sits in a box */
.film__ctl[data-film-cc][aria-pressed='false'] { text-decoration: line-through; text-decoration-thickness: 1px; }
.film__ctl[data-film-cc][aria-pressed='true'] { box-shadow: inset 0 0 0 1px currentColor; }
.film__seek { flex: 1; min-width: 0; accent-color: var(--accent-night); }
.film__time { font: 12px/1 var(--mono); color: var(--night-ink); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); min-width: 88px; white-space: nowrap; }
/* the interview questions: one quiet line that opens into the full list */
.film__q { margin-top: 18px; }
.film__q-toggle { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0; background: none; border: 0; color: var(--night-body); font: 500 15px/1.2 var(--sans); cursor: pointer; transition: color 200ms var(--ease); }
.film__q-toggle:hover { color: var(--night-ink); }
.film__q-icon { position: relative; flex: 0 0 auto; width: 22px; height: 22px; border: 1px solid var(--night-dim); border-radius: 50%; transition: transform 360ms var(--ease), border-color 200ms var(--ease); }
.film__q-icon::before, .film__q-icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 1px; margin: -0.5px 0 0 -4.5px; background: currentColor; }
.film__q-icon::after { transform: rotate(90deg); }
.film__q-toggle:hover .film__q-icon { border-color: var(--night-ink); }
.film__q.is-open .film__q-icon { transform: rotate(45deg); border-color: var(--accent-night); color: var(--accent-night); }
.film__q-panel { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 520ms var(--ease), opacity 360ms var(--ease); }
.film__q.is-open .film__q-panel { grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows 520ms var(--ease), opacity 420ms var(--ease) 120ms; }
.film__q-in { overflow: hidden; min-height: 0; }
.film__q-list { max-width: 46em; margin: 22px 0 8px; padding: 0; list-style: none; }   /* one column: the questions are a sequence */
.film__q-list li { position: relative; padding: 16px 0 16px 22px; border-top: 1px solid var(--night-rule); font: 400 15px/1.55 var(--sans); color: var(--night-body); text-wrap: pretty; }
.film__q-list li:last-child { border-bottom: 1px solid var(--night-rule); }
.film__q-list li::before { content: ''; position: absolute; left: 0; top: 25px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-night); }

@media (max-width: 599px) {
  .film__play { width: 54px; height: 54px; margin: -27px 0 0 -27px; top: 44%; }
  .film__tri { margin: -8px 0 0 -5px; border-width: 8px 0 8px 13px; }
  .film__slate { font-size: 9px; letter-spacing: 0.1em; white-space: nowrap; }
  .film[data-has-film] .film__slate { color: var(--night-body); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }
  /* the player's controls fit the narrow frame: the seek bar gives way first, the duration is dropped */
  .film__bar { gap: 6px; padding: 6px 8px; }
  .film__ctl { min-width: 32px; height: 32px; padding: 0 3px; font-size: 11px; }
  .film__time { min-width: 0; font-size: 11px; }
  .film__time-total { display: none; }
  .film__name { font-size: 22px; }
}

/* ==========================================================================================================
   3 · THE DAY
   ========================================================================================================== */
.day__line { position: relative; margin-top: clamp(36px, 4vw, 56px); padding: 78px 0 64px; }
.day__stops { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1.5px solid var(--ink); padding-top: 22px; }
.day__stops li { padding-right: 12px; }
.day__stops b { display: block; font: 400 clamp(24px, 2.7vw, 40px)/1 var(--serif); color: var(--ink); }
.day__stops span { display: block; margin-top: 8px; font: 400 14px/1.35 var(--sans); color: var(--body); }
.day__arrivals li { position: absolute; left: calc(var(--x) / 7 * 100%); max-width: 15em; text-wrap: balance; padding-left: 12px; border-left: 1px solid var(--faint); font: 400 14px/1.35 var(--sans); color: var(--ink-soft); }
.day__arrivals li::before { content: ''; position: absolute; left: -4px; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--ink-soft); background: var(--page); }
.day__arrivals .up { top: 0; height: 78px; padding-top: 0; }
.day__arrivals .up::before { bottom: -4px; }
.day__arrivals .dn { bottom: 0; height: 54px; display: flex; align-items: flex-end; }
.day__arrivals .dn::before { top: -4px; }
.day__close { margin-top: clamp(80px, 10vw, 140px); }
.day__you { margin-top: 18px; font: 400 clamp(26px, 3vw, 42px)/1.1 var(--serif); color: var(--quiet); text-transform: uppercase; }

/* ==========================================================================================================
   4 · TWO INSTANCES
   ========================================================================================================== */
.twin__title { margin-top: 18px; text-align: center; }
.twin .eyebrow { text-align: center; }
.twin__grid { position: relative; max-width: 980px; margin: clamp(56px, 7vw, 96px) auto 0; }
.twin__grid { padding-top: 44px; }
.twin__head { position: absolute; top: 0; font: 600 12px/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--meta); }
.twin__head--you { right: calc(50% + 32px); }
.twin__head--k { left: calc(50% + 32px); color: var(--accent); }
.twin__line { position: absolute; left: 50%; top: 44px; bottom: 116px; width: 1px; margin-left: -0.5px; background: var(--rule); }
.twin__fill { position: absolute; inset: 0; background: var(--accent); transform-origin: top; transform: scaleY(0); }
.twin__row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); align-items: start; min-height: 108px; opacity: 0.18; transition: opacity 600ms var(--ease); }
.twin__row.is-on { opacity: 1; }
.twin__you { text-align: right; }
.twin__you p { font: 400 clamp(19px, 1.7vw, 24px)/1.3 var(--serif); color: var(--ink); }
.twin__you time { display: block; margin-top: 6px; font: 12px/1 var(--mono); color: var(--meta); }
.twin__asleep { font-style: italic; color: var(--faint) !important; }
.twin__dot { justify-self: center; margin-top: 8px; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--faint); background: var(--page); transition: border-color 400ms var(--ease), background-color 400ms var(--ease); position: relative; z-index: 1; }
.twin__row.is-on .twin__dot { border-color: var(--accent); background: var(--accent); }
.twin__k p { font: 500 clamp(17px, 1.4vw, 20px)/1.3 var(--sans); color: var(--ink-soft); }
.twin__k .mono { display: block; margin-top: 6px; font-size: 12.5px; color: var(--meta); }
.twin__k b { font-weight: 600; color: var(--accent); }
.twin__row--quiet .twin__k p { color: var(--ink); }
.twin__meet { position: relative; text-align: center; padding-top: 12px; opacity: 0.18; transition: opacity 600ms var(--ease); }
.twin__meet.is-on { opacity: 1; }
.twin__end { display: block; width: 15px; height: 15px; margin: 0 auto 26px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 6px var(--accent-soft); }
.twin__brief { font: 400 clamp(26px, 3vw, 42px)/1.15 var(--serif); color: var(--ink); }
.twin__brief .eyebrow { display: block; margin-bottom: 14px; }
.twin__meet .note { margin: 18px auto 0; max-width: 64ch; text-wrap: balance; }

/* ==========================================================================================================
   5 · NIGHT SHIFT
   ========================================================================================================== */
/* the hand-off from the white page into the night: an eased dusk across the boundary, ivory through a faint lavender
   slate into the navy — the bottom of the previous section's padding darkens into the top of this one's, so nothing moves
   and the "Night shift" line still starts on full night */
.twin { position: relative; }
.twin::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--section) * 0.7); pointer-events: none;
  background: linear-gradient(to bottom, #fcfbf8, #f0eff0 25%, #d1d1da 50%, #a8a7b9 75%, #7a7a91); }
.ns { padding: clamp(96px, 11vw, 150px) 0 clamp(80px, 9vw, 120px); overflow: hidden;
  background: linear-gradient(to bottom, #7a7a91, #4f5166 25%, #2d303f 50%, #171b25 75%, var(--night)) top / 100% calc(clamp(96px, 11vw, 150px) * 0.72) no-repeat, var(--night); }
.ns__wrap { width: min(var(--container), 100% - 2 * var(--gut)); margin-inline: auto; }
.ns__title { margin-top: 16px; font: 400 clamp(40px, 4.6vw, 66px)/1 var(--serif); color: var(--night-ink); }
.ns__sub { margin-top: 10px; font: 400 clamp(20px, 2vw, 28px)/1.2 var(--serif); color: var(--night-body); }
.ns__controls { display: flex; align-items: center; gap: 18px; margin-top: 40px; }
.ns__hint { font: 400 13px/1.4 var(--sans) !important; }
.ns__play { justify-content: flex-start; }
.ns__tri { display: inline-block; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
.ns.is-playing .ns__play, .ns.is-playing .ns__play:hover { background: var(--accent-night-soft); border-color: var(--accent-night); color: var(--night-ink); }
.ns__score { position: relative; display: grid; margin-top: 30px;
  grid-template-columns: 132px repeat(4, minmax(0, 1fr)) minmax(0, 0.85fr) minmax(300px, 1.5fr);
  grid-template-rows: auto auto repeat(3, minmax(132px, auto)); }
.ns__axis { display: contents; }
.ns__col { grid-column: var(--c); grid-row: 2 / 6; justify-self: start; width: 1px; background: var(--night-rule); }
.ns__t { grid-row: 2; grid-column: var(--c); justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-left: -6px; padding: 10px 10px 18px 0; background: none; border: 0; color: var(--night-dim); font: 500 13px/1 var(--mono); cursor: pointer; position: relative; z-index: 2; }
.ns__t i { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid currentColor; background: var(--night); transition: background-color 300ms var(--ease), border-color 300ms var(--ease); }
.ns__t:hover { color: var(--night-ink); }
.ns__t[aria-current='true'] { color: var(--night-ink); }
.ns__t[aria-current='true'] i { border-color: var(--accent-night); background: var(--accent-night); box-shadow: 0 0 0 5px var(--accent-night-soft); }
.ns__t--dawn { margin-left: 46px; color: var(--meta); transition: color 600ms var(--ease); }
.ns__t--dawn i { background: var(--page); }
.ns__t--dawn[aria-current='true'] i { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); }
.ns__t--dawn:hover, .ns__t--dawn[aria-current='true'] { color: var(--ink); }
.ns__offline { grid-row: 1; grid-column: 2 / 5; align-self: end; padding-bottom: 6px; font: 12px/1 var(--mono); color: var(--night-faint); }
.ns__sit { grid-column: 1; grid-row: calc(var(--r) + 2); padding-top: 2px; font: 400 18px/1.15 var(--serif); color: var(--night-body); }
.ns__lane { grid-column: 2 / 7; grid-row: calc(var(--r) + 2); align-self: start; margin-top: 11px; height: 1px; background: var(--night-rule); }
.ns__ev { grid-column: var(--c) / span 2; grid-row: calc(var(--r) + 2); position: relative; z-index: 1; align-self: start; padding: 0 18px 14px 16px; margin-bottom: 18px; max-width: 360px; background: var(--night); transition: opacity 520ms var(--ease), transform 520ms var(--ease); }
.ns__ev > * { transition: opacity 420ms var(--ease); }
.ns__ev[data-ns-ev='3'] { grid-column: 5 / 7; }
.ns__ev::before { content: ''; position: absolute; left: -5px; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--night-dim); transition: background-color 400ms var(--ease), box-shadow 400ms var(--ease); }
.ns__raw { font: 400 15px/1.4 var(--sans); color: var(--night-ink); }
.ns__ctx { margin-top: 8px; font-size: 12.5px; color: var(--night-dim); }
.ns__state { margin-top: 3px; font-size: 13px; color: var(--night-body); }
.ns__state s { color: var(--night-faint); }
.ns__state b { font-weight: 500; color: var(--night-ink); transition: color 400ms var(--ease); }
.ns__prep { margin-top: 6px; font-size: 12.5px; color: var(--night-body); }
.ns__reg { margin-top: 8px; font-size: 10.5px; letter-spacing: 0.06em; color: var(--night-faint); }
.ns__ev[data-state='future'] { opacity: 0; transform: translateY(8px); visibility: hidden; transition: opacity 300ms var(--ease), transform 300ms var(--ease), visibility 0s 300ms; }
.ns__ev[data-state='past'] > * { opacity: 0.62; }
.ns__ev[data-state='past'] .ns__reg { color: var(--night-dim); }
.ns__ev[data-state='past']::before { opacity: 0.6; }
/* the grammar, one beat after another: arrives → recognised → updated → understood */
.ns__ev[data-state='current'] .ns__ctx { transition-delay: 160ms; }
.ns__ev[data-state='current'] .ns__state { transition-delay: 320ms; }
.ns__ev[data-state='current'] .ns__prep { transition-delay: 480ms; }
.ns__ev[data-state='current'] .ns__reg { transition-delay: 600ms; }
.ns__ev[data-state='future'] > * { opacity: 0; }
.ns__ev[data-state='current']::before { background: var(--accent-night); box-shadow: 0 0 0 6px var(--accent-night-soft), 0 0 22px rgba(169, 155, 255, 0.45); }
.ns__ev[data-state='current'] .ns__state b { color: var(--accent-night); }
.ns__ev[data-state='current'] .ns__reg { color: var(--night-dim); }
.ns__dawn { grid-column: 7; grid-row: 1 / 6; display: grid; grid-template-rows: subgrid; position: relative; background: var(--page); color: var(--ink); padding: 0 22px 0 30px; margin-left: 16px; z-index: 0; }
.ns__dawn::after { content: ''; position: absolute; top: 0; bottom: 0; left: 100%; width: 100vw; background: var(--page); }
/* before morning the dawn column is still night: a quieter panel waiting for the Brief; it turns to day at 7:52 */
.ns__dawn, .ns__dawn::after { transition: background-color 900ms var(--ease); }
.ns:not([data-at='4']) .ns__dawn, .ns:not([data-at='4']) .ns__dawn::after { background: var(--night-2); }
.ns:not([data-at='4']) .ns__t--dawn { color: var(--night-dim); }
.ns:not([data-at='4']) .ns__t--dawn i { background: var(--night-2); }
.ns:not([data-at='4']) .ns__t--dawn:hover { color: var(--night-ink); }
.ns__dawn > :first-child { grid-row: 1; }
.ns__back { grid-row: 1; align-self: end; padding: 26px 0 0; font: 400 clamp(24px, 2.2vw, 32px)/1.05 var(--serif); white-space: nowrap; color: var(--night-dim); transition: color 600ms var(--ease); }
.ns__bh { grid-row: 2; justify-self: end; align-self: start; padding-top: 10px; margin: 0; opacity: 0; visibility: hidden; transition: opacity 500ms var(--ease) 200ms, visibility 0s 700ms; }
.ns__out { grid-row: calc(var(--r) + 2); align-self: start; padding-top: 2px; font: 400 16px/1.4 var(--sans); text-wrap: balance; color: var(--ink); opacity: 0; visibility: hidden; transform: translateX(-18px); transition: opacity 600ms var(--ease), transform 600ms var(--ease), visibility 0s 600ms; }
.ns__out b { font-weight: 600; }
.ns__out:nth-of-type(2) { transition-delay: 90ms; }
.ns__out:nth-of-type(3) { transition-delay: 180ms; }
.ns__approve { display: flex; align-items: center; gap: 8px; margin-top: 8px; font: 12px/1.3 var(--mono); color: var(--accent); }
.ns[data-at='4'] .ns__back { color: var(--ink); }
.ns[data-at='4'] .ns__bh { color: var(--meta); opacity: 1; visibility: visible; transition: opacity 500ms var(--ease) 200ms, visibility 0s; }
.ns[data-at='4'] .ns__out { opacity: 1; visibility: visible; transform: none; transition: opacity 600ms var(--ease), transform 600ms var(--ease), visibility 0s; }
.ns__t--dawn:focus-visible { outline-color: var(--accent); }
.ns[data-at='4'] .ns__offline { opacity: 0.5; }
.ns__illus { margin-top: 34px; color: var(--night-dim) !important; }

/* ==========================================================================================================
   6 · PAYOFF
   ========================================================================================================== */
.payoff { padding: clamp(120px, 15vw, 210px) 0; }
/* "Your doppelgänger wasn’t." is one line (≈14.4 em) wherever it fits; on phones the two sentences become couplets */
.payoff__line { font: 400 clamp(26px, 6.2vw, 82px)/0.98 var(--serif); letter-spacing: -0.015em; text-transform: uppercase; color: var(--ink); }
.payoff__note { margin-top: 32px; }
.payoff__l2 { white-space: nowrap; }
.br-m { display: none; }
@media (max-width: 599px) {
  .payoff__line { font-size: 8.2vw; }
  .payoff__l2 { white-space: normal; }
  .br-m { display: inline; }
}

/* ==========================================================================================================
   7 · HOW KAIRO WORKS
   ========================================================================================================== */
.how__title { margin-top: 18px; max-width: 18em; }
.how__title-2 { color: var(--quiet); }
.how__lede { margin-top: 26px; }
.how__demo { margin-top: clamp(44px, 5vw, 64px); }
.how__tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.how__tabs [role='tab'] { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-height: 96px; padding: 16px 14px 16px 0; background: none; border: 0; border-top: 2px solid transparent; margin-top: -1px; text-align: left; cursor: pointer; color: var(--meta); font: 500 14px/1.3 var(--sans); transition: color 200ms var(--ease), border-color 200ms var(--ease); }
.how__tabs [role='tab']:hover { color: var(--ink); }
.how__tabs [role='tab'][aria-selected='true'] { color: var(--ink); border-top-color: var(--accent); }
.how__tabs .mark { font-size: 10px; color: inherit; }
.how__body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(28px, 4vw, 56px); margin-top: 28px; align-items: start; }
.how__stack { position: relative; border: 1px solid var(--rule); background: var(--panel); }
.band { display: grid; grid-template-rows: 1fr; padding: 16px 20px 16px 26px; border-top: 1px solid var(--rule); }
.band__in { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 0 16px; min-height: 0; overflow: hidden; }
.band__sub { display: block; margin-top: 6px; font-size: 11px; letter-spacing: 0.04em; text-transform: none; line-height: 1.4; }
.band:first-child { border-top: 0; }
.band__name { padding-top: 3px; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--meta); }
.band__rows { min-width: 0; }
.how__statement { font: 400 clamp(22px, 2.2vw, 30px)/1.2 var(--sans); letter-spacing: -0.01em; color: var(--ink); padding: 4px 0 10px; }
.rec { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 6px 12px 6px 8px; margin: 0 -12px 0 -8px; border-left: 2px solid transparent; transition: background-color 300ms var(--ease), border-color 300ms var(--ease), color 300ms var(--ease); }
.rec__k { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--meta); }
.rec__v { font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }
.rec__v.mono b { font-weight: 600; color: var(--ink); }
.rec__v em { font-style: normal; padding: 1px 5px; border: 1px solid currentColor; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--meta); }
.rec > .mark { font-size: 9.5px; }
.band--surface .rec__v { font: 400 14px/1.45 var(--sans); color: var(--body); }
/* the deeper layers are one dark ground: depth, not decoration */
.band--model, .band--evidence, .band--source { background: var(--night); border-top-color: var(--night-rule); }
.band--model .band__name, .band--evidence .band__name, .band--source .band__name, .band--model .rec__k, .band--evidence .rec__k, .band--source .rec__k { color: var(--night-dim); }
.band--model .rec__v, .band--evidence .rec__v, .band--source .rec__v { color: var(--night-body); }
.band--model .rec__v.mono b, .band--evidence .rec__v.mono b, .band--source .rec__v.mono b { color: var(--night-ink); }
.band--model .rec__v em, .band--evidence .rec__v em, .band--source .rec__v em { color: var(--night-dim); }
/* inspecting a layer */
.rec.is-focus { background: var(--accent-soft); border-left-color: var(--accent); }
.band--model .rec.is-focus, .band--evidence .rec.is-focus, .band--source .rec.is-focus { background: var(--accent-night-soft); border-left-color: var(--accent-night); }
.band--model .rec.is-focus .rec__v, .band--evidence .rec.is-focus .rec__v, .band--source .rec.is-focus .rec__v { color: var(--night-ink); }
/* the trace: one line from the statement down to the source, lighting the record each layer rests on */
.how[data-trace='reset'] .rec.is-key, .how[data-trace='reset'] .how__trace { transition: none !important; }
.how__trace { position: absolute; left: 12px; top: 22px; bottom: 22px; width: 2px; background: var(--accent); transform-origin: top; transform: scaleY(0); opacity: 0; pointer-events: none; }
.how[data-trace='on'] .how__trace { opacity: 1; transform: scaleY(1); transition: transform 1600ms cubic-bezier(0.45, 0, 0.2, 1), opacity 200ms; }
.how[data-trace='on'] .rec.is-key { background: var(--accent-soft); border-left-color: var(--accent); transition-duration: 400ms; }
.how[data-trace='on'] .band--model .rec.is-key, .how[data-trace='on'] .band--evidence .rec.is-key, .how[data-trace='on'] .band--source .rec.is-key { background: var(--accent-night-soft); border-left-color: var(--accent-night); }
.how[data-trace='on'] .band--model .rec.is-key .rec__v, .how[data-trace='on'] .band--evidence .rec.is-key .rec__v, .how[data-trace='on'] .band--source .rec.is-key .rec__v { color: var(--night-ink); }
.how[data-trace='on'] .band--state .rec.is-key { transition-delay: 300ms; }
.how[data-trace='on'] .band--model .rec.is-key { transition-delay: 650ms; }
.how[data-trace='on'] .band--evidence .rec.is-key { transition-delay: 1000ms; }
.how[data-trace='on'] .band--source .rec.is-key { transition-delay: 1350ms; }
/* folding back to the surface */
.band[data-fold] { transition: grid-template-rows 520ms var(--ease), padding 520ms var(--ease), opacity 360ms var(--ease), border-color 520ms; }
.how[data-stack='folded'] .band[data-fold] { grid-template-rows: 0fr; padding-block: 0; opacity: 0; border-top-color: transparent; }
.how[data-stack='folded'] .band--source { transition-delay: 0ms; }
.how[data-stack='folded'] .band--evidence { transition-delay: 70ms; }
.how[data-stack='folded'] .band--model { transition-delay: 140ms; }
.how[data-stack='folded'] .band--state { transition-delay: 210ms; }
.how[data-stack='folded'] .how__trace { opacity: 0; }
.how__panel { position: sticky; top: 24px; }
.how__nav { display: flex; gap: 10px; }
.how__explain { margin-top: 26px; min-height: 168px; }
.how__ph { font: 400 26px/1.15 var(--serif); color: var(--ink); margin-bottom: 12px; }
.how__explain p:not(.how__ph) { font: 400 15.5px/1.6 var(--sans); color: var(--body); }
.how__trace-ctl { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--rule); }
.how__note { margin-top: 14px; }

/* ==========================================================================================================
   8 · THE PRINCIPLE
   ========================================================================================================== */
.principle { min-height: 72vh; display: grid; align-content: center; padding-block: clamp(96px, 12vw, 160px); }
.principle__text { font: 400 clamp(32px, 4.3vw, 64px)/1.1 var(--serif); text-transform: uppercase; color: var(--ink); max-width: 17em; }
.principle__text .q { color: var(--quiet); }

/* ==========================================================================================================
   9 · ASSISTANT vs KAIRO
   ========================================================================================================== */
.vs { border-top: 1px solid var(--hair); }
.vs__title { max-width: 18em; }
.vs__grid { position: relative; display: grid; margin-top: clamp(48px, 6vw, 80px);
  grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(16px, 3vw, 40px); row-gap: 10px; }
.vs__col-h { grid-row: 1; grid-column: 2; padding-bottom: 8px; font: 600 12px/1.2 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--meta); }
.vs__col-h--k { grid-column: 3; color: var(--accent); }
.vs__layer--k { display: none; }
.vs__layer { grid-column: 1; grid-row: var(--r); align-self: center; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--meta); }
.vs__cell { grid-row: var(--r); display: flex; align-items: center; min-height: 56px; padding: 0 18px; font-size: 12.5px; }
.vs__cell--a { grid-column: 2; border: 1px dashed #c3c8d2; color: var(--meta); }
.vs__cell--empty { color: var(--meta); font-style: italic; }
.vs__cell--surface { font: 500 15px/1.35 var(--sans) !important; }
.vs__cell--a.vs__cell--surface { color: var(--meta); }
.vs__cell--k { grid-column: 3; position: relative; border: 1px solid var(--ink-soft); background: var(--panel); color: var(--ink-soft); padding-left: 30px; }
.vs__cell--k.vs__cell--surface { color: var(--ink); }
.vs__cell--k::before { content: ''; position: absolute; left: 13px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--accent); }
.vs__thread { grid-column: 3; grid-row: 2 / 7; justify-self: start; margin-left: 16px; width: 1px; background: var(--accent); margin-block: 28px; position: relative; z-index: 1; pointer-events: none; }
.vs__flow { grid-row: 7; padding-top: 14px; font-size: 12px; line-height: 1.5; color: var(--meta); text-wrap: balance; }
.vs__flow--a { grid-column: 2; }
.vs__flow--k { grid-column: 3; color: var(--accent); }
.vs__mark { display: flex; margin: 18px 0 0 calc(96px + clamp(16px, 3vw, 40px) * 2 + (100% - 96px - clamp(16px, 3vw, 40px) * 2) / 2); font-size: 10px; color: var(--ink-soft); }
.vs__sep { margin: 0 4px; color: var(--faint); }
.vs__key { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; } /* a key never wraps away from its swatch */
.vs__line { margin-top: clamp(48px, 5vw, 72px); font: 400 clamp(22px, 2.3vw, 32px)/1.35 var(--serif); color: var(--ink); max-width: 30em; }

/* ==========================================================================================================
   10 · WHAT EXISTS TODAY
   ========================================================================================================== */
.today { border-top: 1px solid var(--hair); }
.today__lede { margin-top: 20px; }
.tb { margin-top: clamp(48px, 5vw, 72px); }
.tb__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding-bottom: 16px; border-bottom: 1.5px solid var(--ink); }
.tb__mark { font-size: 12px; color: var(--ink); }
.tb__def { font: 400 14px/1.4 var(--sans); color: var(--meta); text-wrap: pretty; }
.tb--progress .tb__head, .tb--next .tb__head { border-bottom-color: var(--rule); }
.tb__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 44px); }
.tb__item { padding: 20px 0 18px; border-bottom: 1px solid var(--hair); }
.tb__t { font: 500 16px/1.3 var(--sans); color: var(--ink); text-wrap: pretty; }
.tb__d { margin-top: 6px; font: 400 14px/1.5 var(--sans); color: var(--body); }
.tb__tag { display: table; margin-top: 6px; padding: 2px 6px; border: 1px solid var(--rule); font: 500 10px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--meta); vertical-align: 2px; }
.tb__note { margin-top: 16px; }
.tb__more { display: none; }
.tb--next .tb__t { color: var(--ink-soft); }
.tb--next .tb__d { color: var(--meta); }
.tb__limits { margin-top: clamp(40px, 4vw, 56px); padding-top: 22px; border-top: 1px solid var(--rule); font: 400 15.5px/1.6 var(--sans); color: var(--ink-soft); max-width: 46em; }

/* ==========================================================================================================
   11 · WHY NOW · ANOTHER YOU
   ========================================================================================================== */
.why { border-top: 1px solid var(--hair); }
.why__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.why__title .q { color: var(--quiet); }
.why__body p { font: 400 17px/1.6 var(--sans); color: var(--body); text-wrap: pretty; }
.why__list { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0; font: 500 15px/1.4 var(--sans); color: var(--ink-soft); }
.why__list li::before { content: '·  '; color: var(--faint); }
.another { padding: clamp(120px, 15vw, 220px) 0; }
.another__pair { display: grid; grid-template-columns: auto clamp(40px, 6vw, 96px) auto; justify-content: center; align-items: center; gap: clamp(16px, 2vw, 28px); }
.another__l { white-space: nowrap; text-align: right; font: 400 clamp(36px, 5.2vw, 76px)/1.02 var(--serif); text-transform: uppercase; color: var(--ink); }
.another__rule { height: 1px; background: var(--faint); }
.another__r { white-space: nowrap; font: 500 clamp(18px, 2.2vw, 32px)/1.2 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--link); }

/* ==========================================================================================================
   12 · FOUNDER
   ========================================================================================================== */
.founder { border-top: 1px solid var(--hair); }
.founder__name { font: 400 clamp(30px, 3.4vw, 48px)/1.05 var(--serif); letter-spacing: -0.01em; text-transform: uppercase; color: var(--ink); }
.founder__text { margin-top: 26px; max-width: 34em; font: 400 clamp(21px, 2vw, 28px)/1.45 var(--serif); color: var(--ink-soft); }
.founder__links { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: 34px; }

/* ==========================================================================================================
   13 · CLOSING
   ========================================================================================================== */
.closing { min-height: 100vh; display: grid; align-content: center; padding-block: clamp(120px, 14vw, 200px); }
.closing__setup { font: 400 clamp(22px, 2.5vw, 36px)/1.15 var(--serif); text-transform: uppercase; color: var(--quiet); }
.closing__big { margin-top: clamp(20px, 2.6vw, 36px); font: 400 clamp(52px, 9.6vw, 140px)/0.97 var(--serif); letter-spacing: -0.02em; text-transform: uppercase; color: var(--ink); }

/* ==========================================================================================================
   responsive
   ========================================================================================================== */
@media (max-width: 1100px) {
  .how__body { grid-template-columns: minmax(0, 1fr) 300px; }
  .ns__score { grid-template-columns: 116px repeat(4, minmax(0, 1fr)) minmax(0, 0.7fr) minmax(250px, 1.4fr); }
  .ns__sit { font-size: 16px; }
}
@media (max-width: 899px) {
  /* the day becomes a vertical timeline; arrivals interrupt it in order */
  .day__line { display: flex; flex-direction: column; padding: 0; margin-top: 28px; border-left: 1.5px solid var(--ink); padding-left: 22px; }
  .day__stops, .day__arrivals { display: contents; }
  .day__stops { border: 0; }
  .day__stops li, .day__arrivals li { order: var(--o); }
  .day__stops li { display: flex; align-items: baseline; gap: 14px; padding: 12px 0; }
  .day__stops b { width: 64px; flex: 0 0 64px; font-size: 24px; }
  .day__stops span { margin-top: 0; }
  .day__arrivals li { position: relative; left: auto; top: auto; bottom: auto; height: auto !important; max-width: none; margin: 2px 0 2px 78px; padding: 6px 0 6px 12px; display: block; }
  .day__arrivals li::before, .day__arrivals .up::before, .day__arrivals .dn::before { left: -4px; top: 12px; bottom: auto; }

  .twin__grid { margin-top: 44px; padding-top: 0; }
  .twin__head { display: none; }
  .twin__line { left: 9px; top: 11px; bottom: 120px; }
  .twin__row { grid-template-columns: 20px minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 10px; min-height: 0; padding-bottom: 36px; }
  .twin__you { grid-column: 2; grid-row: 1; text-align: left; }
  .twin__dot { grid-column: 1; grid-row: 1; justify-self: start; margin-left: 4px; margin-top: 6px; }
  .twin__k { grid-column: 2; grid-row: 2; padding: 10px 0 0 14px; border-left: 2px solid var(--accent-soft); }
  .twin__row--quiet .twin__you { display: none; }
  .twin__row--quiet .twin__k::before { content: 'Kairo · while you sleep'; }
  .twin__row--quiet .twin__k { grid-row: 1; }
  .twin__row--quiet .twin__dot { margin-top: 18px; }
  .twin__meet { text-align: left; padding-left: 0; }
  .twin__you::before, .twin__k::before { display: block; margin-bottom: 4px; font: 600 10px/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; }
  .twin__you::before { content: 'You'; color: var(--meta); }
  .twin__k::before { content: 'Kairo'; color: var(--accent); }
  .twin__end { margin: 0 0 22px 2px; }
  .twin__title, .twin .eyebrow { text-align: left; }

  .ns__score { display: block; margin-top: 26px; }
  .ns__axis { display: flex; flex-wrap: wrap; gap: 0 16px; padding-bottom: 8px; border-bottom: 1px solid var(--night-rule); }
  .ns__t { min-height: 44px; padding: 0; margin: 0; }
  .ns__t--dawn { margin-left: 0; color: var(--night-dim); }
  .ns__t--dawn i { background: var(--night); }
  .ns__t--dawn:hover, .ns__t--dawn[aria-current='true'] { color: var(--night-ink); }
  .ns__col, .ns__lane, .ns__sit, .ns__offline { display: none; }
  .ns__ev { max-width: none; margin-top: 22px; padding: 0 0 0 20px; border-left: 1px solid var(--night-rule); }
  .ns__ev::before { left: -6px; top: 4px; }
  .ns__ev::after { content: attr(data-sit); display: block; order: -1; }
  .ns__ev::after { position: absolute; top: -18px; left: 20px; font: 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--night-dim); }
  .ns__ev { margin-top: 40px; }
  .ns__ev[data-state='future'] { display: none; }
  .ns__ev { background: none; margin-bottom: 0; }
  .ns:not([data-at='4']) .ns__bh, .ns:not([data-at='4']) .ns__out { display: none; }
  .ns__dawn { display: block; margin: 34px calc(-1 * var(--gut)) 0; padding: 26px var(--gut) 28px; }
  .ns__dawn::after { display: none; }
  .ns__back { padding-top: 0; }
  .ns__bh { margin-top: 16px; }
  .ns__out { margin-top: 12px; }
  .ns[data-at='4'] .ns__dawn { }

  .how__tabs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); scroll-padding-inline: var(--gut);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gut), #000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--gut), #000 calc(100% - 48px), transparent); }
  .how__tabs::after { content: ''; flex: 0 0 var(--gut); }
  .how__tabs::-webkit-scrollbar { display: none; }
  .how__tabs [role='tab'] { flex: 0 0 auto; width: 44%; min-height: 0; justify-content: flex-start; gap: 10px; padding-block: 14px; scroll-snap-align: start; padding-right: 12px; }
  .how__body { display: flex; flex-direction: column; gap: 22px; }
  .how__panel { position: static; order: -1; }
  .how__explain { min-height: 0; margin-top: 18px; }
  .band { padding: 14px 16px 14px 24px; }
  .band__in { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .rec { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .rec > .mark { justify-self: start; margin-top: 4px; }

  .vs__grid { grid-template-columns: 74px minmax(0, 1fr); }
  .vs__col-h { grid-column: 2; }
  .vs__col-h--k { grid-row: 8; grid-column: 2; margin-top: 34px; }
  .vs__layer { grid-row: var(--r); }
  .vs__layer--k { display: block; grid-row: calc(var(--r) + 7); }
  .vs__cell--a { grid-column: 2; }
  .vs__cell--k { grid-column: 2; grid-row: calc(var(--r) + 7); }
  .vs__thread { grid-column: 2; grid-row: 9 / 14; }
  .vs__flow--a { grid-column: 2; grid-row: 7; }
  .vs__flow--k { grid-column: 2; grid-row: 14; }
  .vs__mark { margin-left: calc(74px + clamp(16px, 3vw, 40px)); white-space: normal; flex-wrap: wrap; row-gap: 8px; }

  .tb__grid { grid-template-columns: minmax(0, 1fr); }
  .why__grid { grid-template-columns: minmax(0, 1fr); }
  .another__pair { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .another__l { text-align: left; white-space: normal; font-size: min(36px, 9.6vw); }
  .another__rule { width: 64px; }
}
@media (min-width: 900px) and (max-width: 999px) {
  .tb__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* how: a qualified mark wraps inside its own tab instead of running into the next */
.how__tabs .mark { white-space: normal; align-items: flex-start; line-height: 1.35; }
.how__tabs .mark .bm { margin-top: 2px; }

@media (max-width: 899px) {
  .tb__head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .tb--next .tb__item:last-child { border-bottom: 0; }
}
@media (max-width: 599px) {
  .day__close .display-m { font-size: 7.8vw; }
  .principle { min-height: 0; }
  .principle__text { font-size: min(32px, 8.4vw); }
  .closing { min-height: 70svh; padding-block: 96px 140px; }
  .closing__big { font-size: 10.4vw; }
  .why__list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
  /* what exists today: the first items of each band, the rest one tap away */
  .tb:not(.is-open) .tb__item:nth-child(n + 5) { display: none; }
  .tb__more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 6px; padding: 0; background: none; border: 0; color: var(--link); font: 500 14.5px/1 var(--sans); cursor: pointer; }
  .tb__more::after { content: '↓'; }
  .tb.is-open .tb__more::after { content: '↑'; }
}
@media (max-width: 599px) {
  .vs__mark { flex-direction: column; align-items: flex-start; }
  .vs__sep { display: none; }
}
@media (max-width: 429px) {
  /* the long caption stacks and the captions tighten, so both stay centred under their figures */
  .hero__label { font-size: 10px; letter-spacing: 0.05em; }
  .hero__label b { letter-spacing: 0.08em; }
  .hero__label[data-label='double'] b { width: min-content; margin-inline: auto; white-space: normal; }
}

/* reduced motion: every state is reached at once; nothing travels */
[data-motion='reduce'] *, [data-motion='reduce'] *::before, [data-motion='reduce'] *::after { transition-duration: 1ms !important; transition-delay: 0ms !important; animation-duration: 1ms !important; animation-delay: 0ms !important; scroll-behavior: auto !important; }