/* Lysa design system — V2. Tokens first, then components. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/outfit-latin.woff2') format('woff2');
}

:root {
  --bg: #07110f;
  --panel: #0e1d1a;
  --panel-2: #122a25;
  --line: #24443d;
  --line-soft: #1d3b35;
  --ink: #eaf5f1;
  --ink-2: #8fb0a7;
  --ink-3: #3b5851;
  --mint: #4fe3c1;
  --lime: #b8f35a;
  --deep: #04201a;
  --warn: #ff8a5b;
  --grad: linear-gradient(135deg, #4fe3c1 0%, #b8f35a 100%);
  --radius: 22px;
  --radius-sm: 14px;
  --maxw: 1180px;
  --pad: clamp(20px, 4vw, 36px);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.08;
  margin: 0;
}
p { margin: 0; }
a { color: var(--mint); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
  border-radius: 6px;
}
img, svg { max-width: 100%; }
svg text { font-family: 'Inter', sans-serif; }

/* ---------- layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.section { padding: 72px 0 0; }
.section-tight { padding: 28px 0 0; }

.eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mint);
  margin-bottom: 18px;
}
.eyebrow.warn { color: var(--warn); }

h1.hero-title {
  font-size: clamp(2.4rem, 5vw, 3.9rem);
  letter-spacing: -.035em;
  line-height: 1.03;
}
/* Gradient text — mint-to-lime brand gradient applied to any text.
   Usable as a class on any inline element: <span class="grad-text">…</span>
   (.gt is kept as the short form used by existing pages). */
.grad-text,
.gt {
  background: linear-gradient(90deg, var(--mint), var(--lime));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lede {
  color: var(--ink-2);
  font-size: 1.2rem;
  line-height: 1.5;
  max-width: 46em;
}
.small-note { color: var(--ink-3); font-size: 1rem; }

.section-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1.5px solid var(--line);
  margin-bottom: 46px;
  flex-wrap: wrap;
}
.section-head h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.section-head .sub { color: var(--ink-3); font-size: 14px; }

/* section header with eyebrow + h3 stack (angle blocks) */
.angle-head {
  display: flex;
  gap: 16px;
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.angle-head h3 { font-size: clamp(1.3rem, 2.2vw, 1.75rem); }

/* ---------- header ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7, 17, 15, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1.5px solid var(--line);
  padding: 0 36px;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 66px;
}
.topbar .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}
/* .ly-nav .lockup from the design system: height 38px for the lysa.bio domain
   wordmark (≥120px wide), whitespace ring included */
.brand .lockup {
  height: 38px;
  width: auto;
  display: block;
}
.footer .brand-col .lockup {
  height: 28px;
  width: auto;
  display: block;
}
.topbar .crumb { color: var(--ink-3); font-size: 14px; }
.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 26px;
}
.nav-link {
  color: var(--ink-2);
  font-size: 14px;
  text-decoration: none;
  padding: 8px 2px;
}
.nav-link:hover { color: var(--ink); }
.nav-link.active { color: var(--mint); }
.nav-item { position: relative; }
button.nav-link {
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
}
.nav-item .caret {
  width: 7px;
  height: 7px;
  margin-left: 7px;
  margin-top: -4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.nav-item .menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translate(-50%, 6px);
  min-width: 252px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility 0s .18s;
}
.nav-item:hover .menu,
.nav-item:focus-within .menu,
.nav-item.open .menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity .18s ease, transform .18s ease;
}
.nav-item .menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--ink);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}
.nav-item .menu a:hover { background: var(--panel-2); color: var(--mint); }
.nav-item .menu a.on { color: var(--mint); }

/* ---------- buttons, pills, chips ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 24px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 140ms, border-color 140ms, background 140ms;
}
.btn-primary { background: var(--grad); color: var(--deep); }
.btn-primary:hover { box-shadow: 0 0 0 3px var(--bg), 0 0 0 4.5px #4fe3c1; }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--mint); }
.btn-sm { min-height: 40px; padding: 10px 18px; font-size: 15px; }

.pill {
  font: 600 15px 'Inter', ui-sans-serif, sans-serif;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  min-height: 44px;
}
.pill:hover { border-color: var(--mint); }
.pill.on { background: var(--mint); color: var(--deep); border-color: var(--mint); }
.pill.dev { border-style: dashed; color: var(--ink-2); cursor: default; }
.pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  padding: 7px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.chip .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.chip.now      { background: var(--mint); color: var(--deep); }
.chip.now .dot { background: var(--deep); }
.chip.dev {
  background: transparent;
  color: var(--mint);
  border: 1.5px solid var(--mint);
}
.chip.dev .dot { background: var(--mint); animation: pulse 2.4s ease-in-out infinite; }
.chip.plan {
  background: transparent;
  color: var(--ink-2);
  border: 1.5px dashed var(--ink-3);
}
.chip.plan .dot { background: var(--ink-3); }

/* ---------- cards ---------- */
.card {
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}
.card .label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 5px;
}
.card .headline {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 14px;
}
.card.ours { position: relative; overflow: hidden; }
.card.ours::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--grad);
}
.card.ours .label { color: var(--mint); }

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 14px;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 14px;
}

.service-card { display: flex; flex-direction: column; gap: 12px; padding: 30px; }
.service-card h3 { font-size: 1.6rem; }
.service-card p { color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
.service-card .for {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1.5px solid var(--line-soft);
  font-size: 14px;
  color: var(--ink-2);
}
.service-card .for b { color: var(--ink-3); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; margin-right: 8px; }
.service-card .links { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- pocket card, badges, icons (design-system ports) ---------- */
/* The release motif: a circular whitespace notch holds a hollow sphere badge. */
.pocket-wrap { position: relative; }
.pocket-card {
  -webkit-mask: radial-gradient(circle 46px at calc(100% - 44px) 44px, transparent 98%, #000 100%);
  mask: radial-gradient(circle 46px at calc(100% - 44px) 44px, transparent 98%, #000 100%);
}
.pocket-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--panel-2);
  color: var(--ink);
  box-shadow: 0 0 0 4px var(--bg);
}
.pocket-badge .ly-icon { width: 28px; height: 28px; }

/* 48px-grid icons. Strokes = letter weight; the accent part carries the lime. */
.ly-icon { width: 1.5em; height: 1.5em; flex: none; color: currentColor; }
.ly-icon--32 { width: 32px; height: 32px; }
.ly-ic .m { fill: none; stroke: currentColor; stroke-width: 4; stroke-linejoin: round; }
.ly-ic .a { fill: none; stroke: var(--lime); stroke-width: 4; stroke-linejoin: round; }
.ly-ic .fm { fill: currentColor; }
.ly-ic .fa { fill: var(--lime); }

/* callout — whitespace halo instead of a side bar (design-system .ly-callout) */
.callout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 24px;
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.callout .ly-icon { margin-top: 2px; }
.callout p { margin: 0; color: var(--ink-2); }

/* promise list (checklist) */
.promise { display: flex; flex-direction: column; gap: 14px; }
.promise .p-item { display: flex; gap: 12px; align-items: flex-start; }
.promise .p-item .tick { color: var(--mint); flex: none; margin-top: 1px; }
.promise .p-item b { display: block; font-weight: 600; }
.promise .p-item span { color: var(--ink-2); font-size: 14.5px; }

/* stat row */
.stat-row { display: flex; flex-wrap: wrap; gap: 12px; }
.stat {
  flex: 1 1 150px;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
}
.stat .n {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.1;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat .t { font-size: 12.5px; color: var(--ink-2); margin-top: 4px; }

/* ---------- flow map (hero animation) ---------- */
.fm-stage {
  position: relative;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 21/9;
}
.fm-axis {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 1.5px;
  background: var(--line);
  pointer-events: none;
}
.fm-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.fm-word {
  position: absolute;
  left: 22px;
  top: 16px;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mint);
  animation: fx_word .6s cubic-bezier(.2,.8,.2,1);
}
@keyframes fx_word {
  0% { opacity: 0; transform: translateX(-10px); }
  100% { opacity: 1; transform: none; }
}
.fm-rail {
  display: flex;
  flex-wrap: wrap;
  margin-top: 14px;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.fm-rail button {
  flex: 1 1 110px;
  min-width: 96px;
  min-height: 52px;
  text-align: left;
  padding: 14px 16px;
  background: none;
  border: 0;
  border-right: 1.5px solid var(--line);
  cursor: pointer;
  color: var(--ink-2);
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  position: relative;
}
.fm-rail button:last-child { border-right: 0; }
.fm-rail button:hover { color: var(--ink); }
.fm-rail button.on { color: var(--ink); }
.fm-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, #4fe3c1, #b8f35a);
}
.fm-rail button.on .fm-bar { animation: fx_fill 3.3s linear forwards; }
/* Beat hand-off: everything inside the stage freezes for one flush so beat
   changes hard-cut like V1's per-beat re-render instead of cross-fading. */
.fm-noanim * { animation: none !important; transition: none !important; }
@keyframes fx_fill {
  from { width: 0; }
  to { width: 100%; }
}
.fm-stage .sc {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  transform: translateX(340px);
  transition: opacity .68s cubic-bezier(.3,0,.1,1), transform .92s cubic-bezier(.3,0,.1,1);
}
.fm-stage .sc1 { transform: translateY(-340px); }
.fs1 .sc1, .fs2 .sc2, .fs3 .sc3, .fs4 .sc4, .fs5 .sc5 { opacity: 1; transform: none; }
.fs2 .sc1, .fs3 .sc1, .fs4 .sc1, .fs5 .sc1,
.fs3 .sc2, .fs4 .sc2, .fs5 .sc2, .fs4 .sc3, .fs5 .sc3 { opacity: 0; transform: translateX(-340px); }
.fm-stage .ob { transform-box: fill-box; transform-origin: center; opacity: 0; }
.fs1 .o-seq { opacity: 1; animation: fx_seqin 1.74s cubic-bezier(.2,.8,.2,1); }
@keyframes fx_seqin {
  0%, 24% { opacity: 0; transform: translateX(-46px); }
  100% { opacity: 1; transform: none; }
}
.fs2 .o-seq { opacity: 0; transform: scaleX(.14); transition: opacity .56s linear .12s, transform .84s cubic-bezier(.3,0,.1,1) .12s; }
.fs2 .o-dna { opacity: 1; animation: fx_dna 3.3s cubic-bezier(.3,0,.1,1) forwards; }
@keyframes fx_dna {
  0%, 26% { opacity: 0; transform: scale(.6) scaleX(.2); }
  44% { opacity: 1; transform: scale(.6) translateY(4px); }
  58% { opacity: 1; transform: scale(.6) translateY(10px); }
  80% { opacity: .3; transform: scale(.34) translateY(42px); }
  100% { opacity: 0; transform: scale(.28) translateY(46px); }
}
.fs2 .o-prot { opacity: 1; animation: fx_born 3.3s cubic-bezier(.3,0,.1,1) forwards; }
@keyframes fx_born {
  0%, 66% { opacity: 0; transform: translateY(44px) scale(.18); }
  88% { opacity: 1; transform: translateY(-14px) scale(.78); }
  100% { opacity: 1; transform: translateY(-18px) scale(.78); }
}
.fs3 .o-prot { opacity: 1; animation: fx_bind 3.3s cubic-bezier(.3,0,.1,1) forwards; }
@keyframes fx_bind {
  0%, 22% { opacity: 0; transform: translate(0,-92px) scale(.42); }
  30% { opacity: 1; transform: translate(0,-88px) scale(.42); }
  60% { opacity: 1; transform: translate(0,4px) scale(.42); }
  76% { opacity: 1; transform: translate(0,4px) scale(.42); }
  100% { opacity: .25; transform: translate(0,4px) scale(.42); }
}
.fs3 .o-drop { opacity: 1; animation: fx_elute 3.3s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes fx_elute {
  0%, 74% { opacity: 0; transform: translateY(4px) scale(.5); }
  82% { opacity: 1; transform: translateY(52px) scale(1); }
  96%, 100% { opacity: 1; transform: translateY(94px) scale(1); }
}
.fs4 .o-drop { opacity: 1; animation: fx_feed 3.3s cubic-bezier(.3,0,.1,1) forwards; }
@keyframes fx_feed {
  0%, 10% { opacity: 1; transform: translate(-300px,-78px) scale(1); }
  38% { opacity: 1; transform: translate(-148px,-78px) scale(1); }
  50% { opacity: 0; transform: translate(-142px,-78px) scale(.25); }
  100% { opacity: 0; transform: translate(-142px,-78px) scale(.25); }
}
.fs1 .fm-caret { animation: fx_blink .84s steps(2) 3 .96s; }
@keyframes fx_blink { 50% { opacity: 0; } }
.fs1 .fm-send { animation: fx_hit .84s cubic-bezier(.3,0,.1,1) 2.4s; }
@keyframes fx_hit {
  40% { transform: scale(.93); }
  100% { transform: scale(1); }
}
.fm-ring { transform-box: fill-box; transform-origin: center; }
.fm-tube {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(0);
}
.fs3 .fm-tube { animation: fx_fillup 3.3s cubic-bezier(.3,0,.1,1) forwards; }
@keyframes fx_fillup {
  0%, 80% { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}
.fm-well { fill: var(--panel-2); stroke: var(--line-soft); stroke-width: 1.5; }
.fm-well.ours { stroke-width: 2.5; }
.fs4 .fm-well, .fs5 .fm-well { animation: fx_well .5s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes fx_well { to { fill: var(--f); stroke: var(--s); } }
.fs5 .fm-well { animation-delay: 0s !important; }
.fm-lab {
  font-family: var(--mono);
  font-size: 9px;
  fill: #4b6b62;
  text-anchor: middle;
}
.fm-tp { transform-box: fill-box; transform-origin: center; opacity: 0; }
.fs4 .fm-tp { animation: fx_tp 1.44s cubic-bezier(.3,0,.1,1) forwards; }
@keyframes fx_tp {
  0% { opacity: 0; transform: translateY(-18px); }
  18% { opacity: 1; transform: translateY(0); }
  64% { opacity: 1; transform: translateY(34px); }
  90%, 100% { opacity: 0; transform: translateY(34px); }
}
.sc5 { transform: translateY(320px); }
.fs5 .sc4 { opacity: 1; transform: translateY(36px) scale(.36); animation: fx_plateout .64s cubic-bezier(.3,0,.1,1) 2.68s forwards; }
@keyframes fx_plateout {
  from { opacity: 1; transform: translateY(36px) scale(.36); }
  to { opacity: 0; transform: translate(380px,36px) scale(.36); }
}
.fs5 .fm-tips, .fs5 .fm-labs { opacity: 0; transition: opacity .6s linear; }
.sc5 .fm-ice, .sc5 .fm-lidL, .sc5 .fm-lidR, .sc5 .fm-tag, .sc5 .fm-front { opacity: 0; }
.sc5 .fm-lidL { transform-box: fill-box; transform-origin: 0% 50%; }
.sc5 .fm-lidR { transform-box: fill-box; transform-origin: 100% 50%; }
.sc5 .fm-tag { transform-box: fill-box; transform-origin: center; }
.fs5 .fm-ice { animation: fx_ice .68s cubic-bezier(.3,0,.1,1) 1.24s forwards; }
@keyframes fx_ice {
  0% { opacity: 0; transform: translateY(-48px); }
  100% { opacity: 1; transform: none; }
}
.fs5 .fm-lidL { animation: fx_shutL .68s cubic-bezier(.3,0,.1,1) 2s forwards; }
.fs5 .fm-lidR { animation: fx_shutR .68s cubic-bezier(.3,0,.1,1) 2s forwards; }
@keyframes fx_shutL {
  0% { opacity: 1; transform: rotate(-74deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes fx_shutR {
  0% { opacity: 1; transform: rotate(74deg); }
  100% { opacity: 1; transform: none; }
}
.fs5 .fm-front { animation: fx_close .44s cubic-bezier(.3,0,.1,1) 2.16s forwards; }
@keyframes fx_close {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.fs5 .fm-tag { animation: fx_tag .4s cubic-bezier(.2,.8,.2,1) 2.4s forwards; }
.fs5 .sc5 { animation: fx_boxout .64s cubic-bezier(.3,0,.1,1) 2.68s forwards; }
@keyframes fx_boxout {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateX(380px); }
}
@keyframes fx_tag {
  0% { opacity: 0; transform: scale(.8); }
  100% { opacity: 1; transform: none; }
}

/* ---------- problem diagrams ---------- */
.diag { width: 100%; display: block; overflow: visible; }
/* Ported verbatim from "prototypes and components/Lysa Bio website
   prototypes.html", argument page section 03 "Cost that doesn't carry":
   class names, timings and keyframes unchanged. The Today panel runs the
   cost sawteeth, the With-Lysa panel the once-only build plus the
   marginal stream. */
.c3t0{opacity:0;animation:c3t 6s 0.0s both infinite}
.c3t1{opacity:0;animation:c3t 6s 0.5s both infinite}
.c3t2{opacity:0;animation:c3t 6s 1.0s both infinite}
.c3t3{opacity:0;animation:c3t 6s 1.5s both infinite}
.c3t4{opacity:0;animation:c3t 6s 2.0s both infinite}
.c3t5{opacity:0;animation:c3t 6s 2.5s both infinite}
.c3t6{opacity:0;animation:c3t 6s 3.0s both infinite}
.c3t7{opacity:0;animation:c3t 6s 3.5s both infinite}
.c3t8{opacity:0;animation:c3t 6s 4.0s both infinite}
.c3t9{opacity:0;animation:c3t 6s 4.5s both infinite}
.c3t0{transform-box:fill-box;transform-origin:bottom}
.c3t1{transform-box:fill-box;transform-origin:bottom}
.c3t2{transform-box:fill-box;transform-origin:bottom}
.c3t3{transform-box:fill-box;transform-origin:bottom}
.c3t4{transform-box:fill-box;transform-origin:bottom}
.c3t5{transform-box:fill-box;transform-origin:bottom}
.c3t6{transform-box:fill-box;transform-origin:bottom}
.c3t7{transform-box:fill-box;transform-origin:bottom}
.c3t8{transform-box:fill-box;transform-origin:bottom}
.c3t9{transform-box:fill-box;transform-origin:bottom}
.l3one{transform-box:fill-box;transform-origin:bottom;animation:l3one 6s both infinite}
.l3flat{transform-box:fill-box;transform-origin:left;animation:l3flat 6s both infinite}
.l3d0{opacity:0;animation:l3d 6s 0.70s both infinite}
.l3d1{opacity:0;animation:l3d 6s 0.94s both infinite}
.l3d2{opacity:0;animation:l3d 6s 1.18s both infinite}
.l3d3{opacity:0;animation:l3d 6s 1.42s both infinite}
.l3d4{opacity:0;animation:l3d 6s 1.66s both infinite}
.l3d5{opacity:0;animation:l3d 6s 1.90s both infinite}
.l3d6{opacity:0;animation:l3d 6s 2.14s both infinite}
.l3d7{opacity:0;animation:l3d 6s 2.38s both infinite}
.l3d8{opacity:0;animation:l3d 6s 2.62s both infinite}
.l3d9{opacity:0;animation:l3d 6s 2.86s both infinite}
.l3d10{opacity:0;animation:l3d 6s 3.10s both infinite}
.l3d11{opacity:0;animation:l3d 6s 3.34s both infinite}
.l3d12{opacity:0;animation:l3d 6s 3.58s both infinite}
.l3d13{opacity:0;animation:l3d 6s 3.82s both infinite}
.l3d14{opacity:0;animation:l3d 6s 4.06s both infinite}
.l3d15{opacity:0;animation:l3d 6s 4.30s both infinite}
.l3d16{opacity:0;animation:l3d 6s 4.54s both infinite}
.l3d17{opacity:0;animation:l3d 6s 4.78s both infinite}
.l3d18{opacity:0;animation:l3d 6s 5.02s both infinite}
.l3d19{opacity:0;animation:l3d 6s 5.26s both infinite}
@keyframes c3t{0%{opacity:0;transform:scaleY(0)}4%{opacity:.8;transform:scaleY(1)}7%{opacity:.8;transform:scaleY(1)}9%{opacity:.25;transform:scaleY(1)}100%{opacity:.25;transform:scaleY(1)}}
@keyframes l3one{0%{transform:scaleY(0)}10%,100%{transform:scaleY(1)}}
@keyframes l3flat{0%,10%{transform:scaleX(0)}100%{transform:scaleX(1)}}
@keyframes l3d{0%{opacity:0}4%,100%{opacity:1}}

/* ---------- custom validation block ---------- */
/* Ported from "prototypes and components/Custom validation pipeline
   prototype.html" — the fifth-term block. Keyframes carry the cvb_ prefix
   and selectors are scoped to .block (the site already has .chip and
   @keyframes pulse). */
.block {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  padding: 40px;
  background: var(--bg);
  color: var(--ink);
}
.block::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 360px at 12% -10%, rgba(79,227,193,.18), transparent 60%),
    radial-gradient(700px 320px at 95% 115%, rgba(184,243,90,.14), transparent 60%);
  pointer-events: none;
}
.block > * { position: relative; }
.block .chip {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 8px 14px;
  background: linear-gradient(135deg, var(--mint), var(--lime));
  color: var(--deep);
}
.block h1 { margin-top: 20px; font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
.block p { margin-top: 16px; color: var(--ink-2); max-width: 46em; }
.block p strong { color: var(--ink); font-weight: 600; }
.block .btn {
  min-height: 52px;
  padding: 15px 28px;
  margin-top: 28px;
  border: 0;
  font-size: 17px;
  background: linear-gradient(135deg, var(--mint), var(--lime));
  color: var(--deep);
}
.block .btn:hover { box-shadow: 0 0 0 3px var(--bg), 0 0 0 4.5px var(--mint); }
.block .stage {
  margin-top: 36px;
  border-radius: 24px;
  border: 1.5px solid var(--line);
  background: var(--panel);
  overflow: hidden;
}
.block .stage svg { display: block; width: 100%; height: auto; }
.block .cap { margin-top: 16px; font-size: 14px; color: var(--ink-2); }
.block .mono { font-family: var(--mono); }
.block .flow { animation: cvb_flow 3.6s cubic-bezier(.3,0,.1,1) infinite; }
@keyframes cvb_flow {
  0% { opacity: 0; transform: translateX(0); }
  8% { opacity: 1; }
  46% { opacity: 1; transform: translateX(168px); }
  54% { opacity: 0; transform: translateX(188px); }
  100% { opacity: 0; transform: translateX(188px); }
}
.block .pkt { animation: cvb_pkt 3.6s cubic-bezier(.3,0,.1,1) infinite; }
@keyframes cvb_pkt {
  0%, 56% { opacity: 0; transform: translateX(0); }
  64% { opacity: 1; transform: translateX(16px); }
  92% { opacity: 1; transform: translateX(144px); }
  100% { opacity: 0; transform: translateX(150px); }
}
.block .wire { stroke-dasharray: 5 9; animation: cvb_wire 1.6s linear infinite; }
@keyframes cvb_wire { to { stroke-dashoffset: -28; } }
.block .assay rect {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: cvb_assay 3.6s cubic-bezier(.3,0,.1,1) infinite;
}
@keyframes cvb_assay {
  0%, 40% { transform: scaleY(.12); }
  62% { transform: scaleY(1); }
  88% { transform: scaleY(1); }
  100% { transform: scaleY(.12); }
}
.block .pulse { animation: cvb_pulse 3.6s cubic-bezier(.3,0,.1,1) infinite; }
@keyframes cvb_pulse {
  0%, 60% { opacity: .25; }
  76% { opacity: 1; }
  100% { opacity: .25; }
}
.block .mark { animation: cvb_mark 3.6s cubic-bezier(.3,0,.1,1) infinite; }
@keyframes cvb_mark {
  0% { opacity: .75; }
  10% { opacity: 1; }
  60% { opacity: .75; }
  100% { opacity: .75; }
}
/* option-B batch animation (academic page): gel band + result annotations.
   --settle is defined so prototype stages carrying inline var(--settle) work. */
.block .stage { --settle: cubic-bezier(.3,0,.1,1); }
.block .band { opacity: 0; animation: cvb_band 3.6s var(--settle) infinite; }
@keyframes cvb_band {
  0%, 62% { opacity: 0; }
  72%, 94% { opacity: 1; }
  100% { opacity: 0; }
}
.block .draw {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: cvb_draw 3.6s var(--settle) infinite;
}
@keyframes cvb_draw {
  0%, 58% { stroke-dashoffset: 100; opacity: 1; }
  80%, 94% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
/* orphan-biosimilar: filing stamp appears, old copy swaps out */
.block .built { animation: cvb_built 3.6s var(--settle) infinite; }
@keyframes cvb_built {
  0%, 74% { opacity: 0; }
  82%, 96% { opacity: 1; }
  100% { opacity: 0; }
}
.block .newsite { animation: cvb_newsite 3.6s var(--settle) infinite; }
@keyframes cvb_newsite {
  0%, 74% { opacity: 1; }
  82%, 96% { opacity: 0; }
  100% { opacity: 1; }
}
body.editing svg text.editable { cursor: pointer; }
body.editing svg text.editable:hover { fill: var(--lime); }

/* ---------- economics ---------- */
.res-line {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1.5px solid var(--line);
  font-size: 1rem;
}
.res-line:first-child { border-top: 0; }
.res-big {
  font-size: 1.5rem;
  font-weight: 600;
  font-family: 'Outfit', sans-serif;
  color: var(--ink);
}
.kv-label { color: var(--ink-2); }
.lbl { display: block; font-size: 14px; font-weight: 600; margin: 20px 0 0; }
.hint { font-size: 14px; color: var(--ink-2); margin-top: 6px; line-height: 1.5; }
.seq-input {
  width: 100%;
  min-height: 120px;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .5px;
  padding: 14px 16px;
  resize: vertical;
}
.seq-input:focus { border-color: var(--mint); outline: none; }
.num-input {
  width: 90px;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  font: 600 16px 'Inter', sans-serif;
  padding: 10px 12px;
  text-align: center;
}
.stepb {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: var(--panel);
  font-size: 20px;
  cursor: pointer;
  color: var(--ink);
  flex: none;
}
.stepb:hover { border-color: var(--mint); }

/* ---------- statement (the future) ---------- */
.statement {
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(32px, 5vw, 56px);
}
.statement p {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  letter-spacing: -.02em;
  line-height: 1.14;
}
.statement .sub { color: var(--ink-2); font-size: 1.05rem; font-family: 'Inter', sans-serif; font-weight: 400; line-height: 1.55; max-width: 60ch; margin-top: 16px; }

/* ---------- CTA strip ---------- */
.cta-strip {
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}
.cta-strip h3 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); }
.cta-strip p { color: var(--ink-2); font-size: 15px; margin-top: 6px; max-width: 44em; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- footer ---------- */
.footer {
  background: var(--bg);
  border-top: 1.5px solid var(--line);
  padding: 64px 0 32px;
  margin-top: 96px;
}
.footer .cols { display: flex; flex-wrap: wrap; gap: 40px 48px; }
.footer .brand-col { flex: 2 1 280px; min-width: 240px; }
.footer .tagline { margin-top: 16px; color: var(--ink-2); font-size: 15px; line-height: 1.55; max-width: 26em; }
.footer .head { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.footer .fl {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 15px;
  display: block;
  padding: 5px 0;
}
.footer .fl:hover { color: var(--mint); }
.footer .legal {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1.5px solid var(--line-soft);
  color: var(--ink-3);
  font-size: 13.5px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
}

/* ---------- page hero (placeholder pages) ---------- */
.page-hero { padding: 76px 0 0; }
.page-hero .lede { margin-top: 26px; }
.page-hero .cta-actions { margin-top: 32px; }

/* sidebar layout for solution pages. The rail boxes stay in the markup but
   are hidden for now — add `show-rails` to <body> to bring them back:
   they then sit left of the content from 640px up (sticky sidebar). */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.rail-stack { display: none; }
body.show-rails .rail-stack { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 640px) {
  body.show-rails .split { grid-template-columns: 240px minmax(0, 1fr); gap: 24px; }
  body.show-rails .split .rail-stack { position: sticky; top: 90px; align-self: start; }
}
@media (min-width: 900px) {
  body.show-rails .split { grid-template-columns: 260px minmax(0, 1fr); gap: 32px; }
}
.sub-rail {
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 6px 0;
  overflow: hidden;
}
.sub-rail .rail-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 12px 18px 8px;
}
.sub-rail a {
  display: block;
  padding: 10px 18px;
  color: var(--ink-2);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  border-top: 1.5px solid var(--line-soft);
}
.sub-rail a:hover { color: var(--ink); }
.sub-rail a.on { color: var(--mint); }
/* stacked rail boxes + category accents (hidden while rails are off).
   Services pages carry lime, who-we-serve pages carry mint — including the
   cross-reference box. */
.sub-rail.rail-mint .rail-head { color: var(--mint); }
.sub-rail.rail-lime .rail-head { color: var(--lime); }
.sub-rail.rail-lime a.on { color: var(--lime); }

/* ---------- reveal on scroll ---------- */
/* Hidden initial state only when JS is running (html.js), so content is
   never lost without scripts. */
html.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1);
}
html.js .reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
/* The problem diagrams (c2_/l2_/c3_/l3_ loops) run from page load, which
   burned their staggered intro before the reader scrolled there and left
   e.g. the red sample rings sitting fully drawn. Hold them while the
   section is still unrevealed so the intro plays when it is seen. */
html.js .reveal:not(.in) .diag * { animation-play-state: paused; }
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: .5; }
}
@keyframes evenpulse {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}
.pulse-ring { animation: evenpulse 2.6s ease-in-out infinite; }

/* ---------- inline text editor (contenteditable) ---------- */
.editable { outline: none; }
body.editing .editable {
  box-shadow: 0 0 0 1px dashed transparent;
  outline: 1.5px dashed rgba(79, 227, 193, .35);
  outline-offset: 2px;
  border-radius: 4px;
  cursor: text;
}
body.editing .editable:hover { outline-color: rgba(79, 227, 193, .8); }
body.editing .editable:focus { outline-color: var(--mint); outline-style: solid; background: rgba(79,227,193,.05); }
#lysa-editbar {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 9999;
  display: flex;
  gap: 8px;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 8px 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,.4);
  font-family: 'Inter', sans-serif;
}
#lysa-editbar button {
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 14px;
  font: 600 13px 'Inter', sans-serif;
  cursor: pointer;
}
#lysa-editbar button.primary { background: var(--grad); border-color: transparent; color: var(--deep); }
#lysa-editbar button:hover { border-color: var(--mint); }
body.editing #lysa-editbar .toggle { border-color: var(--mint); color: var(--mint); }
.saved-flash {
  position: fixed;
  bottom: 76px;
  right: 22px;
  z-index: 9999;
  background: var(--panel);
  border: 1.5px solid var(--mint);
  color: var(--mint);
  border-radius: 10px;
  padding: 8px 14px;
  font: 600 13px 'Inter', sans-serif;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s, transform .25s;
  pointer-events: none;
}
.saved-flash.show { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hide-sm { display: none !important; }
  .topbar { padding: 0 20px; }
  .nav { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; }
}