/* The owner's phone showcase. Colours, fonts, radii, shadows and motion come from the design
   system (tokens.css, fonts.css). The one deliberate deviation from the app's 13 px scale is the
   marketing-size display type for the page's headings and numbers. Phone first (iPhone portrait),
   then landscape and desktop. */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --pad: 16px;
  --maxw: 1120px;
  --top-h: calc(44px + 40px + env(safe-area-inset-top));
  --scene: var(--ba-color-text-secondary);
}
@media (min-width: 640px) { :root { --pad: 24px; } }
@media (min-width: 900px) { :root { --top-h: calc(52px + env(safe-area-inset-top)); } }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--top-h) + 8px); }
body {
  margin: 0;
  background: var(--ba-color-canvas);
  color: var(--ba-color-text-primary);
  font-family: var(--ba-font-family-ui);
  font-feature-settings: var(--ba-font-features-ui-default);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  overflow-x: hidden;
}
body.lb-open { overflow: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
figure { margin: 0; }
p { margin: 0; }

[data-scene="explore"] { --scene: var(--ba-color-scene-explore); }
[data-scene="flow"] { --scene: var(--ba-color-scene-flow); }
[data-scene="stroke"] { --scene: var(--ba-color-scene-stroke); }
[data-scene="seizure"] { --scene: var(--ba-color-scene-seizure); }
[data-scene="neurons"] { --scene: var(--ba-color-scene-neurons); }
[data-scene="drugs"] { --scene: var(--ba-color-scene-drugs); }

/* ---------- top bar ---------- */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding-top: env(safe-area-inset-top);
  background: var(--ba-color-surface-translucent-topbar);
  -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--ba-color-border-hairline);
}
.top-row { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 var(--pad); gap: 16px; }
.wordmark { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--ba-font-weight-semibold); letter-spacing: -0.012em; font-size: 15px; }
.wordmark::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid var(--ba-color-text-primary); box-shadow: inset 0 0 0 2.5px var(--ba-color-canvas), inset 0 0 0 5px var(--ba-color-text-primary); }
.stamp { font-family: var(--ba-font-family-mono); font-size: 11px; color: var(--ba-color-text-tertiary); white-space: nowrap; }
.chips { display: flex; gap: 6px; overflow-x: auto; padding: 0 var(--pad) 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.chips::-webkit-scrollbar { display: none; }
.chips a {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
  border-radius: var(--ba-radius-pill); border: 1px solid var(--ba-color-border-hairline);
  background: var(--ba-color-surface-2); color: var(--ba-color-text-secondary);
  font-size: 12px; font-weight: var(--ba-font-weight-medium); white-space: nowrap;
  transition: background var(--ba-motion-duration-state) var(--ba-motion-easing-standard), color var(--ba-motion-duration-state) var(--ba-motion-easing-standard);
}
.chips a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--scene); }
.chips a.active { color: var(--ba-color-text-primary); border-color: var(--ba-color-border-medium); background: var(--ba-color-surface-3); }
@media (min-width: 900px) {
  .top { display: flex; align-items: center; justify-content: space-between; height: calc(52px + env(safe-area-inset-top)); padding-left: var(--pad); padding-right: var(--pad); }
  .top-row { padding: 0; height: 52px; gap: 20px; }
  .chips { padding: 0; }
}

/* ---------- type ---------- */
.eyebrow { font-size: 11px; line-height: 14px; font-weight: var(--ba-font-weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--scene); margin: 0 0 10px; }
h1 { font-size: clamp(34px, 8.6vw, 64px); line-height: 1.02; letter-spacing: -0.028em; font-weight: var(--ba-font-weight-semibold); margin: 0 0 14px; text-wrap: balance; }
h2 { font-size: clamp(27px, 6.2vw, 40px); line-height: 1.08; letter-spacing: -0.022em; font-weight: var(--ba-font-weight-semibold); margin: 0 0 10px; text-wrap: balance; }
h3 { font-size: 18px; line-height: 24px; letter-spacing: -0.012em; font-weight: var(--ba-font-weight-semibold); margin: 0 0 6px; text-wrap: balance; }
.lede { font-size: clamp(15px, 2.2vw, 18px); line-height: 1.45; color: var(--ba-color-text-secondary); max-width: 62ch; text-wrap: pretty; }
.sub { font-size: 13px; line-height: 1.45; color: var(--ba-color-text-tertiary); margin: 14px 0 8px; }

