/* ============================================================
   BioRx: Peptide Science Library
   Design system: liquid glass · olive/chartreuse · scientific
   ============================================================ */

/* ---------- 1. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { min-height: 100dvh; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, svg, video, canvas { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
:where(h1, h2, h3, h4, h5, h6, p) { overflow-wrap: break-word; }
[hidden] { display: none !important; }

/* ---------- 2. Tokens ---------- */
:root {
  /* Dark ground — deep purple-black scale (was navy). Drives the hero, the
     page-head, the inverted bands and the footer. Sampled/derived from Payram:
     a near-black purple that lets lime, violet, emerald and magenta pop. */
  --olive-950: #08060F;
  --olive-900: #0E0A1C;
  --olive-800: #150E28;
  --olive-700: #1A0F35;   /* the primary dark ground — audited 18:1 with white */
  --olive-600: #2A1B4E;
  --olive-500: #443173;
  --olive-400: #6A56A0;
  --olive-300: #9A88C4;
  --olive-200: #C6BCDD;
  --olive-100: #E7E2F1;

  /* Green accent — Payram's lime primary (#caff54). LRV ~85, so it is a FILL
     that always takes dark text, never a text colour on light. */
  --lime-600: #86B00C;
  --lime-500: #A9D710;
  --lime-400: #CAFF54;
  --lime-300: #DEFF8C;
  --lime-200: #EEFFC0;

  /* Payram accent system — one correct role each, by LRV / contrast:
     purple (6) = text & links on light; violet (20) = large/decorative on dark;
     magenta (24) = pink pop; emerald (57) = positive; lime (85) = primary fill. */
  --purple:  #6A0DAD;
  --violet:  #8B5CF6;
  --magenta: #E838C0;
  --emerald: #01E46F;
  --lime:    #CAFF54;

  /* Neutrals */
  --paper:   #F6F8FB;
  --paper-2: #EDF1F6;
  --paper-3: #E1E7EF;
  --white:   #FFFFFF;
  --ink:     #0C1220;

  /* Brand accents (purple family repurposed onto the old brand-* names so every
     consumer shifts without renaming: --brand-blue is now the purple. */
  --brand-indigo: #8B5CF6;   /* violet */
  --brand-blue:   #6A0DAD;   /* purple — links, chat bubbles, send button */
  --brand-cyan:   #01E46F;   /* emerald */
  --brand-teal:   #32CECC;
  --brand-emerald:#01E46F;
  --brand-green:  #A9D710;
  --brand-lime:   #CAFF54;
  /* Purple as TEXT on light clears 9.2:1 on --bg (AAA) — see the contrast audit. */
  --link: var(--brand-blue);

  /* Evidence scale (never colour-only: always paired with icon + label).
     Light-theme values are darkened to clear 4.5:1 on --bg at 12px. */
  --ev-strong:  #476E1A;
  --ev-moderate:#7F5B0D;
  --ev-limited: #8E4E1C;
  --ev-pre:     #4E5D6E;

  /* Semantic: light theme */
  --bg:          var(--paper);
  --bg-sunken:   var(--paper-2);
  --surface:     var(--white);
  --fg:          var(--ink);
  --fg-muted:    #48536E;
  --fg-subtle:   #5E6983;
  --border:      #CDD5E2;
  --border-soft: #DFE5EE;
  --accent:      var(--lime);
  --accent-ink:  #1A0F35;   /* deep purple-black text on the lime fill (15.4:1) */
  /* Accent used as TEXT on light surfaces (links, active states, numerals):
     the lime is a fill only, so text falls to PURPLE (9.2:1 on --bg, AAA). */
  --accent-deep: var(--purple);
  --ring:        var(--purple);

  /* Inverted band (dark olive sections) */
  --inv-bg:     var(--olive-700);
  --inv-fg:     #F2F5FA;
  --inv-muted:  #BCC7DE;
  --inv-border: rgba(255, 255, 255, .16);

  /* Liquid glass */
  --glass-bg:      linear-gradient(148deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.34) 46%, rgba(255,255,255,.52) 100%);
  --glass-border:  rgba(255,255,255,.55);
  --glass-hi:      rgba(255,255,255,.85);
  --glass-lo:      rgba(10,17,36,.06);
  --glass-shadow:  0 18px 48px -18px rgba(10,17,36,.38), 0 2px 8px -2px rgba(10,17,36,.14);
  --glass-blur:    22px;

  --glass-bg-dark:     linear-gradient(148deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 48%, rgba(255,255,255,.11) 100%);
  --glass-border-dark: rgba(255,255,255,.20);
  --glass-hi-dark:     rgba(255,255,255,.34);

  /* Type — Inter throughout (one clean, neutral, authoritative face for both
     display and body, differentiated by weight and tracking), JetBrains Mono
     for the technical accents (aliases, batch codes, labels). */
  --font-display: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.0625rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --fs-3xl:  clamp(2.25rem, 1.6rem + 2.9vw, 3.75rem);
  --fs-4xl:  clamp(2.75rem, 1.7rem + 4.6vw, 5rem);

  /* Space: 4/8 rhythm */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 2.5rem;  --sp-8: 3rem;
  --sp-9: 4rem;    --sp-10: 5rem;   --sp-11: 6.5rem;

  /* Radii */
  --r-xs: 8px;  --r-sm: 12px; --r-md: 18px;
  --r-lg: 26px; --r-xl: 34px; --r-pill: 999px;

  /* Motion */
  --dur-fast: 160ms;
  --dur: 260ms;
  --dur-slow: 460ms;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.42, .48, 1);

  /* Layout */
  --wrap: 1200px;
  --wrap-narrow: 760px;
  --nav-h: 76px;

  /* Z scale */
  --z-base: 0; --z-raised: 10; --z-sticky: 40; --z-nav: 100; --z-overlay: 400; --z-toast: 900;

  color-scheme: light;
}

[data-theme="dark"] {
  --bg:          var(--olive-950);
  --bg-sunken:   #070D1C;
  --surface:     var(--olive-900);
  --fg:          #EEF2F8;
  --fg-muted:    #A9B4CC;
  --fg-subtle:   #8794B0;
  --border:      rgba(255,255,255,.14);
  --border-soft: rgba(255,255,255,.09);
  --accent-deep: var(--lime-400);   /* inverts: bright accent reads on dark */
  --link: var(--brand-cyan);
  --ring:        var(--lime-400);

  --inv-bg:     var(--olive-800);
  --inv-fg:     #F2F3E8;
  --inv-muted:  #B9BCA6;

  --glass-bg:     var(--glass-bg-dark);
  --glass-border: var(--glass-border-dark);
  --glass-hi:     var(--glass-hi-dark);
  --glass-lo:     rgba(0,0,0,.24);
  --glass-shadow: 0 20px 52px -20px rgba(0,0,0,.72), 0 2px 10px -3px rgba(0,0,0,.5);

  --ev-strong:  #A3D45C;
  --ev-moderate:#E8C25C;
  --ev-limited: #E0996A;
  --ev-pre:     #9FB3C6;

  color-scheme: dark;
}

/* ---------- 3. Base ---------- */
body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.65;
  background: var(--bg);
  color: var(--fg);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  line-height: 1.08;
  letter-spacing: -.028em;
  font-weight: 700;
  color: var(--fg);
}
h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); letter-spacing: -.018em; }
h5 { font-size: var(--fs-lg); letter-spacing: -.012em; }

p { color: var(--fg-muted); }
strong { color: var(--fg); font-weight: 600; }

::selection { background: var(--lime-400); color: var(--accent-ink); }

:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* ---------- 4. Layout ---------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }
@media (min-width: 768px) { .wrap, .wrap-narrow { width: min(100% - 4rem, var(--wrap)); } .wrap-narrow { max-width: var(--wrap-narrow); } }

.section { padding-block: clamp(2.4rem, 1.4rem + 4.2vw, 4.9rem); position: relative; }
.section--tight { padding-block: clamp(1.75rem, 1rem + 2.8vw, 3.2rem); }

.band-invert {
  background: var(--inv-bg);
  color: var(--inv-fg);
  position: relative;
  overflow: hidden;
}
.band-invert h1, .band-invert h2, .band-invert h3, .band-invert h4, .band-invert h5 { color: var(--inv-fg); }
.band-invert p { color: var(--inv-muted); }
.band-sunken { background: var(--bg-sunken); }

.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 288px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 224px), 1fr)); }

.stack   { display: flex; flex-direction: column; gap: var(--sp-4); }
.row     { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }

/* ---------- 5. Type helpers ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 500;
}
.band-invert .eyebrow { color: var(--lime-400); }
.eyebrow::before {
  content: "";
  width: 26px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--magenta), var(--lime));
}

.lead { font-size: var(--fs-lg); line-height: 1.55; color: var(--fg-muted); max-width: 62ch; }
.measure { max-width: 68ch; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.hl { color: var(--accent-deep); }
.band-invert .hl { color: var(--lime-400); }
.text-center { text-align: center; }
.center-x { margin-inline: auto; }

.section-head { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-7); }
.section-head--center { align-items: center; text-align: center; }
.section-head--center .lead { text-align: center; }

/* ---------- 6. Liquid glass ---------- */
.glass {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi), inset 0 -1px 1px var(--glass-lo);
  isolation: isolate;
  overflow: hidden;
}

/* refractive rim: the "liquid" edge */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from 210deg,
    rgba(255,255,255,.05), rgba(255,255,255,.72) 18%,
    rgba(212,242,76,.35) 32%, rgba(255,255,255,.12) 50%,
    rgba(255,255,255,.65) 74%, rgba(255,255,255,.05));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: .85;
  pointer-events: none;
  z-index: 2;
}

/* pointer-tracked specular sheen */
.glass::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(closest-side circle at var(--mx, 50%) var(--my, 0%),
    rgba(255,255,255,.5), rgba(255,255,255,0) 72%);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
  pointer-events: none;
  z-index: 1;
}
.glass:hover::after, .glass:focus-within::after { opacity: .9; }

.glass > * { position: relative; z-index: 3; }

/* glass on dark bands */
.band-invert .glass,
.glass--dark {
  background: var(--glass-bg-dark);
  border-color: var(--glass-border-dark);
  box-shadow: 0 22px 54px -22px rgba(0,0,0,.6), inset 0 1px 0 var(--glass-hi-dark), inset 0 -1px 1px rgba(0,0,0,.2);
}
.band-invert .glass::after, .glass--dark::after {
  background: radial-gradient(closest-side circle at var(--mx, 50%) var(--my, 0%),
    rgba(212,242,76,.22), rgba(255,255,255,.1) 40%, rgba(255,255,255,0) 74%);
}

/* subtle variant for dense content */
.glass--flat { backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); box-shadow: 0 8px 24px -14px rgba(10,17,36,.3), inset 0 1px 0 var(--glass-hi); }
.glass--flat::before { opacity: .5; }

@supports not (backdrop-filter: blur(2px)) {
  .glass { background: var(--surface); }
  .band-invert .glass, .glass--dark { background: rgba(255,255,255,.12); }
}

/* ambient colour blobs that glass refracts */
.aura { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.aura span {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  opacity: .55;
  animation: drift 22s var(--ease) infinite alternate;
}
/* neon glows over the purple-black hero: purple, pink, lime — Payram's pops */
.aura span:nth-child(1) { width: 44vw; height: 44vw; left: -10%; top: -14%; background: rgba(139,92,246,.42); }
.aura span:nth-child(2) { width: 40vw; height: 40vw; right: -8%; top: 8%;  background: rgba(232,56,192,.46); animation-delay: -7s; }
.aura span:nth-child(3) { width: 32vw; height: 32vw; left: 32%;  bottom: -18%; background: rgba(202,255,84,.24); animation-delay: -14s; }

@keyframes drift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(6%, -8%, 0) scale(1.18); }
}

/* fine scientific grid overlay */
.grid-overlay {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%);
}
.band-light .grid-overlay {
  background-image:
    linear-gradient(to right, rgba(10,17,36,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,17,36,.05) 1px, transparent 1px);
}

/* ---------- 7. Buttons ---------- */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: 0 var(--sp-5);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-base);
  letter-spacing: -.01em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  box-shadow: 0 6px 18px -8px rgba(127,163,10,.6), inset 0 1px 0 rgba(255,255,255,.5);
  white-space: nowrap;
}
.btn::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.6) 48%, transparent 76%);
  transform: translateX(-120%);
  transition: transform var(--dur-slow) var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -10px rgba(127,163,10,.7), inset 0 1px 0 rgba(255,255,255,.6); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(0) scale(.98); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  border: 1px solid var(--border);
  box-shadow: none;
}
.btn--ghost:hover { background: var(--surface); border-color: var(--fg-subtle); box-shadow: 0 8px 20px -14px rgba(10,17,36,.5); }
.band-invert .btn--ghost { --btn-fg: var(--inv-fg); border-color: var(--inv-border); }
.band-invert .btn--ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); }

.btn--glass {
  --btn-bg: transparent;
  --btn-fg: var(--inv-fg);
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.btn--glass:hover { background: rgba(255,255,255,.18); }

.btn--sm { min-height: 44px; padding: 0 var(--sp-4); font-size: var(--fs-sm); }
.btn--lg { min-height: 56px; padding: 0 var(--sp-6); font-size: var(--fs-md); }
.btn--block { width: 100%; }
.btn svg { width: 18px; height: 18px; flex: none; }

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-display); font-weight: 600;
  color: var(--fg); min-height: 44px;
  transition: gap var(--dur) var(--ease), color var(--dur) var(--ease);
}
.link-arrow svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.link-arrow:hover { gap: var(--sp-3); color: var(--accent-deep); }
.link-arrow:hover svg { transform: translate(2px, -2px); }
.band-invert .link-arrow { color: var(--inv-fg); }
.band-invert .link-arrow:hover { color: var(--lime-400); }

/* ---------- 8. Navigation ---------- */
.skip-link {
  position: absolute; left: var(--sp-4); top: -100px;
  z-index: var(--z-toast);
  background: var(--accent); color: var(--accent-ink);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-pill);
  font-weight: 600;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--sp-4); }

.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  padding-block: var(--sp-3);
  /* liquid glass: translucent pane, heavy blur, and a specular inner highlight
     along the top edge so it reads as a sheet of glass over the page */
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(255,255,255,.06),
    0 8px 28px -22px rgba(10,17,36,.6);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease);
}
.nav__inner {
  display: flex; align-items: center; gap: var(--sp-5);
  min-height: var(--nav-h);
}
.nav.is-stuck {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 1px 0 var(--border-soft),
    0 10px 30px -24px rgba(10,17,36,.7);
}
/* When a chat is in progress the nav slims down to give the conversation the
   room, and takes a solid light background so the (now black) logo and links
   stay legible over whatever has scrolled up behind it. */
body.is-chatting .nav {
  padding-block: var(--sp-1);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  box-shadow: 0 1px 0 var(--border-soft);
}
body.is-chatting .nav__inner { min-height: 46px; }
body.is-chatting .brand__logo { height: 30px; }
/* the slim nav reads as "light content", so the black logo/links belong */
body.is-chatting .nav:not(.is-stuck) .brand__logo { content: url('../img/brand/biorx-logo.png'); }
body.is-chatting .nav:not(.is-stuck) .nav__login { color: var(--fg); border-color: var(--border); background: var(--surface); }
body.is-chatting .nav:not(.is-stuck) .nav__account { color: var(--fg); border-color: var(--border); background: var(--surface); }

.brand { display: inline-flex; align-items: center; gap: var(--sp-3); min-height: 44px; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: -.03em; }
.brand__mark { width: 34px; height: 34px; flex: none; }
.brand__dot { color: var(--accent-deep); }

/* Raster logo lockup (DNA + wordmark). The artwork is monochrome, so it needs a
   white version on dark backgrounds and a black one on light. The nav is
   transparent, so which applies depends on what sits behind it:

     - white on the dark homepage hero, and anywhere in dark mode
     - black on light content pages, and once the nav goes light on scroll

   Default is white (larger), and black is applied to the light cases. */
.brand__logo {
  display: block; height: 40px; width: auto; flex: none;
  content: url('../img/brand/biorx-logo.png');        /* black artwork — the default */
}
/* Every page opens with a dark purple header (the hero on home, the page-head on
   the rest), so the nav starts over dark. There the logo is the LIME artwork —
   the brand's primary accent at LRV 85 gives 15:1 on the purple-black ground
   (AAA) and reads as a deliberate brand moment rather than a plain white mark.
   Once the nav goes sticky over light content it falls back to black above. */
.nav:not(.is-stuck) .brand__logo { content: url('../img/brand/biorx-logo-lime.png'); }
/* The footer is dark purple too, so the lime artwork there as well. */
.footer__brand .brand__logo { height: 40px; content: url('../img/brand/biorx-logo-lime.png'); }
@media (max-width: 560px) { .brand__logo { height: 34px; } }

/* Dark mode removed: the toggle is gone from the UI and the site is light only. */
.theme-toggle { display: none !important; }

/* ---------- accounts: nav control + modal ---------- */
.nav__auth { display: flex; align-items: center; }
.nav__login { white-space: nowrap; }
.nav__account {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--fg); font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
}
.nav__account:hover { border-color: var(--brand-blue); }
.nav__account svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
/* over a dark hero the nav text is light, so match the account control to it */
.nav:not(.is-stuck) .nav__login { color: #fff; border-color: rgba(255,255,255,.5); }
.nav:not(.is-stuck) .nav__account { color: #fff; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.08); }
/* Over the dark header (hero on home, page-head elsewhere) the nav links must be
   light to be readable — the default --fg-muted is near-invisible on dark. */
.nav:not(.is-stuck) .nav__link { color: rgba(255,255,255,.74); }
.nav:not(.is-stuck) .nav__link:hover { color: #fff; background: rgba(255,255,255,.12); }
.nav:not(.is-stuck) .nav__link[aria-current="page"] { color: #fff; }
/* ...but the in-chat slim nav switches to a light background, so links flip back. */
body.is-chatting .nav:not(.is-stuck) .nav__link { color: var(--fg-muted); }
body.is-chatting .nav:not(.is-stuck) .nav__link:hover,
body.is-chatting .nav:not(.is-stuck) .nav__link[aria-current="page"] { color: var(--fg); }

.auth-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: var(--sp-4); }
.auth-modal[hidden] { display: none; }
.auth-modal__scrim { position: absolute; inset: 0; background: rgba(10,17,36,.5); }
.auth-card {
  position: relative; z-index: 1; width: 100%; max-width: 420px;
  background: var(--surface); border-radius: 20px; padding: var(--sp-6);
  box-shadow: 0 40px 90px -30px rgba(10,17,36,.6); border: 1px solid var(--border);
}
.auth-card__x { position: absolute; top: 12px; right: 14px; border: 0; background: none; font-size: 26px; line-height: 1; color: var(--fg-subtle); cursor: pointer; }
.auth-tabs { display: flex; gap: 6px; background: var(--bg-sunken); padding: 5px; border-radius: 12px; margin-bottom: var(--sp-5); }
.auth-tab { flex: 1; padding: 9px; border: 0; border-radius: 9px; background: none; font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm); color: var(--fg-muted); cursor: pointer; }
.auth-tab.is-on { background: var(--surface); color: var(--fg); box-shadow: 0 1px 4px rgba(10,17,36,.12); }
.auth-pane h3 { font-family: var(--font-display); font-size: var(--fs-xl); margin-bottom: var(--sp-4); }
.auth-pane label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--fg); margin-bottom: var(--sp-3); }
.auth-pane input[type=email], .auth-pane input[type=password], .auth-pane input[name=firstName] {
  display: block; width: 100%; margin-top: 5px; min-height: 48px; padding: 0 var(--sp-4);
  border-radius: 12px; border: 1.5px solid var(--border); background: #fff; font-size: var(--fs-base);
  color: var(--ink); -webkit-text-fill-color: var(--ink);
}
.auth-pane input:focus { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-blue) 16%, transparent); }
.auth-hint { font-weight: 400; color: var(--fg-subtle); }
/* ecommerce-style account menu inside the profile pane */
.acct-head { display: flex; gap: var(--sp-3); align-items: center; }
.acct-avatar {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: #1A0F35; color: var(--lime);
}
.acct-avatar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.acct-email { font-size: var(--fs-sm); color: var(--fg-subtle); margin: 2px 0 0; }
.acct-menu {
  margin-top: var(--sp-4); border: 1px solid var(--border-soft); border-radius: 14px;
  overflow: hidden; background: var(--surface);
}
.acct-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 13px var(--sp-4); font-size: var(--fs-sm); font-weight: 600; color: var(--fg);
  text-decoration: none;
}
.acct-row + .acct-row { border-top: 1px solid var(--border-soft); }
.acct-row > svg:first-child { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--accent-deep); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.acct-row > span:first-of-type { flex: 1; }
.acct-chev { width: 16px; height: 16px; fill: none; stroke: var(--fg-subtle); stroke-width: 2; }
a.acct-row:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
/* The .is-soon and .acct-soon rules that used to live here styled "Coming soon"
   badges on orders, tracking, payments and delivery addresses. BioRx sells
   nothing, so those rows were removed and their styling went with them rather
   than sitting in the stylesheet waiting to be reintroduced by accident. */

.auth-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.auth-seg button {
  min-height: 44px; padding: 0 var(--sp-3); border-radius: 11px;
  border: 1.5px solid var(--border); background: #fff; color: var(--fg);
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
}
.auth-seg button.is-on {
  border-color: var(--brand-blue);
  background: color-mix(in srgb, var(--brand-blue) 10%, #fff);
  color: var(--brand-indigo);
}
.auth-check { display: flex; gap: 9px; align-items: flex-start; font-weight: 400; color: var(--fg-muted); font-size: var(--fs-sm); }
.auth-check input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--brand-blue); }
.auth-err { color: #B4703A; font-size: var(--fs-sm); margin-bottom: var(--sp-3); }
.auth-note { font-size: var(--fs-xs); color: var(--fg-subtle); margin-top: var(--sp-3); }
.auth-who { font-size: var(--fs-base); color: var(--fg-muted); margin-bottom: var(--sp-4); }
.auth-pane .btn--block { margin-top: var(--sp-2); }
/* Themed accent within the inline brand mark: a lime stroke on the light
   background sits at 1.9:1 and effectively disappears. */
.brand__mark .accent-stroke { stroke: var(--accent-deep); }
.brand__mark .accent-fill   { fill: var(--accent-deep); }

.nav__links { display: none; gap: var(--sp-1); margin-inline: auto; }
@media (min-width: 1024px) { .nav__links { display: flex; } }
.nav__link {
  position: relative;
  padding: var(--sp-2) var(--sp-4);
  min-height: 44px;
  display: inline-flex; align-items: center;
  border-radius: var(--r-pill);
  font-weight: 500; font-size: var(--fs-base);
  color: var(--fg-muted);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav__link:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent); }
.nav__link[aria-current="page"] { color: var(--fg); font-weight: 600; }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: 6px;
  width: 24px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--magenta), var(--purple));
  transform: translateX(-50%);
}

.nav__actions { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
@media (min-width: 1024px) { .nav__actions { margin-left: 0; } }

.icon-btn {
  width: 44px; height: 44px;
  display: inline-grid; place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  color: var(--fg);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.icon-btn:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); border-color: var(--fg-subtle); }
.icon-btn:active { transform: scale(.94); }
.icon-btn svg { width: 20px; height: 20px; }
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

.nav__burger { display: inline-grid; }
@media (min-width: 1024px) { .nav__burger { display: none; } }

/* mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  display: grid; grid-template-rows: auto 1fr;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) 1.25rem; min-height: calc(var(--nav-h) + var(--sp-3)); }
.drawer__body { padding: var(--sp-4) 1.25rem var(--sp-8); overflow-y: auto; }
.drawer__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-2);
  min-height: 56px;
  font-family: var(--font-display); font-weight: 600; font-size: 1.4rem;
  letter-spacing: -.02em;
  border-bottom: 1px solid var(--border-soft);
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.drawer.is-open .drawer__link { opacity: 1; transform: none; }
.drawer__link:hover { color: var(--accent-deep); }
.drawer__link span { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--fg-subtle); }

/* ---------- 9. Hero ---------- */
.hero {
  position: relative;
  background: var(--olive-700);
  color: var(--inv-fg);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  overflow: hidden;
  padding-block: clamp(3rem, 1.5rem + 7vw, 6rem) clamp(3.5rem, 2rem + 7vw, 6.5rem);
  margin-top: calc(var(--nav-h) * -1 - var(--sp-3) * 2);
  padding-top: calc(var(--nav-h) + clamp(3rem, 1.5rem + 7vw, 6rem));
}
.hero h1, .hero h2 { color: var(--inv-fg); }
.hero p { color: var(--inv-muted); }
.hero__grid {
  display: grid; gap: var(--sp-8);
  align-items: center;
  position: relative; z-index: 3;
}
@media (min-width: 992px) { .hero__grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: var(--sp-7); } }

.hero__title { font-size: var(--fs-4xl); font-weight: 700; letter-spacing: -.035em; }
.hero__title .rotator { color: var(--lime-400); }
.hero__meta { display: flex; gap: var(--sp-5); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--inv-muted); }
.hero__meta li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.hero__meta svg { width: 16px; height: 16px; color: var(--lime-400); flex: none; }

.hero__visual { position: relative; }
.hero__panel { padding: var(--sp-5); border-radius: var(--r-xl); }

/* floating glass chip over the hero visual */
.chip-float {
  position: absolute;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-sm);
  animation: float 7s var(--ease) infinite alternate;
  z-index: 4;
}
.chip-float strong { display: block; font-family: var(--font-display); font-size: var(--fs-base); }
.chip-float small { color: var(--inv-muted); font-family: var(--font-mono); font-size: var(--fs-xs); }
.chip-float--a { left: -14px; bottom: 18%; animation-delay: -1.5s; }
.chip-float--b { right: -10px; top: 12%; animation-delay: -4s; }
@media (max-width: 640px) { .chip-float--a { left: 4px; } .chip-float--b { right: 4px; } }

@keyframes float {
  from { transform: translateY(0); }
  to   { transform: translateY(-14px); }
}

.pulse-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--lime-400); flex: none; position: relative; }
.pulse-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--lime-400); animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0%   { transform: scale(1); opacity: .7; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* ---------- 10. Marquee ---------- */
.marquee {
  position: relative; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: flex; gap: var(--sp-8); width: max-content; animation: scroll-x 42s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-base);
  color: var(--fg-subtle); white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.marquee__item:hover { color: var(--fg); }
.marquee__item svg { width: 22px; height: 22px; opacity: .75; }
@keyframes scroll-x { to { transform: translateX(-50%); } }

/* ---------- 11. Segmented control (animated) ---------- */
.segmented {
  position: relative;
  display: flex;
  gap: var(--sp-1);
  padding: var(--sp-1);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  border: 1px solid var(--border-soft);
  overflow-x: auto;
  scrollbar-width: none;
  isolation: isolate;
}
.segmented::-webkit-scrollbar { display: none; }
.segmented__thumb {
  position: absolute;
  top: var(--sp-1); left: 0;
  height: calc(100% - var(--sp-1) * 2);
  border-radius: var(--r-pill);
  background: var(--accent);
  box-shadow: 0 6px 16px -8px rgba(127,163,10,.75), inset 0 1px 0 rgba(255,255,255,.55);
  transition: transform var(--dur-slow) var(--ease-spring), width var(--dur-slow) var(--ease-spring);
  z-index: -1;
  will-change: transform, width;
}
.segmented__btn {
  flex: 1 0 auto;
  min-height: 46px;
  padding: 0 var(--sp-5);
  border-radius: var(--r-pill);
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm);
  color: var(--fg-muted);
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.segmented__btn[aria-selected="true"] { color: var(--accent-ink); }
.segmented__btn:hover { color: var(--fg); }
.segmented__btn[aria-selected="true"]:hover { color: var(--accent-ink); }
.band-invert .segmented { background: rgba(255,255,255,.08); border-color: var(--inv-border); }
.band-invert .segmented__btn { color: var(--inv-muted); }
.band-invert .segmented__btn:hover { color: var(--inv-fg); }
.band-invert .segmented__btn[aria-selected="true"] { color: var(--accent-ink); }

.panel { display: none; }
.panel.is-active { display: block; animation: panel-in var(--dur-slow) var(--ease) both; }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(16px) scale(.99); }
  to   { opacity: 1; transform: none; }
}

/* feature panel layout used on home + learn */
.feature-panel { display: grid; gap: var(--sp-6); align-items: center; padding: clamp(1.25rem, .8rem + 2vw, 2.5rem); }
@media (min-width: 900px) { .feature-panel { grid-template-columns: 1fr 1fr; } }
.feature-panel__media { border-radius: var(--r-md); overflow: hidden; position: relative; background: var(--bg-sunken); aspect-ratio: 4 / 3; }
.feature-panel__media img, .feature-panel__media svg { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 12. Cards ---------- */
.card {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  height: 100%;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -26px rgba(10,17,36,.55); border-color: var(--border); }
.card h4 a::after { content: ""; position: absolute; inset: 0; }
.card--link { position: relative; }

.card__icon {
  width: 48px; height: 48px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--lime-200);
  color: var(--olive-800);
}
[data-theme="dark"] .card__icon { background: rgba(212,242,76,.16); color: var(--lime-300); }
.card__icon svg { width: 24px; height: 24px; }
.card p { font-size: var(--fs-base); }

.card--num { counter-increment: step; }
.card--num::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .12em; color: var(--accent-deep); font-weight: 700;
}
.counter-list { counter-reset: step; }

/* peptide entry card */
.pep-card { position: relative; }
.pep-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.pep-card__seq {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--fg-subtle); letter-spacing: .04em;
  word-break: break-all;
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-sunken);
  border-radius: var(--r-xs);
  border: 1px solid var(--border-soft);
}
[data-theme="dark"] .pep-card__seq { background: rgba(255,255,255,.04); }
.pep-card__facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--border-soft); }
.pep-card__facts dt { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--fg-subtle); }
.pep-card__facts dd { margin: 0; font-weight: 600; color: var(--fg); }

/* article card */
.post {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-3);
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--surface); border: 1px solid var(--border-soft);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  height: 100%;
}
.post:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -28px rgba(10,17,36,.55); }
.post__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-sunken); }
.post__media img, .post__media svg { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.post:hover .post__media img, .post:hover .post__media svg { transform: scale(1.05); }
.post__body { padding: 0 var(--sp-5) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.post__meta { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--fg-subtle); letter-spacing: .06em; }
.post h4 { font-size: var(--fs-lg); }
.post h4 a::after { content: ""; position: absolute; inset: 0; }
.post p { font-size: var(--fs-sm); }
.post__foot { margin-top: auto; padding-top: var(--sp-3); }

/* ---------- 13. Badges & chips ---------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 4px var(--sp-3);
  border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--border);
  color: var(--fg-muted);
  background: var(--bg-sunken);
  white-space: nowrap;
}
[data-theme="dark"] .badge { background: rgba(255,255,255,.05); }
.badge svg { width: 13px; height: 13px; flex: none; }
.badge--accent { background: var(--lime-200); border-color: var(--lime-500); color: var(--olive-800); }
[data-theme="dark"] .badge--accent { background: rgba(212,242,76,.14); color: var(--lime-300); border-color: rgba(212,242,76,.35); }

/* evidence badges: icon + text, never colour alone */
.badge--ev-strong   { color: var(--ev-strong);   border-color: color-mix(in srgb, var(--ev-strong) 45%, transparent);   background: color-mix(in srgb, var(--ev-strong) 12%, transparent); }
.badge--ev-moderate { color: var(--ev-moderate); border-color: color-mix(in srgb, var(--ev-moderate) 45%, transparent); background: color-mix(in srgb, var(--ev-moderate) 12%, transparent); }
.badge--ev-limited  { color: var(--ev-limited);  border-color: color-mix(in srgb, var(--ev-limited) 45%, transparent);  background: color-mix(in srgb, var(--ev-limited) 12%, transparent); }
.badge--ev-pre      { color: var(--ev-pre);      border-color: color-mix(in srgb, var(--ev-pre) 45%, transparent);      background: color-mix(in srgb, var(--ev-pre) 12%, transparent); }

.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; padding: 0 var(--sp-4);
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: transparent;
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-sm);
  color: var(--fg-muted);
  transition: all var(--dur) var(--ease);
}
.chip:hover { border-color: var(--fg-subtle); color: var(--fg); }
.chip[aria-pressed="true"] {
  background: var(--olive-700); border-color: var(--olive-700); color: #F4F5EC;
}
[data-theme="dark"] .chip[aria-pressed="true"] { background: var(--lime-400); border-color: var(--lime-400); color: var(--accent-ink); }
.chip__count { font-family: var(--font-mono); font-size: var(--fs-xs); opacity: .7; }

/* ---------- 14. Stats ---------- */
.stat { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-5); }
.stat__num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem);
  letter-spacing: -.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat__label { font-size: var(--fs-sm); color: var(--fg-muted); }
.band-invert .stat__label { color: var(--inv-muted); }
.stat__num .unit { color: var(--accent-deep); }
.band-invert .stat__num .unit { color: var(--lime-400); }

/* ---------- 15. Accordion ---------- */
.acc { border-top: 1px solid var(--border-soft); }
.acc__item { border-bottom: 1px solid var(--border-soft); }
.acc__btn {
  width: 100%; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-2);
  min-height: 64px;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg);
  letter-spacing: -.015em;
  color: var(--fg);
  transition: color var(--dur) var(--ease);
}
.acc__btn:hover { color: var(--accent-deep); }
.acc__icon {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.acc__icon svg { width: 18px; height: 18px; transform: rotate(90deg); transition: transform var(--dur) var(--ease); }
.acc__btn[aria-expanded="true"] .acc__icon { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.acc__btn[aria-expanded="true"] .acc__icon svg { transform: rotate(-90deg); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease); }
.acc__panel.is-open { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__panel p { padding: 0 var(--sp-2) var(--sp-5); max-width: 72ch; }

/* ---------- 16. Tables ---------- */
.table-scroll { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--border-soft); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 640px; }
thead th {
  text-align: left; padding: var(--sp-4);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--fg-subtle); font-weight: 500;
  border-bottom: 1px solid var(--border);
  background: var(--bg-sunken);
  position: sticky; top: 0;
}
[data-theme="dark"] thead th { background: rgba(255,255,255,.04); }
tbody td { padding: var(--sp-4); border-bottom: 1px solid var(--border-soft); vertical-align: top; color: var(--fg-muted); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background var(--dur) var(--ease); }
tbody tr:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
tbody td:first-child { color: var(--fg); font-weight: 600; }
caption { caption-side: bottom; padding: var(--sp-3) var(--sp-4); font-size: var(--fs-xs); color: var(--fg-subtle); text-align: left; }

/* ---------- 17. Callouts ---------- */
.callout {
  display: flex; gap: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--bg-sunken);
}
[data-theme="dark"] .callout { background: rgba(255,255,255,.04); }
.callout__icon { flex: none; width: 24px; height: 24px; color: var(--accent-deep); }
.callout__icon svg { width: 100%; height: 100%; }
.callout h5 { margin-bottom: var(--sp-1); font-size: var(--fs-base); }
.callout p { font-size: var(--fs-sm); }
.callout--warn { border-color: color-mix(in srgb, var(--ev-limited) 40%, transparent); background: color-mix(in srgb, var(--ev-limited) 8%, transparent); }
.callout--warn .callout__icon { color: var(--ev-limited); }

.disclaimer-bar {
  font-size: var(--fs-sm);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-sunken);
  color: var(--fg-muted);
}
.disclaimer-bar .row { justify-content: center; text-align: center; gap: var(--sp-2); }
.disclaimer-bar svg { width: 16px; height: 16px; color: var(--accent-deep); flex: none; }

/* ---------- 18. Timeline / pathway ---------- */
.timeline { position: relative; display: grid; gap: var(--sp-5); counter-reset: tl; }
.timeline::before {
  content: ""; position: absolute; left: 21px; top: 12px; bottom: 12px;
  width: 2px; background: linear-gradient(var(--accent), var(--border));
  border-radius: 2px;
}
.timeline__item { position: relative; padding-left: 60px; counter-increment: tl; }
.timeline__item::before {
  content: counter(tl);
  position: absolute; left: 0; top: 0;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--accent);
  font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-sm);
  color: var(--accent-deep);
}
.timeline__item h5 { margin-bottom: var(--sp-1); }
.timeline__item p { font-size: var(--fs-sm); }

/* ---------- 19. Footer ---------- */
.footer { background: var(--olive-950); color: #E9EAE0; padding-block: var(--sp-9) var(--sp-6); position: relative; overflow: hidden; }
[data-theme="dark"] .footer { background: #101109; }
.footer h5 { color: #fff; font-size: var(--fs-xs); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .12em; font-weight: 500; margin-bottom: var(--sp-3); }
.footer a { color: #B9BCA6; font-size: var(--fs-sm); transition: color var(--dur) var(--ease); display: inline-block; padding-block: 7px; }
.footer a:hover { color: var(--lime-400); }
.footer__grid { display: grid; gap: var(--sp-6) var(--sp-7); grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.footer__brand { grid-column: 1 / -1; max-width: 44ch; }
/* Desktop: brand + all four link groups on ONE row so Company never wraps
   under the brand block (which doubled the footer height). */
@media (min-width: 900px) {
  .footer__grid { grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); align-items: start; }
  .footer__brand { grid-column: 1; }
}
.footer__brand p { color: #A6A995; font-size: var(--fs-sm); }
.footer__bottom {
  margin-top: var(--sp-8); padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
  font-size: var(--fs-xs); color: #8B8E7A; font-family: var(--font-mono);
}

.newsletter { display: flex; gap: var(--sp-2); padding: 6px; border-radius: var(--r-pill); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); max-width: 380px; }
.newsletter input {
  flex: 1; min-width: 0; min-height: 44px;
  background: none; border: 0; padding-inline: var(--sp-4);
  color: #fff; font-size: var(--fs-sm);
}
.newsletter input::placeholder { color: #8B8E7A; }
.newsletter input:focus { outline: none; }
.newsletter:focus-within { border-color: var(--lime-400); }
.newsletter button { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--lime-400); color: var(--accent-ink); display: grid; place-items: center; transition: transform var(--dur-fast) var(--ease); }
.newsletter button:hover { transform: scale(1.06); }
.newsletter button svg { width: 22px; height: 22px; stroke-width: 2.4; }
.form-note { font-size: var(--fs-xs); color: #8B8E7A; margin-top: var(--sp-2); }
.form-note[data-state="ok"] { color: var(--lime-400); }
.form-note[data-state="err"] { color: #E0996A; }

/* ---------- 20. CTA band ---------- */
.cta {
  border-radius: var(--r-xl);
  padding: clamp(2rem, 1.2rem + 4vw, 4rem);
  position: relative; overflow: hidden;
  background: var(--olive-700);
  color: var(--inv-fg);
}
.cta h2 { color: var(--inv-fg); }
.cta p { color: var(--inv-muted); }
.cta__inner { position: relative; z-index: 3; display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 900px) { .cta__inner { grid-template-columns: 1.1fr .9fr; } }

/* ---------- 21. Reveal on scroll ----------
   Scoped to .js so content is never hidden when scripting is unavailable. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js [data-reveal="scale"] { transform: translateY(24px) scale(.97); }
.js [data-reveal="left"]  { transform: translateX(-28px); }
.js [data-reveal="right"] { transform: translateX(28px); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- 22. Molecular / SVG animation ---------- */
.chain-svg .bond { stroke-dasharray: 6 6; animation: bond-flow 3.4s linear infinite; }
@keyframes bond-flow { to { stroke-dashoffset: -12; } }
.chain-svg .residue { transform-box: fill-box; transform-origin: center; animation: residue-breathe 4.2s var(--ease) infinite alternate; }
.chain-svg .residue:nth-child(even) { animation-delay: -2.1s; }
@keyframes residue-breathe { from { transform: scale(1); } to { transform: scale(1.09); } }
.chain-svg .tracer { stroke-dasharray: 40 460; animation: tracer 5.5s var(--ease) infinite; }
@keyframes tracer { to { stroke-dashoffset: -500; } }
.spin-slow { transform-origin: center; animation: spin 34s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 23. Reading progress ---------- */
.progress-bar {
  position: fixed; top: 0; left: 0; height: 3px;
  background: linear-gradient(90deg, var(--purple), var(--magenta) 55%, var(--lime));
  width: 0%; z-index: var(--z-toast);
  transition: width 90ms linear;
}

/* ---------- 24. Prose (article body) ---------- */
.prose { font-size: var(--fs-md); line-height: 1.78; }
.prose > * + * { margin-top: var(--sp-5); }
.prose h2 { font-size: clamp(1.6rem, 1.3rem + 1.3vw, 2.1rem); margin-top: var(--sp-8); scroll-margin-top: calc(var(--nav-h) + var(--sp-5)); }
.prose h3 { font-size: var(--fs-xl); margin-top: var(--sp-6); scroll-margin-top: calc(var(--nav-h) + var(--sp-5)); }
.prose p { color: var(--fg-muted); }
.prose ul { display: grid; gap: var(--sp-3); }
.prose ul li { position: relative; padding-left: var(--sp-5); color: var(--fg-muted); }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); transform: rotate(45deg); }
.prose ol { display: grid; gap: var(--sp-3); counter-reset: pl; }
.prose ol li { position: relative; padding-left: var(--sp-6); color: var(--fg-muted); counter-increment: pl; }
.prose ol li::before { content: counter(pl) "."; position: absolute; left: 0; font-family: var(--font-mono); color: var(--accent-deep); font-weight: 700; }
.prose blockquote {
  padding: var(--sp-5); border-radius: var(--r-md);
  border-left: 3px solid var(--accent);
  background: var(--bg-sunken); font-size: var(--fs-lg); line-height: 1.5;
  font-family: var(--font-display); font-weight: 500; color: var(--fg); letter-spacing: -.015em;
}
[data-theme="dark"] .prose blockquote { background: rgba(255,255,255,.04); }
.prose code { font-family: var(--font-mono); font-size: .88em; background: var(--bg-sunken); padding: 2px 6px; border-radius: 6px; border: 1px solid var(--border-soft); color: var(--fg); }
[data-theme="dark"] .prose code { background: rgba(255,255,255,.06); }
.prose a:not(.btn):not(.link-arrow) { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.prose a:not(.btn):not(.link-arrow):hover { color: var(--fg); }
.prose figure { margin: var(--sp-6) 0; }
/* Explainer diagrams read better a little smaller and centred, not full bleed. */
.prose figure img[src$=".svg"] { max-width: min(100%, 600px); margin-inline: auto; display: block; }
.prose figcaption { font-size: var(--fs-xs); color: var(--fg-subtle); font-family: var(--font-mono); margin-top: var(--sp-3); }
.prose img { border-radius: var(--r-md); width: 100%; }

.article-layout { display: grid; gap: var(--sp-8); grid-template-columns: 1fr; }
@media (min-width: 1024px) {
  .article-layout { grid-template-columns: 240px minmax(0, 1fr); gap: var(--sp-9); }
  .article-layout .toc { order: 0; }
}

.toc { position: sticky; top: calc(var(--nav-h) + var(--sp-4)); align-self: start; }
.toc ul { display: grid; gap: 2px; }
.toc a {
  display: flex; align-items: center; min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-xs);
  font-size: var(--fs-sm); color: var(--fg-subtle);
  border-left: 2px solid transparent;
  transition: all var(--dur) var(--ease);
}
.toc a:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 5%, transparent); }
.toc a.is-active { color: var(--accent-deep); border-left-color: var(--accent); font-weight: 600; }

/* ---------- 25. Search + filters ---------- */
.search {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-4);
  min-height: 56px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.search:focus-within { border-color: var(--accent-deep); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 28%, transparent); }
.search svg { width: 20px; height: 20px; color: var(--fg-subtle); flex: none; }
.search input { flex: 1; min-width: 0; border: 0; background: none; font-size: var(--fs-base); }
.search input:focus { outline: none; }

/* live search suggestions */
.search-wrap { position: relative; }
.typeahead {
  position: absolute; z-index: var(--z-nav); left: 0; right: 0; top: calc(100% + 8px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 24px 48px -20px rgba(10, 17, 36, .35);
  overflow: hidden auto; max-height: min(60vh, 430px);
}
.typeahead[hidden] { display: none; }
.typeahead__row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  text-decoration: none; color: inherit;
}
.typeahead__row + .typeahead__row { border-top: 1px solid var(--border-soft); }
.typeahead__row:hover, .typeahead__row.is-on { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.typeahead__text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.typeahead__name { font-weight: 600; font-size: var(--fs-sm); color: var(--fg); }
.typeahead__name mark { background: color-mix(in srgb, var(--accent) 55%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.typeahead__alias {
  font-size: var(--fs-xs); color: var(--fg-subtle);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.typeahead__row .badge { flex: none; }

.results-count { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--fg-subtle); }
.empty-state { text-align: center; padding: var(--sp-9) var(--sp-4); display: grid; gap: var(--sp-3); justify-items: center; }
.empty-state svg { width: 48px; height: 48px; color: var(--fg-subtle); opacity: .6; }

/* filtered card enter/exit */
.filter-grid > * { transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.filter-grid > [data-hidden="true"] { display: none; }
.filter-grid > .is-entering { opacity: 0; transform: scale(.96) translateY(10px); }

/* ---------- 26. Page header ---------- */
.page-head {
  position: relative; overflow: hidden;
  background: var(--olive-700); color: var(--inv-fg);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  margin-top: calc(var(--nav-h) * -1 - var(--sp-3) * 2);
  padding-top: calc(var(--nav-h) + clamp(2.5rem, 1.5rem + 5vw, 4.5rem));
  padding-bottom: clamp(2.5rem, 1.5rem + 5vw, 4.5rem);
}
.page-head h1 { color: var(--inv-fg); font-size: var(--fs-3xl); }
.page-head p { color: var(--inv-muted); }
.page-head__inner { position: relative; z-index: 3; display: grid; gap: var(--sp-4); }

.breadcrumb { display: flex; gap: var(--sp-2); align-items: center; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--inv-muted); flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--lime-400); }
.breadcrumb svg { width: 12px; height: 12px; opacity: .6; }

/* ---------- 27. Misc ---------- */
.divider { height: 1px; background: var(--border-soft); border: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.tag-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.split-list { display: grid; gap: var(--sp-4); }
.split-list li { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: start; }
.split-list svg { width: 22px; height: 22px; color: var(--accent-deep); flex: none; margin-top: 2px; }
.band-invert .split-list svg { color: var(--lime-400); }
.split-list p { font-size: var(--fs-sm); margin-top: 2px; }

.res-link {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-4); align-items: center;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  transition: all var(--dur) var(--ease);
  min-height: 76px;
}
.res-link:hover { border-color: var(--accent-deep); transform: translateX(4px); box-shadow: 0 14px 30px -22px rgba(10,17,36,.6); }
.res-link__mark { width: 40px; height: 40px; border-radius: var(--r-xs); display: grid; place-items: center; background: var(--bg-sunken); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; color: var(--fg-muted); border: 1px solid var(--border-soft); }
[data-theme="dark"] .res-link__mark { background: rgba(255,255,255,.05); }
.res-link strong { display: block; font-family: var(--font-display); font-size: var(--fs-base); }
.res-link span { font-size: var(--fs-sm); color: var(--fg-muted); }
.res-link__go { width: 20px; height: 20px; color: var(--fg-subtle); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.res-link:hover .res-link__go { color: var(--accent-deep); transform: translate(2px,-2px); }

/* ---------- 28. Responsive tweaks ---------- */
@media (max-width: 640px) {
  :root { --nav-h: 64px; }
  .section { padding-block: 3rem; }
  .hero__title { font-size: clamp(2.25rem, 1.4rem + 4.4vw, 3rem); }
  .card, .stat { padding: var(--sp-4); }
  .footer__bottom { flex-direction: column; gap: var(--sp-2); }

  /* Reveal sideways only where there is room to. At 375px a 28px slide pushes
     a full-width block past the edge, which shows up as the page being draggable
     horizontally. Phones get the fade-up instead. */
  .js [data-reveal="left"],
  .js [data-reveal="right"] { transform: translateY(24px); }

  /* Get to the point sooner. On a 812px screen the standing disclaimer, the
     headline and the lead used to eat 615px before the chat panel began, so the
     one thing the site is for opened below the fold. Tightening all three puts
     the welcome and the first suggestions on the first screen. */
  .disclaimer-bar { font-size: var(--fs-xs); padding: var(--sp-2) 0; line-height: 1.45; }
  .hero { padding-top: calc(var(--nav-h) + 1.75rem); padding-bottom: 2.5rem; }
  .hero .lead { font-size: var(--fs-base); line-height: 1.5; }
  .hero__meta { gap: var(--sp-3) var(--sp-4); font-size: var(--fs-xs); }

  /* Three tabs at 24px of side padding each overflow a 335px strip by 16px,
     leaving the last one clipped for no reason. Tighter padding fits them. */
  .segmented__btn { padding: 0 var(--sp-3); }

  /* 16px is the floor for anything typed into. iOS Safari zooms the whole page
     in when a field smaller than that takes focus, and it does not zoom back
     out afterwards, leaving the visitor stranded at 1.2x with the page now
     scrolling sideways. Every other field on the site already clears this;
     the footer signup was the one at 14px. */
  .newsletter input { font-size: 16px; }

  /* Tables restack as cards.
     Every table here has a 640px minimum width, which on a 335px column means
     a sideways scrollbar nested inside the page's own: half the data hidden,
     and a row only readable by swiping back and forth. So below 640px each row
     becomes its own small card with the column name beside each value, and the
     whole reference reads in one downward scroll. Labels are put on the cells
     by the Tables module in main.js, which also restates the table roles that
     changing `display` would otherwise strip. */
  .table-scroll {
    overflow-x: visible;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .table-scroll table {
    min-width: 0;
    display: flex;
    flex-direction: column;   /* so the caption can stay last, as on desktop */
  }
  .table-scroll thead {
    /* Hidden visually, kept for assistive technology. */
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
  }
  .table-scroll tbody { display: block; }
  .table-scroll caption { order: 3; padding: var(--sp-3) 0 0; }
  .table-scroll tbody tr {
    display: block;
    padding: var(--sp-1) var(--sp-4);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    background: var(--surface);
  }
  .table-scroll tbody tr + tr { margin-top: var(--sp-3); }
  .table-scroll tbody tr:hover { background: var(--surface); }
  .table-scroll tbody td,
  .table-scroll tbody th {
    display: block;
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--border-soft);
  }
  .table-scroll tbody tr > *:last-child { border-bottom: 0; }
  .table-scroll tbody [data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--fg-subtle);
  }
  /* The row's own name leads the card, so it needs no column label above it. */
  .table-scroll tbody tr > *:first-child {
    font-size: var(--fs-base);
    padding-top: var(--sp-4);
  }
  .table-scroll tbody tr > *:first-child::before { content: none; }
}

/* ---------- 29. Motion & print ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .marquee__track { animation: none; }
  .aura span { animation: none; }
}

@media print {
  .nav, .footer, .drawer, .progress-bar, .aura, .cta { display: none !important; }
  body { background: #fff; color: #000; }
  .glass { background: #fff; border: 1px solid #ccc; box-shadow: none; backdrop-filter: none; }
}