/* ==========================================================================
   Anima Biotech v2: shared base (all *-v2.html pages) + homepage sections.
   Self-contained. Does not depend on assets/css/styles.css.

   Visual system (after Modal / Integrated Biosciences):
   - Black void canvas, warm-tinted neutrals, ONE light source: the amber
     accent #FF9D34, rationed to actions, signals and the hero object.
   - Flat surfaces: depth from surface steps (#000 → ground → carbon) and
     1px warm hairlines, never drop shadows (the nav bar is the exception).
   - Geist for text (weight 400/500, tight tracking), Geist Mono for labels,
     counters and data.
   - Graphics are emissive and geometric: an LED dot-matrix hero object,
     isometric dot-shaded icons, code windows. No photography.
   Mobile-first; breakpoints 640px and 901px.
   ========================================================================== */

/* Self-hosted Geist (SIL OFL), so no visitor data goes to Google Fonts.
   Variable files: Geist 400–700, Geist Mono 400–500. Latin + Latin Extended only. */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../assets/fonts/geist-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../assets/fonts/geist-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url(../assets/fonts/geist-mono-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url(../assets/fonts/geist-mono-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* Colour: warm-tinted neutral scale around one amber accent */
  --bg: #000;
  --bg-alt: #0b0b0b;          /* alternate band */
  --surface: #111111;         /* ground: cards, panels */
  --carbon: #1a1a1a;          /* elevated: nav, code-window bars */
  --line: #303030;            /* hairline */
  --line-strong: #4a4a4a;     /* interactive hairline, outlines */
  --text: #f5f5f5;            /* headings and body (warm white) */
  --muted: #cccccc;           /* lead copy, secondary text */
  --dim: #999999;             /* micro-copy, captions */
  --label: #ffb85c;           /* eyebrow labels */
  --accent: #ff9d34;
  --accent-hi: #ffd8aa;       /* brightest point of the glow */
  --accent-soft: rgba(255, 157, 52, .14);
  --accent-glow: rgba(255, 157, 52, .5);

  /* Type */
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Spacing scale (4px base) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  --gutter: 20px;
  --max: 1200px;
  --radius: 12px;             /* panels, code windows, buttons */
  --radius-sm: 8px;           /* cards, inputs, small surfaces */
  --header-h: 64px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Dot field used behind diagrams (the LED-matrix motif) */
  --dots: radial-gradient(circle at center, rgba(245, 245, 245, .07) 1px, transparent 1.4px) 0 0 / 12px 12px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--s-4)); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; padding-top: var(--header-h);
  background: var(--bg); color: var(--text);
  font: 400 16px/1.6 var(--sans); letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -0.03em; line-height: 1.08; }
p { margin: 0; }
::selection { background: var(--accent); color: #000; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: var(--s-4); top: -60px; z-index: 100; padding: var(--s-2) var(--s-4); background: var(--accent); color: #000; border-radius: 6px; }
.skip-link:focus { top: var(--s-4); }

/* ---------- Shared type ---------- */
/* Eyebrow: mono label with a small amber signal dot (on the homepage the dot
   becomes a numbered section counter, see .page-home below). */
.eyebrow {
  display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-4);
  font: 500 .72rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--label);
}
.eyebrow::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
h2 { font-size: clamp(1.9rem, 4.6vw, 3rem); max-width: 22ch; }
h3 { font-size: 1.05rem; letter-spacing: -0.015em; line-height: 1.3; }
.lead { margin-top: var(--s-4); max-width: 60ch; color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.55; }
.text-link { color: var(--accent); font-weight: 500; white-space: nowrap; transition: color .3s var(--ease); }
.text-link:hover { color: var(--accent-hi); }
.tag {
  display: inline-block; padding: 1px var(--s-2); border: 1px solid var(--line-strong); border-radius: 999px;
  font: 500 .66rem/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
/* Placeholder for numbers we don't have yet */
.ph { font-family: var(--mono); font-size: .8em; font-weight: 500; color: var(--accent); background: var(--accent-soft); border: 1px dashed var(--accent); border-radius: 4px; padding: 0 .3em; }

/* ---------- Buttons ---------- */
/* Primary: the amber pill (rationed, one per view). Ghost: hairline, 12px radius. */
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-5);
  border: 1px solid transparent; border-radius: var(--radius); font-weight: 500; font-size: .95rem; letter-spacing: -0.02em;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.btn-primary { background: var(--accent); color: #000; border-radius: 999px; }
.btn-primary:hover { background: var(--accent-hi); }
.btn-ghost { background: var(--surface); border-color: var(--line-strong); color: var(--text); }
.btn-ghost:hover { border-color: var(--muted); }

/* ---------- Sections ---------- */
.section { padding-block: var(--s-8); border-top: 1px solid var(--line); }
.section-alt { background: var(--bg-alt); }

/* ---------- Header (class names match assets/js/main.js) ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  background: rgba(19, 17, 16, .78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .25), 0 4px 6px -4px rgba(0, 0, 0, .25);
}
.site-header > .container { display: flex; align-items: center; height: var(--header-h); gap: var(--s-4); }
.logo img { width: auto; height: 34px; }
.header-right { display: flex; align-items: center; margin-left: auto; }
.social-links { list-style: none; display: flex; gap: var(--s-2); margin: 0 var(--s-2) 0 0; padding: 0; }
.social-links a { display: block; padding: var(--s-1); color: var(--dim); transition: color .3s var(--ease); }
.social-links a:hover { color: var(--text); }
.social-links svg { width: 15px; height: 15px; fill: currentColor; }
.nav-toggle { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: none; border: 0; color: var(--text); cursor: pointer; }
.nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after { display: block; width: 20px; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform .2s ease, background-color .2s ease; }
.nav-toggle-bar { position: relative; }
.nav-toggle-bar::before, .nav-toggle-bar::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bar::before { top: -6px; }
.nav-toggle-bar::after { top: 6px; }
.nav-open .nav-toggle-bar { background: transparent; }
.nav-open .nav-toggle-bar::before { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle-bar::after { transform: translateY(-6px) rotate(-45deg); }
.site-nav {
  position: fixed; inset: var(--header-h) 0 auto 0; padding: var(--s-3) var(--gutter) var(--s-5);
  background: var(--carbon); border-bottom: 1px solid var(--line);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.nav-open .site-nav { opacity: 1; visibility: visible; transform: none; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.site-nav a { display: block; padding: var(--s-3); border-radius: var(--radius-sm); color: var(--muted); font-size: 1rem; font-weight: 500; letter-spacing: -0.02em; transition: color .3s var(--ease); }
.site-nav a:hover { color: var(--text); }
.site-nav li:not(.nav-cta) a[aria-current="page"] { color: var(--text); }
.site-nav .nav-cta a { margin-top: var(--s-2); text-align: center; border-radius: 999px; background: var(--accent); color: #000; }
.site-nav .nav-cta a:hover { background: var(--accent-hi); color: #000; }

/* ==========================================================================
   Homepage
   ========================================================================== */

/* ---------- 1. Hero: centred stack over an LED dot-matrix object ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; padding-top: var(--s-8); text-align: center; }
.hero-copy { max-width: 880px; margin-inline: auto; }
.hero .eyebrow { justify-content: center; }
.hero h1 { max-width: 16ch; margin-inline: auto; font-size: clamp(2.4rem, 7.4vw, 4.6rem); letter-spacing: -0.04em; line-height: 1.02; }
/* "BioGPU" sits on its own line in the accent, like Modal's lit phrase */
.hero-name { display: block; margin-bottom: .08em; color: var(--accent); }
.hero-lead { margin: var(--s-5) auto 0; max-width: 46ch; color: var(--muted); font-size: clamp(1.05rem, 1.8vw, 1.3rem); line-height: 1.5; }

/* The stage: canvas drawn by js/home-v2.js; the SVG is the no-JS fallback */
.hero-stage { position: relative; height: clamp(280px, 46vw, 520px); margin-top: var(--s-6); }
.hero-stage::before {
  content: ""; position: absolute; inset: 10% 15% 0; z-index: -1;
  background: radial-gradient(ellipse 50% 45% at 50% 55%, rgba(255, 157, 52, .16), transparent 70%);
}
.hero-led {
  position: absolute; inset: 0; width: 100%; height: 100%;
  -webkit-mask-image: radial-gradient(ellipse 58% 62% at 50% 52%, #000 45%, transparent 100%);
          mask-image: radial-gradient(ellipse 58% 62% at 50% 52%, #000 45%, transparent 100%);
}
.hero-net { position: absolute; left: 50%; top: 50%; width: min(90%, 440px); transform: translate(-50%, -50%); }
.hero-stage.is-live .hero-net { display: none; }
.hn-edges path { fill: none; stroke: var(--line-strong); stroke-width: 1.2; }
.hn-flow path { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 3 15; opacity: .75; animation: hn-flow 2.8s linear infinite; }
.hn-nodes circle { fill: var(--muted); }
.hn-nodes .hub { fill: var(--accent); }
@keyframes hn-flow { to { stroke-dashoffset: -36; } }

/* Hero run (home-v2.html): full-width stage drawn by js/hero-v2.js.
   Plates → recognized events → Visual Biology Tokens → network. */
.hero-stage--network { height: clamp(540px, 60vw, 700px); margin-top: var(--s-6); }
.hero-stage--network::before { display: none; }
.hero-run { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-stage--network:not(.is-live) .hero-run { display: none; }
.hr-overlay { position: absolute; inset: 0; pointer-events: none; text-align: left; }
.hr-badge {
  position: absolute; top: var(--s-4); left: max(var(--s-4), 3vw); margin: 0;
  display: flex; align-items: center; gap: var(--s-2);
  font: 400 .72rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim);
}
.hr-badge[hidden] { display: none; }
.hr-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: hr-blink 1.6s steps(2, jump-none) infinite; }
@keyframes hr-blink { 50% { opacity: .2; } }
.hr-strip {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5);
  padding: var(--s-8) max(var(--s-4), 3vw) var(--s-4);
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .85) 55%, #000);
}
.hr-stats { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: 0; padding: 0; list-style: none; font: 400 .74rem/1.3 var(--mono); color: var(--muted); }
.hr-num { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; margin-right: .35em; }
.hr-flow { margin: 0; font: 400 .72rem/1.3 var(--mono); letter-spacing: .02em; color: var(--dim); white-space: nowrap; }
/* Disease network state + legend (updated by js/hero-v2.js), off the network itself */
.hr-state { margin: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--s-2) var(--s-4); font: 500 .8rem/1.3 var(--mono); color: var(--text); }
.hr-state > span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.hr-state-t b { color: var(--accent); font-weight: 500; font-variant-numeric: tabular-nums; }
.hr-k { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.hr-k-up { background: var(--accent); }
.hr-k-down { background: #7fb3d0; }
.hr-k-none { background: rgba(255, 157, 52, .32); }
@media (max-width: 699px) {
  .hr-flow { display: none; }
  .hr-strip { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .hr-state { justify-content: flex-start; font-size: .7rem; gap: var(--s-1) var(--s-3); }
  .hr-strip { padding-top: var(--s-6); }
  .hr-stats { gap: var(--s-1) var(--s-4); font-size: .68rem; }
}
@media (prefers-reduced-motion: reduce) { .hr-dot { animation: none; } }

/* ---------- 2. Proof strip ---------- */
.proof { padding-block: var(--s-6); border-top: 1px solid var(--line); }
.proof-inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s-4); }
.proof-label { font: 500 .72rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.proof-logos { grid-column: 1 / -1; grid-row: 2; list-style: none; margin: 0; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); }
.proof-logos a { display: block; opacity: .55; filter: grayscale(1) brightness(1.6); transition: opacity .3s var(--ease), filter .3s var(--ease); }
.proof-logos a:hover { opacity: 1; filter: none; }
.proof-logos img { width: auto; }
.logo-abbvie { height: 18px; }
.logo-takeda { height: 44px; }   /* PNG has transparent padding */
.logo-lilly { height: 36px; }
.proof .text-link { grid-column: 2; grid-row: 1; font-size: .9rem; }

/* ---------- 3. Platform: three workload-style cards with isometric icons ---------- */
.arch { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.arch-step { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.arch-art {
  display: grid; place-items: center; height: 96px; border-bottom: 1px solid var(--line); border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: radial-gradient(ellipse 60% 70% at 50% 60%, rgba(255, 157, 52, .1), transparent 70%), var(--dots);
}
.arch-art svg { width: 72%; max-width: 150px; height: auto; overflow: visible; }
.arch-body { padding: var(--s-3); }
.arch-step h3 { font-size: .85rem; }
.arch-step p { margin-top: var(--s-1); color: var(--muted); font-size: .74rem; line-height: 1.4; }
/* Marching dashes between layers: evidence → model → agents */
.arch-step + .arch-step::before {
  content: ""; position: absolute; top: 48px; left: calc(-1 * var(--s-3) - 1px); width: calc(var(--s-3) + 2px); height: 2px;
  background: repeating-linear-gradient(90deg, var(--accent) 0 4px, transparent 4px 8px);
  animation: arch-march .7s linear infinite;
}
@keyframes arch-march { from { background-position: 0 0; } to { background-position: 8px 0; } }

/* Isometric icons: faces shaded with an LED dot pattern (#iso-dots) */
.iso-t { fill: url(#iso-dots); stroke: var(--accent); stroke-width: .8; stroke-opacity: .7; }
.iso-l { fill: url(#iso-dots); fill-opacity: .55; stroke: var(--accent); stroke-width: .8; stroke-opacity: .45; }
.iso-r { fill: url(#iso-dots); fill-opacity: .28; stroke: var(--accent); stroke-width: .8; stroke-opacity: .35; }
.iso-faint { fill-opacity: .45; stroke-opacity: .3; }
.iso-edge { fill: none; stroke: var(--accent); stroke-width: 1.1; stroke-linecap: round; }
.iso-drop { fill: none; stroke: var(--accent); stroke-width: .6; stroke-dasharray: 2 3; opacity: .45; }
.iso-shadow { fill: var(--accent); opacity: .45; }
.iso-node { fill: var(--bg); stroke: var(--accent); stroke-width: 1.4; }
.iso-lit { fill: var(--accent-hi); filter: drop-shadow(0 0 3px var(--accent)) drop-shadow(0 0 7px var(--accent-glow)); }
.arch.is-in .iso-lit { animation: iso-blink 3.2s ease-in-out infinite; }
.arch.is-in .arch-step:nth-child(2) .iso-lit { animation-delay: 1s; }
.arch.is-in .arch-step:nth-child(3) .iso-lit { animation-delay: 2s; }
@keyframes iso-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------- Canvas motion hosts (drawn by js/home-v2.js) ----------
   Each host holds a <canvas> and a CSS .canvas-fallback (a halftone dot
   shape) that shows without JS; JS adds .is-live and hides the fallback. */
.plates, .wave, .sculpt { position: relative; }
.plates canvas, .wave canvas, .sculpt canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.canvas-fallback {
  position: absolute; inset: 0;
  background: radial-gradient(circle, var(--accent) 1.3px, transparent 1.8px) 0 0 / 8px 8px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 22%, transparent 48%);
          mask-image: radial-gradient(circle at 50% 50%, #000 22%, transparent 48%);
  opacity: .8;
}
.is-live > .canvas-fallback { display: none; }

/* ---------- 4. Foundation model ---------- */
/* Halftone plates (after Subframe "CMYK proof"), set like a print proof */
.model-head { display: grid; gap: var(--s-6); align-items: center; }
.plates {
  height: 240px; border: 1px solid var(--line); border-radius: var(--radius);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255, 157, 52, .07), transparent 70%), var(--bg);
}
.plates-label { position: absolute; z-index: 1; font: 500 .62rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.plates-label-tl { left: var(--s-3); top: var(--s-3); }
.plates-label-br { right: var(--s-3); bottom: var(--s-3); color: var(--accent); }
/* Registration marks in two corners */
.plates::before, .plates::after {
  content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: linear-gradient(var(--line-strong), var(--line-strong)) center / 1px 22px no-repeat,
              linear-gradient(var(--line-strong), var(--line-strong)) center / 22px 1px no-repeat;
}
.plates::before { right: var(--s-3); top: var(--s-3); }
.plates::after { left: var(--s-3); bottom: var(--s-3); }
.model-data { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: var(--s-6); }
.md-item { padding: var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.md-num { font: 400 clamp(2.2rem, 7vw, 4rem)/1 var(--mono); letter-spacing: -0.05em; color: var(--text); }
.md-label { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3); font: 500 .72rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.md-text { margin-top: var(--s-2); color: var(--muted); font-size: .88rem; line-height: 1.5; }

.recognize { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: var(--s-6); }
.rec-panel { margin: 0; }
.rec-panel svg { display: block; width: 100%; height: auto; padding: var(--s-2); background: var(--dots), var(--bg); border: 1px solid var(--line); border-radius: var(--radius); }
.rec-panel figcaption { margin-top: var(--s-2); color: var(--muted); font-size: .8rem; line-height: 1.4; }
.rec-panel figcaption strong { display: block; color: var(--text); font-weight: 500; }
.rec-frame, .rec-frames rect { fill: rgba(19, 17, 16, .8); stroke: var(--line-strong); stroke-width: 1; }
.rec-grid { fill: none; stroke: var(--line); stroke-width: 1; }
.rec-node, .rec-nodes circle { fill: var(--accent); transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 3px var(--accent-glow)); }
.rec-ring { fill: none; stroke: var(--accent); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.rec-label { font: 500 9px var(--mono); fill: var(--text); text-anchor: middle; }
.rec-edges { fill: none; stroke: var(--accent); stroke-width: 1.2; opacity: .75; stroke-dasharray: 1; stroke-dashoffset: 0; }
.rec-text { margin-top: var(--s-5); max-width: 70ch; color: var(--text); font-size: 1rem; line-height: 1.6; }
.rec-claims { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.rec-claims > div { padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.rec-claims h3 { display: flex; align-items: center; gap: var(--s-2); }
.rec-claims h3::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.rec-claims p { margin-top: var(--s-2); color: var(--muted); font-size: .92rem; line-height: 1.55; }

/* One-shot: nodes light up one by one, then the network draws in */
.js .recognize:not(.is-in) .rec-node, .js .recognize:not(.is-in) .rec-nodes circle { opacity: .15; }
.js .recognize:not(.is-in) .rec-edges { stroke-dashoffset: 1; }
.js .recognize:not(.is-in) .rec-label { opacity: 0; }
.recognize.is-in .rec-node, .recognize.is-in .rec-nodes circle { animation: rec-on .5s ease-out var(--d) both; }
.recognize.is-in .rec-edges { animation: rec-draw 1.4s ease-in-out 1.7s both; }
.recognize.is-in .rec-label { animation: rec-fade .4s ease-out .8s both; }
.recognize.is-in .rec-ring { animation: rec-ring 2.2s ease-out 1s infinite; }
@keyframes rec-on { from { opacity: .15; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes rec-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes rec-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rec-ring { from { opacity: .7; transform: scale(.6); } to { opacity: 0; transform: scale(1.5); } }

/* ---------- 5. Application: drug in → network effect out (loops while in view) ---------- */
.apply { margin: var(--s-6) 0 0; max-width: 820px; }
.apply svg { display: block; width: 100%; height: auto; padding: var(--s-3); background: var(--dots), var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.ap-chips rect { fill: var(--bg); stroke: var(--line-strong); stroke-width: 1; }
.ap-chips text { font: 500 10px var(--mono); fill: var(--text); text-anchor: middle; letter-spacing: -.02em; }
.ap-rails path { fill: none; stroke: var(--line-strong); stroke-width: 1.2; }
/* Beams: one short gradient dash per path travels the rail (pathLength = 100) */
.ap-beams path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 16 200; stroke-dashoffset: 16; opacity: 0; filter: drop-shadow(0 0 3px var(--accent-glow)); }
.ap-box rect { fill: var(--bg); stroke: var(--line-strong); stroke-width: 1.2; }
.ap-box text { font: 500 10px var(--mono); fill: var(--text); text-anchor: middle; letter-spacing: .06em; }
.ap-wells circle { fill: var(--line-strong); }
.ap-edges { fill: none; stroke: var(--line-strong); stroke-width: 1.2; }
.ap-nodes circle { --c: var(--dim); fill: var(--c); }
.ap-nodes .up { --c: var(--accent); }
.ap-nodes .down { --c: var(--text); }
.apply.is-in .ap-beams path { animation: ap-beam-in 6s cubic-bezier(.45, 0, .3, 1) var(--d, 0s) infinite; }
.apply.is-in .ap-beams .ap-beam-out { animation-name: ap-beam-out; }
.apply.is-in .ap-wells circle { animation: ap-well 6s ease-in-out infinite; }
.apply.is-in .ap-nodes circle { animation: ap-node 6s ease-in-out infinite; animation-delay: var(--d); }
@keyframes ap-beam-in { 0% { stroke-dashoffset: 16; opacity: 1; } 30% { stroke-dashoffset: -100; opacity: 1; } 31%, 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes ap-beam-out { 0%, 44% { stroke-dashoffset: 16; opacity: 0; } 45% { opacity: 1; } 60% { stroke-dashoffset: -100; opacity: 1; } 61%, 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes ap-well { 0%, 30% { fill: var(--line-strong); } 38%, 50% { fill: var(--accent); } 62%, 100% { fill: var(--line-strong); } }
@keyframes ap-node { 0%, 48% { fill: var(--dim); } 58%, 92% { fill: var(--c); } 100% { fill: var(--dim); } }
.ap-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); margin-top: var(--s-3); font: 400 .78rem/1.4 var(--mono); color: var(--muted); }
.ap-legend span { display: inline-flex; align-items: center; gap: var(--s-2); }
.ap-legend i { width: 9px; height: 9px; border-radius: 50%; }
.lg-up { background: var(--accent); }
.lg-down { background: var(--text); }
.lg-same { background: var(--dim); }
.ap-legend .text-link { font-family: var(--sans); font-size: .9rem; }

/* ---------- 6. The loop ---------- */
/* Phones: a 2×2 loop (01 → 02 ↓ 03 ← 04 ↑), so the whole cycle fits one screen.
   Wider: one horizontal row with a return line underneath. */
.loop {
  list-style: none; margin: var(--s-6) 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5);
  grid-template-areas: "a b" "d c";
  position: relative;
}
.loop-step { position: relative; padding: var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.loop-step:nth-child(1) { grid-area: a; }
.loop-step:nth-child(2) { grid-area: b; }
.loop-step:nth-child(3) { grid-area: c; }
.loop-step:nth-child(4) { grid-area: d; }
.loop-num { font: 500 .72rem/1 var(--mono); color: var(--accent); }
.loop-icon { width: 28px; height: 28px; margin: var(--s-3) 0; fill: none; stroke: var(--text); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.loop-step h3 { font-size: .98rem; }
.loop-step p { margin-top: var(--s-2); color: var(--muted); font-size: .85rem; line-height: 1.45; }
.loop-step::after { position: absolute; font: 400 1.2rem/1 var(--mono); color: var(--accent); }
.loop-step:nth-child(1)::after { content: "→"; right: calc(-1 * var(--s-5) + 4px); top: 50%; transform: translateY(-50%); }
.loop-step:nth-child(2)::after { content: "↓"; bottom: calc(-1 * var(--s-5) + 4px); left: 50%; transform: translateX(-50%); }
.loop-step:nth-child(3)::after { content: "←"; left: calc(-1 * var(--s-5) + 4px); top: 50%; transform: translateY(-50%); }
.loop-step:nth-child(4)::after { content: "↑"; top: calc(-1 * var(--s-5) + 4px); left: 50%; transform: translateX(-50%); }

/* ---------- 7. What the agent gets back: a code window ---------- */
.split { display: grid; gap: var(--s-6); align-items: start; }
.code { margin: 0; min-width: 0; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.code figcaption {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); padding: var(--s-3) var(--s-4);
  background: var(--carbon); border-bottom: 1px solid var(--line); font: 500 .72rem/1.4 var(--mono); color: var(--muted);
}
.code-dots { display: inline-flex; gap: 6px; }
.code-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.code-dots i:first-child { background: var(--accent); }
.code figcaption .tag { margin-left: auto; color: var(--accent); border-color: rgba(255, 157, 52, .4); }
.code pre { margin: 0; padding: var(--s-5) var(--s-4); overflow-x: auto; font: 400 .78rem/1.7 var(--mono); color: var(--text); }
.code .c { color: var(--dim); }
.code .k { color: var(--muted); }
.code .s { color: var(--accent-hi); }
.code .n { color: var(--accent); }
.code .f { color: var(--accent); }

/* ---------- 8. Differentiation table (cards on phones) ---------- */
.diff-wrap { margin-top: var(--s-6); }
.diff { width: 100%; border-collapse: collapse; font-size: .9rem; }
.diff thead { display: none; }
.diff tr { display: block; padding: var(--s-4); margin-bottom: var(--s-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.diff th[scope="row"] { display: block; font: 500 .78rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text); text-align: left; }
.diff td { display: block; margin-top: var(--s-3); color: var(--muted); line-height: 1.5; }
.diff td:last-child { color: var(--text); }
.diff td::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 500 .66rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.diff-note { margin-top: var(--s-4); color: var(--dim); font-size: .85rem; }

/* ---------- 9. Experimentally resolved network ---------- */
.growth { list-style: none; max-width: 920px; margin: var(--s-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.growth li { position: relative; text-align: center; }
.growth li + li::before {
  content: "→"; position: absolute; left: calc(-1 * var(--s-4) / 2 - .35em); top: 34%;
  font: 400 1.2rem/1 var(--mono); color: var(--accent);
}
.growth svg { width: 100%; height: auto; padding: var(--s-2); background: var(--dots), var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.growth .e path { fill: none; stroke: var(--line-strong); stroke-width: 1.2; }
.growth .n circle { fill: var(--muted); }
.growth .n.new circle { fill: var(--accent); filter: drop-shadow(0 0 2.5px var(--accent-glow)); }
.growth p { margin-top: var(--s-2); font-size: .72rem; line-height: 1.35; color: var(--muted); }
.growth strong { display: block; font: 500 .72rem/1.4 var(--mono); color: var(--text); }

/* Flywheel as orbiting labels (after Subframe "orbiting circles").
   The track turns; each label counter-turns so it stays upright.
   Reduced motion: labels sit still, evenly spaced. */
.flywheel-split { display: grid; gap: var(--s-6); align-items: center; margin-top: var(--s-7); overflow-x: clip; }
.orbit { --size: 260px; --r: calc(var(--size) / 2 - 18px); position: relative; width: var(--size); aspect-ratio: 1; margin: 0 auto; }
.orbit-ring { position: absolute; inset: 18px; border: 1px dashed var(--line-strong); border-radius: 50%; animation: orbit-spin 40s linear infinite; }
.orbit-ring::before { content: ""; position: absolute; inset: 22%; border: 1px solid var(--line); border-radius: 50%; }
.orbit-spark { position: absolute; left: 50%; top: -3px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent), 0 0 3px var(--accent-hi); }
.orbit-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 31%; aspect-ratio: 1; border-radius: 22%;
  background: radial-gradient(circle at 50% 40%, rgba(255, 157, 52, .22), transparent 70%), var(--surface);
  border: 1px solid rgba(255, 157, 52, .55); box-shadow: 0 0 40px rgba(255, 157, 52, .18);
  font: 500 .74rem/1.25 var(--mono); letter-spacing: .02em; text-align: center; color: var(--text);
}
.orbit-track { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; animation: orbit-spin 40s linear infinite; }
.orbit-track li {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a)));
}
.orbit-track span {
  position: absolute; left: 0; top: 0; translate: -50% -50%; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px;
  background: var(--carbon); border: 1px solid var(--line-strong); border-radius: 999px;
  font: 500 .62rem/1.2 var(--mono); color: var(--text);
  animation: orbit-spin 40s linear infinite reverse;
}
.orbit-track span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
@keyframes orbit-spin { to { transform: rotate(360deg); } }

.moat { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
.flywheel-split .moat { margin-top: 0; }
.moat > div { padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.moat h3 { display: flex; align-items: center; gap: var(--s-2); }
.moat h3::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.moat p { margin-top: var(--s-2); color: var(--muted); font-size: .92rem; }

/* ---------- Model: three stats + scope line (as on the live site) ---------- */
.model-data-3 .md-item:last-child { grid-column: 1 / -1; }
.model-scope { margin-top: var(--s-3); font: 500 .8rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--label); }

/* ---------- Activity explorer: pick an activity → one image + one statement ----------
   Phones: activities scroll as a row of chips above the view. 901px+: a vertical
   list on the left, the view on the right. JS (js/home-v2.js) switches the
   active item and auto-advances until the visitor picks one. Without JS the first
   activity shows. */
.explorer { display: grid; gap: var(--s-4); margin-top: var(--s-7); }
.xp-tabs { display: flex; gap: var(--s-2); overflow-x: auto; padding-bottom: var(--s-2); scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.xp-tabs button, .xp-more {
  flex: none; display: flex; align-items: center; gap: 8px; padding: 9px 14px; white-space: nowrap;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px;
  font: 500 .85rem/1.2 var(--sans); letter-spacing: -0.01em; color: var(--muted); cursor: pointer; text-align: left;
  transition: color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.xp-tabs button::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); transition: background-color .3s var(--ease), box-shadow .3s var(--ease); }
.xp-tabs button:hover { color: var(--text); border-color: var(--muted); }
.xp-tabs button[aria-selected="true"] { color: var(--text); border-color: rgba(255, 157, 52, .6); background: radial-gradient(ellipse 80% 120% at 0% 50%, rgba(255, 157, 52, .14), transparent 70%), var(--surface); }
.xp-tabs button[aria-selected="true"]::before { background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
.xp-more { cursor: default; border-style: dashed; color: var(--dim); }
.xp-view { margin: 0; }
.xp-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; border: 1px solid var(--line-strong); border-radius: var(--radius); }
.xp-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.03); transition: opacity .6s var(--ease), transform 1.2s var(--ease); }
.xp-media img.is-active { opacity: 1; transform: none; }
.xp-input { position: absolute; left: var(--s-3); bottom: var(--s-3); padding: 3px 9px; background: rgba(0, 0, 0, .7); border: 1px solid var(--line-strong); border-radius: 999px; font: 500 .64rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.xp-statements { display: grid; margin-top: var(--s-4); }
.xp-statements p { grid-area: 1 / 1; max-width: 62ch; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s; color: var(--muted); font-size: 1rem; line-height: 1.55; }
.xp-statements p.is-active { opacity: 1; visibility: visible; }
.xp-statements strong { color: var(--text); font-weight: 500; }

/* ---------- Visual Biology Tokens: featured time-course ----------
   Four frames cross-fade on an 8 s loop (CSS only), with a timestamp badge,
   a progress track and a timeline whose active tick follows the frame.
   Starts when scrolled into view (.is-in). Without JS or with reduced motion
   the last frame (24 h) shows, with its tick lit. */
.vbt-feature { display: grid; gap: var(--s-5); margin-top: var(--s-6); align-items: start; }
.timecourse { margin: 0; }
.tc-stage { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--radius); background: #000; }
.tc-frame { position: absolute; inset: 0; opacity: 0; }
.tc-frame:last-of-type { opacity: 1; }
.tc-frame img { width: 100%; height: 100%; object-fit: cover; }
/* Dummy progression: one image with stepped exposure, standing in for a real time-course */
.tc-frame:nth-of-type(1) img { filter: brightness(.45) saturate(.5); }
.tc-frame:nth-of-type(2) img { filter: brightness(.7) saturate(.75); }
.tc-frame:nth-of-type(3) img { filter: brightness(.95); transform: scale(1.02); }
.tc-frame:nth-of-type(4) img { filter: brightness(1.2) contrast(1.1); transform: scale(1.04); }
.tc-badge {
  position: absolute; left: var(--s-3); bottom: var(--s-3); padding: 4px 10px;
  background: rgba(0, 0, 0, .7); border: 1px solid var(--line-strong); border-radius: 999px;
  font: 500 .8rem/1.2 var(--mono); color: var(--accent-hi); backdrop-filter: blur(4px);
}
.tc-dummy { position: absolute; z-index: 2; right: var(--s-3); top: var(--s-3); background: rgba(0, 0, 0, .7); color: var(--accent); border-color: rgba(255, 157, 52, .5); }
.tc-rec {
  position: absolute; z-index: 2; left: var(--s-3); top: var(--s-3); display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; background: rgba(0, 0, 0, .7); border-radius: 999px;
  font: 500 .64rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text);
}
.tc-rec::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.tc-track { position: relative; height: 2px; margin-top: var(--s-3); background: var(--line-strong); border-radius: 2px; overflow: hidden; }
.tc-progress { position: absolute; inset: 0; background: var(--accent); transform-origin: left; }
.tc-timeline { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); font: 500 .74rem/1.2 var(--mono); color: var(--dim); }
.tc-timeline li:last-child { color: var(--accent); }
.tc-timeline li + li { text-align: center; }
.tc-timeline li:last-child { text-align: right; }
.timecourse figcaption { margin-top: var(--s-3); color: var(--muted); font-size: .88rem; line-height: 1.5; }
.timecourse figcaption strong { color: var(--text); font-weight: 500; }

.timecourse.is-in .tc-frame { animation: tc-show 8s linear calc(var(--i) * 2s) infinite both; }
.timecourse.is-in .tc-timeline li { animation: tc-tick 8s linear calc(var(--i) * 2s) infinite both; }
.timecourse.is-in .tc-progress { animation: tc-progress 8s linear infinite; }
@keyframes tc-show { 0% { opacity: 0; } 3% { opacity: 1; } 25% { opacity: 1; } 28%, 100% { opacity: 0; } }
@keyframes tc-tick { 0% { color: var(--dim); } 1%, 25% { color: var(--accent); } 26%, 100% { color: var(--dim); } }
@keyframes tc-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.vbt-side .token-id { margin-bottom: var(--s-3); }
.vbt-finding { font-size: clamp(1.2rem, 2.2vw, 1.5rem); line-height: 1.35; letter-spacing: -0.02em; }
.vbt-finding b { font-weight: 500; color: var(--accent); }
.vbt-note { margin-top: var(--s-3); color: var(--muted); font-size: .9rem; }
.code-sm { margin-top: var(--s-5); }
.code-sm pre { padding: var(--s-4); font-size: .74rem; }

/* ---------- Token flip cards: front = cell images, back = the finding ----------
   3D flip on .is-flipped (JS auto-flips in view, click/tap toggles). Both faces
   share one grid cell so the card takes the taller face's height. Reduced
   motion: instant swap. No JS: both faces show, stacked. */
.flips { display: grid; gap: var(--s-4); }
.flip { display: block; width: 100%; padding: 0; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; perspective: 1200px; }
.flip-inner { display: grid; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.3, .1, .2, 1); }
.flip.is-flipped .flip-inner { transform: rotateY(180deg); }
.flip-face {
  grid-area: 1 / 1; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.flip-back { transform: rotateY(180deg); border-color: rgba(255, 157, 52, .45); background: radial-gradient(ellipse 90% 80% at 50% 0%, rgba(255, 157, 52, .1), transparent 70%), var(--surface); }
.flip:hover .flip-face, .flip:focus-visible .flip-face { border-color: var(--line-strong); }
.flip:hover .flip-back { border-color: rgba(255, 157, 52, .7); }
.flip .token-id { font: 500 .72rem/1.4 var(--mono); color: var(--accent); }
.flip-imgs { display: flex; gap: var(--s-2); }
.flip-imgs img { flex: 1; min-width: 0; height: 120px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.flip-text { font-size: 1.02rem; line-height: 1.5; color: var(--text); }
.flip-text b { font-weight: 500; color: var(--accent); }
.flip-hint { margin-top: auto; font: 500 .64rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
html:not(.js) .flip-inner { display: block; transform: none; }
html:not(.js) .flip-face { transform: none; }
html:not(.js) .flip-back { margin-top: var(--s-2); }
html:not(.js) .flip-hint { display: none; }

/* ---------- Network intelligence: experiments → BioGPU → growing network ----------
   One 12 s loop in three acts (0%, 30%, 60%): an experiment chip lights, its beam
   enters BioGPU, the wells flash, a beam carries the result out, and that stage
   of the network draws in while existing nodes change activity. Everything fades
   at 94–100% and the loop restarts. Without JS / reduced motion: the full,
   final network shows. */
.grow { margin: var(--s-6) 0 0; max-width: 860px; }
.grow svg { display: block; width: 100%; height: auto; padding: var(--s-3); background: var(--dots), var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.gx-chip rect { fill: var(--bg); stroke: var(--line-strong); stroke-width: 1; }
.gx-chip text { font: 500 10px var(--mono); fill: var(--text); text-anchor: middle; }
.gx-beams path { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 16 200; stroke-dashoffset: 16; opacity: 0; filter: drop-shadow(0 0 3px var(--accent-glow)); }
.gx-wells circle { fill: var(--line-strong); }
.gx-edge { fill: none; stroke: var(--line-strong); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.gx-ap1 circle, .gx-ap2 circle, .gx-ap3 circle { fill: var(--dim); }
/* Final state (no JS / reduced motion); animations override these while playing */
.grow circle.up2, .grow circle.up3 { fill: var(--accent); filter: drop-shadow(0 0 2.5px var(--accent-glow)); }
.grow circle.down2, .grow circle.down3 { fill: var(--text); }

.grow.is-in .gx-chip-1 rect { animation: gx-chip1 12s linear infinite; }
.grow.is-in .gx-chip-2 rect { animation: gx-chip2 12s linear infinite; }
.grow.is-in .gx-chip-3 rect { animation: gx-chip3 12s linear infinite; }
.grow.is-in .gx-beam-1 { animation: gx-beam1 12s linear infinite; }
.grow.is-in .gx-beam-2 { animation: gx-beam2 12s linear infinite; }
.grow.is-in .gx-beam-3 { animation: gx-beam3 12s linear infinite; }
.grow.is-in .gx-beam-out { animation: gx-out 12s linear infinite; }
.grow.is-in .gx-wells circle { animation: gx-wells 12s linear infinite; }
.grow.is-in .gx-e1 { animation: gx-draw1 12s ease-out infinite; }
.grow.is-in .gx-e2 { animation: gx-draw2 12s ease-out infinite; }
.grow.is-in .gx-e3 { animation: gx-draw3 12s ease-out infinite; }
.grow.is-in .gx-ap1 { animation: gx-ap1 12s ease-out infinite; }
.grow.is-in .gx-ap2 { animation: gx-ap2 12s ease-out infinite; }
.grow.is-in .gx-ap3 { animation: gx-ap3 12s ease-out infinite; }
.grow.is-in .up2 { animation: gx-up2 12s linear infinite; }
.grow.is-in .up3 { animation: gx-up3 12s linear infinite; }
.grow.is-in .down2 { animation: gx-down2 12s linear infinite; }
.grow.is-in .down3 { animation: gx-down3 12s linear infinite; }

@keyframes gx-chip1 { 0%, 28% { stroke: var(--accent); } 30%, 100% { stroke: var(--line-strong); } }
@keyframes gx-chip2 { 0%, 29% { stroke: var(--line-strong); } 30%, 58% { stroke: var(--accent); } 60%, 100% { stroke: var(--line-strong); } }
@keyframes gx-chip3 { 0%, 59% { stroke: var(--line-strong); } 60%, 92% { stroke: var(--accent); } 94%, 100% { stroke: var(--line-strong); } }
@keyframes gx-beam1 { 0% { stroke-dashoffset: 16; opacity: 1; } 8% { stroke-dashoffset: -100; opacity: 1; } 8.5%, 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes gx-beam2 { 0%, 30% { stroke-dashoffset: 16; opacity: 0; } 30.5% { opacity: 1; } 38% { stroke-dashoffset: -100; opacity: 1; } 38.5%, 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes gx-beam3 { 0%, 60% { stroke-dashoffset: 16; opacity: 0; } 60.5% { opacity: 1; } 68% { stroke-dashoffset: -100; opacity: 1; } 68.5%, 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes gx-out {
  0%, 12% { stroke-dashoffset: 16; opacity: 0; } 12.5% { opacity: 1; } 18% { stroke-dashoffset: -100; opacity: 1; } 18.5% { opacity: 0; }
  41.9% { stroke-dashoffset: 16; opacity: 0; } 42.5% { opacity: 1; } 48% { stroke-dashoffset: -100; opacity: 1; } 48.5% { opacity: 0; }
  71.9% { stroke-dashoffset: 16; opacity: 0; } 72.5% { opacity: 1; } 78% { stroke-dashoffset: -100; opacity: 1; } 78.5%, 100% { opacity: 0; }
}
@keyframes gx-wells {
  0%, 8% { fill: var(--line-strong); } 10%, 12% { fill: var(--accent); } 15% { fill: var(--line-strong); }
  38% { fill: var(--line-strong); } 40%, 42% { fill: var(--accent); } 45% { fill: var(--line-strong); }
  68% { fill: var(--line-strong); } 70%, 72% { fill: var(--accent); } 75%, 100% { fill: var(--line-strong); }
}
@keyframes gx-draw1 { 0%, 18% { stroke-dashoffset: 1; opacity: 1; } 26%, 94% { stroke-dashoffset: 0; opacity: 1; } 99%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes gx-draw2 { 0%, 48% { stroke-dashoffset: 1; opacity: 1; } 56%, 94% { stroke-dashoffset: 0; opacity: 1; } 99%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes gx-draw3 { 0%, 78% { stroke-dashoffset: 1; opacity: 1; } 86%, 94% { stroke-dashoffset: 0; opacity: 1; } 99%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes gx-ap1 { 0%, 18% { opacity: 0; } 22%, 94% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes gx-ap2 { 0%, 48% { opacity: 0; } 52%, 94% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes gx-ap3 { 0%, 78% { opacity: 0; } 82%, 94% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes gx-up2 { 0%, 50% { fill: var(--dim); } 54%, 100% { fill: var(--accent); } }
@keyframes gx-up3 { 0%, 80% { fill: var(--dim); } 84%, 100% { fill: var(--accent); } }
@keyframes gx-down2 { 0%, 50% { fill: var(--dim); } 54%, 100% { fill: var(--text); } }
@keyframes gx-down3 { 0%, 80% { fill: var(--dim); } 84%, 100% { fill: var(--text); } }

/* ---------- Drug application: untreated vs treated image pair (trial) ---------- */
.apply-head { display: grid; gap: var(--s-5); align-items: center; }
.ex-pair { margin: 0; }
.ex-imgs { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.ex-img { position: relative; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #000; }
.ex-img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.6) saturate(.6); }
.ex-treated img { filter: brightness(1.15) contrast(1.1); transform: scale(1.05); }
.ex-label {
  position: absolute; left: var(--s-2); bottom: var(--s-2); padding: 3px 9px;
  background: rgba(0, 0, 0, .72); border: 1px solid var(--line-strong); border-radius: 999px;
  font: 500 .7rem/1.3 var(--mono); color: var(--text);
}
.ex-treated .ex-label { color: var(--accent-hi); border-color: rgba(255, 157, 52, .5); }
.ex-pair figcaption { margin-top: var(--s-3); color: var(--muted); font-size: .85rem; line-height: 1.5; }

/* ---------- Visual Biology Tokens carousel ---------- */
.carousel-head { display: flex; align-items: center; justify-content: space-between; margin-top: var(--s-6); }
.hint { font: 500 .72rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.carousel-btns { display: none; gap: var(--s-2); }
.carousel-btn {
  width: 40px; height: 40px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text); font: 500 1rem/1 var(--mono); cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.carousel-btn:hover { background: var(--accent); border-color: var(--accent); color: #000; }
.carousel {
  list-style: none; margin: var(--s-4) 0 0; padding: 0 var(--gutter) var(--s-3);
  display: flex; gap: var(--s-3); overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter); scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.token {
  flex: 0 0 82%; max-width: 340px; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-5);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.token-id { display: flex; align-items: center; gap: var(--s-2); font: 500 .72rem/1.4 var(--mono); color: var(--accent); }
.token-finding { font-size: .98rem; line-height: 1.5; }
.token-finding b { font-weight: 500; color: var(--accent); }
.token-evidence { margin-top: auto; display: grid; gap: var(--s-2); }
.token-evidence-2 { grid-template-columns: 1fr 1fr; }
.token-evidence figure { margin: 0; }
.token-evidence img { width: 100%; height: 120px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.token-evidence figcaption { margin-top: var(--s-1); font: 400 .66rem/1.4 var(--mono); color: var(--dim); }

/* ---------- 11. The asset: point-cloud wave + stat band ---------- */
.wave {
  height: 150px; margin-top: var(--s-6);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.wave .canvas-fallback {
  -webkit-mask-image: radial-gradient(ellipse 50% 22% at 50% 55%, #000 40%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 22% at 50% 55%, #000 40%, transparent 100%);
}
.wave + .stats { margin-top: var(--s-4); }
.stats { margin: var(--s-6) 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.stats div { padding: var(--s-5) var(--s-4); background: var(--bg); }
.stats dt { font: 400 clamp(1.5rem, 3.4vw, 2.25rem)/1.1 var(--mono); letter-spacing: -0.04em; color: var(--text); overflow-wrap: anywhere; }
.stats dt .ph { font-size: .45em; letter-spacing: 0; }
.stats dd { margin: var(--s-2) 0 0; font: 500 .7rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }

/* ---------- 12. Team ---------- */
.team { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.team li { display: flex; align-items: center; gap: var(--s-4); }
.headshot {
  flex: none; width: 56px; height: 56px; border-radius: var(--radius-sm); object-fit: cover;
  background: var(--surface); border: 1px solid var(--line-strong); filter: grayscale(1);
}
.team p { color: var(--muted); font-size: .85rem; line-height: 1.4; }
.team strong { display: block; color: var(--text); font-size: 1rem; font-weight: 500; }
.team-line { margin-top: var(--s-6); color: var(--muted); }

/* ---------- 13. Closing CTA ---------- */
.cta {
  position: relative; padding-block: var(--s-9); border-top: 1px solid var(--line); text-align: center;
  background: radial-gradient(ellipse 45% 60% at 50% 100%, rgba(255, 157, 52, .16), transparent 70%), var(--dots);
}
.cta h2 { margin-inline: auto; font-size: clamp(2.2rem, 5.6vw, 3.75rem); letter-spacing: -0.04em; }
.cta .lead { margin-inline: auto; }
.cta .actions { justify-content: center; }
.cta-secondary { margin-top: var(--s-5); color: var(--muted); font-size: .92rem; }
/* Homepage CTA: copy beside a halftone sculpture (after Subframe "halftone sculpture") */
.cta-split { padding-block: var(--s-8); }
.cta-split > .container { display: grid; gap: var(--s-5); align-items: center; }
.sculpt { order: -1; height: 260px; }
.sculpt-label { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); white-space: nowrap; font: 500 .66rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }

/* ---------- Footer: compact, left-aligned ---------- */
.site-footer { padding-block: var(--s-7) var(--s-6); background: var(--bg); border-top: 1px solid var(--line); }
.site-footer > .container { display: grid; gap: var(--s-5); }
.footer-logo { display: inline-block; justify-self: start; }
.footer-logo img { width: auto; height: 40px; opacity: .85; }
.footer-nav, .footer-social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.footer-nav { gap: var(--s-2) var(--s-5); }
.footer-nav a, .footer-social a, .footer-contact a { color: var(--muted); transition: color .3s var(--ease); }
.footer-nav a { font-size: .92rem; font-weight: 500; }
.footer-nav a:hover, .footer-social a:hover, .footer-contact a:hover { color: var(--text); }
.footer-social { gap: var(--s-4); }
.footer-social a { display: block; padding: var(--s-1); }
.footer-social svg { width: 18px; height: 18px; fill: currentColor; }
.footer-contact { font-style: normal; color: var(--dim); font-size: .85rem; line-height: 1.6; }
.footer-copy { padding-top: var(--s-5); border-top: 1px solid var(--line); font: 400 .75rem/1.4 var(--mono); color: var(--dim); }

.to-top {
  position: fixed; right: var(--s-4); bottom: var(--s-4); z-index: 40; display: grid; place-items: center; width: 44px; height: 44px;
  background: var(--carbon); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--text);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s, color .3s var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { color: var(--accent); }
.to-top svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ==========================================================================
   Wider screens
   ========================================================================== */
@media (min-width: 640px) {
  :root { --gutter: 32px; }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .moat { grid-template-columns: 1fr 1fr; }
  .team { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
  .token { flex-basis: 320px; }
  .growth { gap: var(--s-6); }
  .growth li + li::before { left: calc(-1 * var(--s-6) / 2 - .4em); font-size: 1.4rem; }
  .growth p, .growth strong { font-size: .82rem; }
  .logo-abbvie { height: 24px; }
  .logo-takeda { height: 56px; }
  .logo-lilly { height: 46px; }

  .arch { gap: var(--s-6); }
  .arch-step + .arch-step::before { left: calc(-1 * var(--s-6) - 1px); width: calc(var(--s-6) + 2px); top: 80px; }
  .arch-art { height: 160px; }
  .arch-body { padding: var(--s-5); }
  .arch-step h3 { font-size: 1.15rem; }
  .arch-step p { margin-top: var(--s-2); font-size: .92rem; line-height: 1.5; }
  .recognize { gap: var(--s-5); max-width: 760px; }
  .rec-claims { grid-template-columns: 1fr 1fr; }
  .model-data { gap: var(--s-5); }
  .model-data-3 { grid-template-columns: repeat(3, 1fr); }
  .model-data-3 .md-item:last-child { grid-column: auto; }
  .plates { height: 300px; }
  .wave { height: 200px; }
  .orbit { --size: 360px; }
  .orbit-track span { gap: 6px; padding: 5px 10px; font-size: .7rem; }
  .sculpt { height: 340px; }
  .md-item { padding: var(--s-6); }

  .diff thead { display: table-header-group; }
  .diff tr { display: table-row; padding: 0; margin: 0; background: none; border: 0; }
  .diff th, .diff td { display: table-cell; padding: var(--s-4) var(--s-4) var(--s-4) 0; vertical-align: top; border-bottom: 1px solid var(--line); }
  .diff thead th { font: 500 .68rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); text-align: left; }
  .diff td { margin: 0; }
  .diff td::before { content: none; }
  .diff th[scope="row"] { width: 1%; white-space: nowrap; padding-right: var(--s-6); }

  .site-footer > .container { grid-template-columns: 1fr auto; align-items: center; row-gap: var(--s-6); }
  .footer-logo { grid-area: 1 / 1; }
  .site-footer nav { grid-area: 1 / 2; }
  .footer-contact { grid-area: 2 / 1; }
  .footer-social { grid-area: 2 / 2; justify-self: end; align-self: end; }
  .footer-copy { grid-area: 3 / 1 / 4 / -1; }
}

@media (min-width: 901px) {
  .section { padding-block: var(--s-9); }
  .hero { padding-top: var(--s-9); }
  .logo img { height: 36px; }

  /* Header: logo left, links centred, Contact pill right, socials last */
  .nav-toggle { display: none; }
  .header-right { flex: 1; }
  .social-links { order: 2; margin: 0 0 0 var(--s-4); padding-left: var(--s-4); border-left: 1px solid var(--line-strong); }
  .site-nav { flex: 1; position: static; padding: 0; background: none; border: 0; opacity: 1; visibility: visible; transform: none; }
  .site-nav ul { flex-direction: row; align-items: center; gap: var(--s-1); }
  .site-nav li:first-child { margin-left: auto; }
  .site-nav .nav-cta { margin-left: auto; }
  .site-nav a { padding: var(--s-2) var(--s-3); font-size: .875rem; white-space: nowrap; }
  .site-nav .nav-cta a { margin: 0; min-height: 36px; display: flex; align-items: center; padding: 0 var(--s-4); }

  .proof-inner { grid-template-columns: auto 1fr auto; gap: var(--s-7); }
  .proof-logos { grid-column: 2; grid-row: 1; justify-content: space-around; }
  .proof .text-link { grid-column: 3; }

  /* Loop: one row of four, with a return line underneath */
  .loop { grid-template-columns: repeat(4, 1fr); grid-template-areas: "a b c d"; gap: var(--s-6); padding-bottom: var(--s-7); }
  .loop-step { padding: var(--s-5); }
  .loop-step:nth-child(-n+3)::after { content: "→"; right: calc(-1 * var(--s-6) / 2 - .3em); left: auto; top: 50%; bottom: auto; transform: translateY(-50%); }
  .loop-step:nth-child(4)::after { content: none; }
  /* Return line 04 → 01: dashes flow down the right side, right-to-left along the bottom, up the left side */
  .loop::after {
    content: ""; position: absolute; left: 12.5%; right: 12.5%; bottom: var(--s-2); height: var(--s-6); opacity: .8;
    background:
      linear-gradient(90deg, var(--accent) 50%, transparent 0) 0 100% / 10px 1px repeat-x,
      linear-gradient(0deg, var(--accent) 50%, transparent 0) 0 0 / 1px 10px repeat-y,
      linear-gradient(0deg, var(--accent) 50%, transparent 0) 100% 0 / 1px 10px repeat-y;
    animation: loop-return 1s linear infinite;
  }
  @keyframes loop-return {
    from { background-position: 0 100%, 0 0, 100% 0; }
    to { background-position: -10px 100%, 0 -10px, 100% 10px; }
  }
  .loop::before {
    content: "← next iteration"; position: absolute; left: 50%; bottom: var(--s-2); z-index: 1;
    transform: translate(-50%, 50%); padding: 0 var(--s-3); background: var(--bg-alt);
    font: 500 .7rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
  }

  .split { grid-template-columns: 5fr 7fr; gap: var(--s-8); }
  .model-head { grid-template-columns: 7fr 5fr; gap: var(--s-8); }
  .vbt-feature { grid-template-columns: 7fr 5fr; gap: var(--s-7); }
  .explorer { grid-template-columns: 260px 1fr; gap: var(--s-6); align-items: start; }
  .xp-tabs { flex-direction: column; overflow: visible; padding: 0; }
  .xp-tabs button, .xp-more { border-radius: var(--radius-sm); padding: 12px 14px; }
  .apply-head { grid-template-columns: 7fr 5fr; gap: var(--s-8); }
  .plates { height: 340px; }
  .flywheel-split { grid-template-columns: 5fr 7fr; gap: var(--s-8); }
  .flywheel-split .moat { grid-template-columns: 1fr; }
  .wave { height: 240px; }
  .cta-split { padding-block: var(--s-9); text-align: left; }
  .cta-split > .container { grid-template-columns: 7fr 5fr; gap: var(--s-8); }
  .cta-split h2, .cta-split .lead { margin-inline: 0; }
  .cta-split .actions { justify-content: flex-start; }
  .sculpt { order: 0; height: 420px; }
  .code pre { font-size: .82rem; }

  .carousel { padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); scroll-padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); }
  .carousel-btns { display: flex; }
  .hint { visibility: hidden; }

  .stats div { padding: var(--s-6) var(--s-5); }
  .team { grid-template-columns: repeat(5, 1fr); gap: var(--s-7) var(--s-6); }
  .team li { flex-direction: column; align-items: flex-start; }
  .team .headshot { width: 120px; height: 120px; }
}

/* Five top-level links (Nov 2026): the row fits from 901px without shrinking the type */
.logo { flex: none; }
.site-nav li:not(.nav-cta) a[aria-current="true"] { color: var(--text); }
@media (min-width: 901px) and (max-width: 1099px) {
  .site-nav a { padding: var(--s-2) 10px; }
}

/* Pharma sub-menu: Pharma Workflows · Available targets · Cellular systems */
.sub-nav { border-bottom: 1px solid var(--line); background: var(--bg, #000); }
.sub-nav .container { display: flex; align-items: center; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; min-height: 48px; }
.sub-nav .container::-webkit-scrollbar { display: none; }
.sub-nav-label { font: 400 .68rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-right: var(--s-2); white-space: nowrap; }
.sub-nav a { padding: 8px 12px; border-radius: 999px; color: var(--muted); font-size: .88rem; white-space: nowrap; transition: color .3s var(--ease); }
.sub-nav a:hover { color: var(--text); }
.sub-nav a[aria-current="page"] { color: var(--text); background: rgba(255, 255, 255, .06); }
@media (max-width: 639px) { .sub-nav-label { display: none; } }

/* ==========================================================================
   Motion fallbacks: with reduced motion every visual shows its final state.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .hn-flow path, .arch-step + .arch-step::before, .arch .iso-lit, .apply .ap-beams path, .apply .ap-wells circle,
  .apply .ap-nodes circle, .recognize .rec-ring,
  .orbit-ring, .orbit-track, .orbit-track span,
  .timecourse .tc-frame, .timecourse .tc-timeline li, .timecourse .tc-progress,
  .loop::after, .grow *, .grow circle { animation: none !important; }
  .flip-inner, .xp-media img, .xp-statements p { transition: none !important; }
  .js .recognize .rec-node, .js .recognize .rec-nodes circle, .js .recognize .rec-label { opacity: 1 !important; animation: none !important; }
  .js .recognize .rec-edges { stroke-dashoffset: 0 !important; animation: none !important; }
}

/* Feedback Nov 2026: partner logos in full colour on light tiles, larger */
.proof-logos { gap: var(--s-4); flex-wrap: wrap; }
.proof-logos a { opacity: 1; filter: none; display: grid; place-items: center; height: 72px; min-width: 150px; padding: 0 var(--s-5); background: #f6f3ee; border-radius: var(--radius-sm); transition: transform .3s var(--ease); }
.proof-logos a:hover { filter: none; transform: translateY(-2px); }
.proof-logos .logo-abbvie { height: 26px; }
.proof-logos .logo-takeda { height: 58px; }
.proof-logos .logo-lilly { height: 46px; }
@media (min-width: 901px) {
  .proof-logos a { height: 96px; min-width: 220px; }
  .proof-logos .logo-abbvie { height: 34px; }
  .proof-logos .logo-takeda { height: 76px; }
  .proof-logos .logo-lilly { height: 62px; }
}
@media (max-width: 639px) { .proof-logos { justify-content: center; } .proof-logos a { min-width: 0; flex: 1 1 30%; padding: 0 var(--s-3); } .proof-logos .logo-abbvie { height: 18px; } .proof-logos .logo-takeda { height: 44px; } .proof-logos .logo-lilly { height: 34px; } }

/* Feedback Nov 2026: section labels must be read, not missed */
.eyebrow { font-size: 1.05rem; letter-spacing: .14em; color: var(--accent); margin-bottom: var(--s-5); }
.eyebrow::before { width: 9px; height: 9px; }
@media (min-width: 901px) { .eyebrow { font-size: 1.2rem; } }

/* Integrated team capabilities (homepage team section and About › Team) */
.caps-lead { max-width: 62ch; margin: 0 0 var(--s-5); color: var(--muted); }
.caps { list-style: none; margin: 0 0 var(--s-7); padding: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.caps li { display: grid; gap: 6px; align-content: start; padding: var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.caps b { font-weight: 500; font-size: 1.05rem; color: var(--text); }
.caps span { color: var(--muted); font-size: .9rem; line-height: 1.5; }
.team-sub { margin: 0 0 var(--s-4); font-weight: 500; font-size: 1.3rem; }
.proof-logos .logo-abbvie { filter: brightness(0) saturate(100%) invert(10%) sepia(55%) saturate(3500%) hue-rotate(215deg) brightness(.9); } /* source PNG is white; AbbVie navy on the light tile */
.hs-more .text-link, .hs-links .text-link { white-space: normal; }

/* Feedback Nov 2026: a larger Anima logo, so it is not missed */
:root { --header-h: 76px; }
.logo img { height: 46px; }
@media (min-width: 901px) { :root { --header-h: 84px; } .logo img { height: 56px; } }

/* Feedback Nov 2026: partner logos in their own colours, straight on black (no tiles) */
.proof-logos a { background: none; padding: 0; min-width: 0; height: auto; border-radius: 0; }
.proof-logos .logo-abbvie { filter: none; height: 28px; }
.proof-logos .logo-takeda { height: 64px; }
.proof-logos .logo-lilly { height: 52px; }
@media (min-width: 901px) {
  .proof-logos a { height: auto; min-width: 0; }
  .proof-logos .logo-abbvie { height: 36px; }
  .proof-logos .logo-takeda { height: 84px; }
  .proof-logos .logo-lilly { height: 68px; }
}
@media (max-width: 639px) { .proof-logos { justify-content: space-between; } .proof-logos a { flex: none; } .proof-logos .logo-abbvie { height: 20px; } .proof-logos .logo-takeda { height: 48px; } .proof-logos .logo-lilly { height: 38px; } }

/* Palette (Iris, Nov 2026): Microscopy images sit in a clean white frame, same weight everywhere */
.tc-frame img, .flip-imgs img, #recogviz { border: 2px solid #ffffff; box-sizing: border-box; }

/* Pharma Workflows dropdown (header). Desktop: opens on hover or keyboard focus. Phones: listed under the item. */
.site-nav .has-menu { position: relative; }
.site-nav .menu { list-style: none; margin: 0; padding: var(--s-2) 0 var(--s-2) var(--s-4); }
.site-nav .menu a { padding: 6px var(--s-3); font-size: .95rem; }
.site-nav .menu-label { padding: var(--s-2) var(--s-3) 2px; font: 500 .75rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
@media (min-width: 901px) {
  .site-nav .menu { position: absolute; top: 100%; left: -8px; min-width: 240px; padding: var(--s-2); background: #111111; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: 0 12px 30px rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s; z-index: 60; }
  .site-nav .has-menu:hover .menu, .site-nav .has-menu:focus-within .menu { opacity: 1; visibility: visible; transform: none; }
  .site-nav .menu a { display: block; white-space: nowrap; color: var(--muted); }
  .site-nav .menu a:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
  .site-nav .has-menu > a::after { content: "▾"; margin-left: 4px; font-size: .7em; opacity: .7; }
}
.site-nav ul.menu { display: grid; gap: 0; justify-content: stretch; align-items: stretch; flex-direction: column; }
.site-nav ul.menu li { width: 100%; }
.site-nav ul.menu li, .site-nav ul.menu a { text-align: left; justify-content: flex-start; }

/* ===== Header panels (Nov 2026 rebuild): Technology + Pharma Workflows ===== */
.site-nav .menu-btn { font: inherit; font-size: 1rem; font-weight: 500; letter-spacing: -0.02em; color: var(--muted); background: none; border: 0; cursor: pointer; padding: var(--s-3); border-radius: var(--radius-sm); display: inline-flex; align-items: center; gap: 6px; }
.site-nav .menu-btn::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s var(--ease); }
.site-nav .has-menu.is-open > .menu-btn::after { transform: translateY(1px) rotate(225deg); }
.site-nav .menu-btn:hover, .site-nav .has-menu.is-current > .menu-btn, .site-nav .has-menu.is-open > .menu-btn { color: var(--text); }
.site-nav .menu-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.site-nav .mega { display: none; }
.site-nav .has-menu.is-open .mega { display: grid; }
.mega { gap: var(--s-5); padding: var(--s-4) 0 var(--s-5) var(--s-3); }
.mega ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mega-h { margin: 0 0 var(--s-2); font: 500 .8rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.mega-note { margin: -4px 0 var(--s-2); color: var(--muted); font-size: .92rem; }
.mega ul a { display: grid; gap: 2px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--text); white-space: normal; }
.mega ul a b { font-weight: 500; font-size: 1rem; }
.mega ul a span { color: var(--muted); font-size: .88rem; line-height: 1.4; }
.mega ul a:hover, .mega ul a[aria-current="page"] { background: rgba(255, 255, 255, .06); }
.mega ul.mega-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mega ul.mega-chips a { display: inline-block; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: .95rem; }
.mega ul.mega-chips a:hover { border-color: var(--accent); background: none; color: var(--accent); }
.mega-all { display: inline-block; margin-top: var(--s-3); color: var(--accent); font-size: .95rem; }
@media (min-width: 901px) {
  .site-nav .has-menu { position: relative; }
  .site-nav .mega { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); padding: var(--s-5); background: #111111; border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 16px 40px rgba(0, 0, 0, .55); z-index: 60; }
  .site-nav .mega-1 { width: 340px; }
  .site-nav .mega-3 { width: min(880px, 92vw); grid-template-columns: 1.15fr 1fr 1fr; }
  .site-nav .mega-3 { transform: translateX(-38%); }
  @media (hover: hover) { .site-nav .has-menu:hover .mega { display: grid; } }
  .site-nav .has-menu::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; } /* hover bridge */
}
/* Panel fixes: the header's "push first item right" rule must not reach inside panels; match top-level type size */
.site-nav .mega li:first-child { margin-left: 0; }
@media (min-width: 901px) { .site-nav .menu-btn { padding: var(--s-2) 10px; font-size: .875rem; } }
.site-nav .mega a.mega-all { display: inline-block; padding: 8px 10px; color: var(--accent); }
.site-nav .mega ul.mega-chips li { width: auto; margin: 0; }
.site-version { font-family: var(--mono); font-size: .85em; color: var(--dim); }

/* Footer legal links (Privacy). Button styles kept for a future "Cookie settings" link. */
.footer-legal { display: inline-flex; flex-wrap: wrap; gap: var(--s-4); margin-left: var(--s-4); }
.footer-legal a, .footer-legal button { font: inherit; color: var(--dim); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.footer-legal a:hover, .footer-legal button:hover { color: var(--text); }

/* Cookie consent banner (js/consent-v2.js, currently NOT loaded: the site runs
   js/tags-v2.js like the old live site). Kept for when the banner returns. */
.cookie-banner {
  position: fixed; left: var(--s-5); right: var(--s-5); bottom: var(--s-5); z-index: 60;
  display: grid; gap: var(--s-4); padding: var(--s-5);
  background: var(--carbon); border: 1px solid var(--line-strong); border-radius: var(--radius);
  color: var(--muted); font-size: .9rem; line-height: 1.5;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.cookie-actions { display: flex; gap: var(--s-3); justify-content: flex-end; }
@media (min-width: 640px) {
  .cookie-banner { right: auto; max-width: 460px; }
}

/* Homepage Leadership: photo and name both link to the bio page (same language as About › Team:
   photo zooms in an amber frame, an arrow badge appears, the name lights up with an arrow). */
.headshot-link {
  position: relative; flex: none; display: block; overflow: hidden;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  transition: border-color .35s var(--ease);
}
.headshot-link .headshot { border: 0; border-radius: 0; transition: transform .7s var(--ease), filter .4s var(--ease); }
.headshot-link .photo-cue {
  position: absolute; right: 6px; bottom: 6px; display: grid; place-items: center; padding: 5px;
  background: rgba(0, 0, 0, .74); border: 1px solid rgba(255, 157, 52, .5); border-radius: 999px;
  opacity: 0; transform: translateY(6px); transition: opacity .3s var(--ease), transform .35s var(--ease);
}
.headshot-link .photo-cue svg { width: 11px; height: 11px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.team .member-link { color: inherit; transition: color .3s var(--ease); }
.team .member-link::after {
  content: "→"; display: inline-block; margin-left: .3em; color: var(--accent);
  opacity: 0; transform: translateX(-4px); transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.team li:has(.headshot-link:hover, .member-link:hover, .member-link:focus-visible) .headshot-link { border-color: rgba(255, 157, 52, .7); }
.team li:has(.headshot-link:hover, .member-link:hover, .member-link:focus-visible) .headshot { transform: scale(1.06); filter: grayscale(1) brightness(1.12); }
.team li:has(.headshot-link:hover, .member-link:hover, .member-link:focus-visible) .photo-cue { opacity: 1; transform: none; }
.team li:has(.headshot-link:hover, .member-link:hover, .member-link:focus-visible) .member-link { color: var(--accent); }
.team li:has(.headshot-link:hover, .member-link:hover, .member-link:focus-visible) .member-link::after { opacity: 1; transform: none; }
@media (hover: none) {
  .headshot-link .photo-cue { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .headshot-link .headshot, .headshot-link .photo-cue, .team .member-link::after { transition: none; }
  .team li:has(.headshot-link:hover, .member-link:hover, .member-link:focus-visible) .headshot { transform: none; }
}