/* ---------- hero ----------
   Portrait phones: the clip gets the top half to itself and the copy sits below it.
   Landscape and desktop: the clip is full-bleed, pushed right, with the copy over a gradient. */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--top-h) 0 28px; overflow: hidden; }
.hero-media { position: relative; z-index: 0; height: 52vh; height: 52svh; min-height: 280px; flex: none; }
/* Portrait: the clip floats above the copy, centred (the brain sits at 50 % of its frame, measured over the
   orbit), 132 % wide so it reads at full width. The clip's decoded black (#080C10) is a shade under the canvas,
   so the box takes that colour and feathers into the page at its top and bottom, and the clip's own edges fade
   out before they can show. Selectors carry `.media >` because the generic `.media > video` rule below would
   otherwise win on width, and `max-width: none` beats the global `img, video { max-width: 100% }`. */
.hero-media .media { position: absolute; inset: 0; height: 100%; aspect-ratio: auto !important; background: #060A0F;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%); }
.hero-media .media > video {
  /* max-width: none, or the global `img, video { max-width: 100% }` caps the clip at the viewport and the -16 %
     margin pushes it off centre (the v1 seam). The clip's sides end off-screen; its top and bottom fade into
     the box, whose colour is the clip's black as Chrome renders it (measured 6,10,15). */
  width: 132%; max-width: none; height: 100%; margin-left: -16%; object-fit: contain; object-position: 50% 50%; background: transparent;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.hero-media.cover .media > video { object-fit: cover; -webkit-mask-image: none; mask-image: none; }
.hero-media .media .hd { display: none; }
.hero::before, .hero::after { content: ""; position: absolute; z-index: 1; pointer-events: none; display: none; }
.hero::after { left: 0; right: 0; bottom: 0; height: 60%; background: linear-gradient(to top, var(--ba-color-canvas) 0%, rgba(11, 14, 19, 0.86) 34%, rgba(11, 14, 19, 0) 100%); }
.hero::before { top: 0; bottom: 0; left: 0; width: 70%; background: linear-gradient(to right, rgba(11, 14, 19, 0.92) 0%, rgba(11, 14, 19, 0.6) 45%, rgba(11, 14, 19, 0) 100%); }
.hero-copy { position: relative; z-index: 2; max-width: 760px; margin-top: auto; padding: 10px var(--pad) 0; }
.hero .lede { color: var(--ba-color-text-primary); opacity: 0.88; }
.hero .methods { margin-top: 14px; max-width: 70ch; }
.hero-actions { display: flex; gap: 10px; margin: 18px 0 0; flex-wrap: wrap; }
@media (min-width: 900px), (orientation: landscape) and (min-width: 600px) {
  .hero { padding: calc(var(--top-h) + 8px) var(--pad) 44px; }
  .hero-media { position: absolute; inset: 0; height: auto; min-height: 0; }
  .hero-media .media { background: var(--ba-color-canvas); -webkit-mask-image: none; mask-image: none; }
  .hero-media .media > video { width: 100%; margin: 0; object-position: 68% 45%;
    -webkit-mask-image: radial-gradient(ellipse 60% 75% at 66% 48%, #000 55%, transparent 100%);
    mask-image: radial-gradient(ellipse 60% 75% at 66% 48%, #000 55%, transparent 100%); }
  .hero-media.cover .media > video { object-position: 60% 45%; }
  .hero::before, .hero::after { display: block; }
  .hero-copy { padding: 0; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .hero h1 { font-size: clamp(28px, 7.4vh, 40px); margin-bottom: 8px; }
  .hero .lede { display: none; }
  .hero .methods { display: none; }
  .hero-copy { max-width: 56vw; }
  .hero-actions { margin-top: 10px; }
  .hero .btn { height: 36px; font-size: 13px; }
}
.btn {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; cursor: pointer;
  border-radius: var(--ba-radius-sm); border: 1px solid var(--ba-color-border-medium);
  background: var(--ba-color-surface-translucent-panel); color: var(--ba-color-text-primary);
  font-size: 14px; font-weight: var(--ba-font-weight-medium); white-space: nowrap;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.btn.primary { background: var(--ba-color-accent-primary); color: var(--ba-color-accent-on-primary); border-color: transparent; }
.btn .play { width: 0; height: 0; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
/* the public edition: the call to action in the top bar, the WebGPU note, links into the app */
.top-row .cta { height: 30px; padding: 0 12px; font-size: 12px; -webkit-backdrop-filter: none; backdrop-filter: none; }
.note { font-size: 12px; line-height: 1.45; color: var(--ba-color-text-tertiary); margin: 10px 0 0; max-width: 62ch; }
.hero .note { color: var(--ba-color-text-secondary); }
.sec-actions { margin: 16px 0 0; }
.open { margin: 8px 0 0; font-size: 12px; line-height: 1.4; }
.open a { color: var(--ba-color-accent-primary); font-weight: var(--ba-font-weight-medium); }
.open a::after { content: " →"; }
footer .credits { margin-top: 10px; }
@media (min-width: 900px) { .hero { padding-bottom: 48px; } .hero-media video { object-position: 50% 42%; } }
@media (orientation: landscape) and (max-height: 500px) { .hero { min-height: 100vh; } .hero-copy { max-width: 60vw; } .hero .lede { display: none; } }

/* ---------- sections ---------- */
.sec { padding: 56px var(--pad) 8px; max-width: var(--maxw); margin: 0 auto; }
.sec-head { margin-bottom: 20px; max-width: 780px; }
.grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, 1fr); } .grid .card.wide { grid-column: span 2; } }
.grid + .grid { margin-top: 12px; }

.card {
  margin: 0 0 12px; background: var(--ba-color-surface-1); border: 1px solid var(--ba-color-border-hairline);
  border-radius: var(--ba-radius-lg); overflow: hidden; box-shadow: var(--ba-shadow-panel);
  display: flex; flex-direction: column;
}
.grid .card { margin: 0; }
.feature { margin-bottom: 16px; }
.media { position: relative; background: #000; overflow: hidden; width: 100%; }
.media > video, .media > img { width: 100%; height: 100%; object-fit: cover; }
.fit-contain > video, .fit-contain > img { object-fit: contain; background: var(--ba-color-canvas); }
.paper .media { background: #fff; }
.paper .media > img { padding: 6px; background: #fff; }
.media .hd {
  position: absolute; right: 8px; bottom: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px;
  border-radius: var(--ba-radius-pill); background: rgba(11, 14, 19, 0.72); border: 1px solid var(--ba-color-border-medium);
  font-family: var(--ba-font-family-mono); font-size: 11px; color: var(--ba-color-text-secondary); cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.hd-ic { width: 0; height: 0; border-left: 7px solid currentColor; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
.media.needs-tap::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; z-index: 1;
  border-radius: 50%; background: rgba(11, 14, 19, 0.72); border: 1px solid var(--ba-color-border-strong);
}
.media.needs-tap::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 0; height: 0; margin: -9px 0 0 -6px; z-index: 1;
  border-left: 16px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent;
}
figcaption { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.cap { font-size: 14px; line-height: 1.45; color: var(--ba-color-text-secondary); text-wrap: pretty; }
.cap strong { color: var(--ba-color-text-primary); font-weight: var(--ba-font-weight-semibold); letter-spacing: -0.006em; }
.methods { font-size: 11.5px; line-height: 1.4; color: var(--ba-color-text-tertiary); letter-spacing: 0.005em; text-wrap: pretty; }
.methods .k { font-family: var(--ba-font-family-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; margin-right: 6px; }
.caption-only figcaption { padding: 10px 12px 12px; }
.caption-only .cap { font-size: 13px; }

/* ---------- numbers ---------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 4px 0 16px; }
@media (min-width: 640px) { .stats { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { padding: 14px; background: var(--ba-color-surface-1); border: 1px solid var(--ba-color-border-hairline); border-radius: var(--ba-radius-md); }
.stat b { display: block; font-size: clamp(24px, 5.6vw, 34px); line-height: 1.05; font-weight: var(--ba-font-weight-medium); letter-spacing: -0.02em; font-feature-settings: var(--ba-font-features-tabular); color: var(--ba-color-text-primary); }
.stat b small { font-size: 0.55em; color: var(--ba-color-text-secondary); font-weight: var(--ba-font-weight-regular); letter-spacing: 0; margin-left: 2px; }
.stat span { display: block; margin-top: 6px; font-size: 12px; line-height: 1.35; color: var(--ba-color-text-secondary); }
.stat .methods { margin-top: 6px; }

/* ---------- research ---------- */
.rgrid { display: grid; gap: 12px; }
@media (min-width: 900px) { .rgrid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
.rcard { padding: 16px 16px 14px; background: var(--ba-color-surface-1); border: 1px solid var(--ba-color-border-hairline); border-radius: var(--ba-radius-lg); display: flex; flex-direction: column; gap: 8px; }
.rcard .card { margin: 6px 0 2px; box-shadow: none; background: var(--ba-color-surface-0); }
.tag { align-self: flex-start; padding: 3px 8px; border-radius: var(--ba-radius-pill); font-family: var(--ba-font-family-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid; }
.tag.kept, .tag.won { color: var(--ba-color-scene-neurons); border-color: rgba(79, 220, 164, 0.4); }
.tag.killed { color: var(--ba-color-scene-flow); border-color: rgba(255, 90, 95, 0.4); }
.tag.open { color: var(--ba-color-scene-explore); border-color: rgba(124, 196, 255, 0.4); }
.num { font-size: 15px; line-height: 1.4; font-weight: var(--ba-font-weight-medium); font-feature-settings: var(--ba-font-features-tabular); color: var(--ba-color-text-primary); }
.rcard .cap { font-size: 13.5px; }
.rcard h3 { margin: 0; }

/* ---------- screens rail ---------- */
.rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--pad) 14px; margin: 0 calc(-1 * var(--pad)); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rail::-webkit-scrollbar { display: none; }
.rail .card { flex: 0 0 86%; scroll-snap-align: center; margin: 0; }
@media (min-width: 640px) { .rail .card { flex-basis: 62%; } }
@media (min-width: 1024px) { .rail .card { flex-basis: 46%; } }

/* ---------- lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0.97); display: flex; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lb-body { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.lb-body video, .lb-body img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lb-body video { width: 100%; height: 100%; }
.lb-close { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: calc(10px + env(safe-area-inset-right)); z-index: 2; width: 40px; height: 40px; border-radius: 50%; background: rgba(17, 21, 29, 0.85); border: 1px solid var(--ba-color-border-medium); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.lb-cap { position: absolute; left: calc(16px + env(safe-area-inset-left)); right: 64px; top: calc(20px + env(safe-area-inset-top)); font-size: 12px; line-height: 1.35; color: var(--ba-color-text-secondary); text-shadow: var(--ba-component-methods-caption-text-shadow); pointer-events: none; }

/* ---------- footer ---------- */
footer { padding: 40px var(--pad) calc(32px + env(safe-area-inset-bottom)); max-width: var(--maxw); margin: 24px auto 0; font-size: 12px; line-height: 1.5; color: var(--ba-color-text-tertiary); border-top: 1px solid var(--ba-color-border-hairline); }
footer a { color: var(--ba-color-text-secondary); }

[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }