/* ============================================================
   BIOFORGE LIVING SYSTEMS — Shared Design System
   v3.0  ·  Cinematic premium  ·  May 2026
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }

:root {
  --bg-light: #F5F2EC;
  --bg-light-elev: #FAFAF7;
  --bg-dark: #0A0A0B;
  --bg-void: #050507;
  --bg-dark-elev: #141416;

  --ink-dark: #0A0A0B;
  --ink-soft-dark: #4B4742;
  --ink-mute-dark: #8A857E;
  --ink-faint-dark: #C7C2BA;

  --ink-light: #F5F2EC;
  --ink-soft-light: #A8A4A0;
  --ink-mute-light: #6B6864;
  --ink-faint-light: #2A2825;

  --accent: #D97C20;
  --accent-hover: #E58A2E;
  --accent-deep: #B86518;
  --accent-glow: rgba(217, 124, 32, 0.18);

  --reef-teal: #5B8B8C;
  --signal-clean: #6FAA63;

  --font-display: 'Fraunces', 'Times New Roman', Georgia, serif;
  --font-body: 'Geist', 'SF Pro Text', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  --max-w: 1440px;
  --max-w-narrow: 920px;
  --max-w-text: 680px;
  --pad-x: clamp(1.5rem, 4vw, 4rem);
  --pad-y: clamp(5rem, 10vw, 10rem);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 200ms;
  --t-med: 400ms;
  --t-slow: 800ms;
  --t-cinema: 1400ms;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-light);
  background: var(--bg-void);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

html { background: var(--bg-void); }

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

/* ============ TYPE SCALES ============ */
.titan {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(4rem, 16vw, 13rem);
  line-height: 0.88;
  letter-spacing: -0.05em;
  font-feature-settings: 'ss01' on;
}

.display-mega {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(3.5rem, 11vw, 10rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  font-feature-settings: 'ss01' on;
}

.display-xl {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.75rem, 7vw, 6rem);
  line-height: 1.0;
  letter-spacing: -0.035em;
}

.display-lg {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.display-md {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.italic-accent {
  font-style: italic;
  font-weight: 300;
  font-variation-settings: 'opsz' 144;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft-dark);
}

.eyebrow-light { color: var(--ink-soft-light); }
.eyebrow-accent { color: var(--accent); }

.body-lg {
  font-size: clamp(1.125rem, 1.4vw, 1.375rem);
  line-height: 1.55;
  font-weight: 400;
  color: var(--ink-soft-dark);
}

.body-md {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-soft-dark);
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  font-feature-settings: 'tnum' on;
}

/* ============ SECTION CONTEXTS ============ */
.sec-light { background: var(--bg-light); color: var(--ink-dark); }
.sec-light .body-lg, .sec-light .body-md { color: var(--ink-soft-dark); }
.sec-light .eyebrow { color: var(--ink-soft-dark); }

.sec-dark { background: var(--bg-dark); color: var(--ink-light); }
.sec-dark .body-lg, .sec-dark .body-md { color: var(--ink-soft-light); }
.sec-dark .eyebrow { color: var(--ink-soft-light); }

.sec-void { background: var(--bg-void); color: var(--ink-light); }
.sec-void .body-lg, .sec-void .body-md { color: var(--ink-soft-light); }

.sec-cream { background: var(--bg-light-elev); color: var(--ink-dark); }

/* ============ LAYOUT ============ */
.section {
  padding: var(--pad-y) var(--pad-x);
  position: relative;
}

.section-hero {
  min-height: 100vh;
  padding: var(--pad-x);
  padding-top: calc(var(--pad-x) + 4.5rem);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.container { max-width: var(--max-w); margin: 0 auto; width: 100%; }
.container-narrow { max-width: var(--max-w-narrow); margin: 0 auto; width: 100%; }
.container-text { max-width: var(--max-w-text); margin: 0 auto; width: 100%; }

/* ============ NAV ============ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1.125rem var(--pad-x);
  background: rgba(245, 242, 236, 0.78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(10, 10, 11, 0.06);
  color: var(--ink-dark);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background var(--t-fast) var(--ease-soft);
}

.nav-dark {
  background: rgba(5, 5, 7, 0.6);
  border-bottom-color: rgba(245, 242, 236, 0.06);
  color: var(--ink-light);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
}

.nav-brand img { width: 28px; height: 28px; border-radius: 50%; }

.nav-links { display: flex; align-items: center; gap: 2rem; }

.nav-link {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  opacity: 0.72;
  transition: opacity var(--t-fast) var(--ease-soft);
}

.nav-link:hover, .nav-link.active { opacity: 1; }

/* Mobile nav toggle (hamburger) — hidden on desktop, visible <720px */
.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 0.5rem;
  cursor: pointer;
  margin-left: auto;
  margin-right: 0.5rem;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  margin: 5px 0;
  transition: transform 240ms var(--ease-soft), opacity 240ms var(--ease-soft);
}
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile nav panel — full-width below nav bar, slides down on open */
.nav-mobile {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  background: var(--bg-void);
  padding: 5.5rem 1.5rem 2.5rem;
  flex-direction: column;
  gap: 1.25rem;
  transform: translateY(-100%);
  transition: transform 320ms var(--ease-soft);
  border-bottom: 1px solid rgba(245, 242, 236, 0.08);
}
body.nav-open .nav-mobile { transform: translateY(0); }
.nav-mobile-link {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--ink-light);
  text-decoration: none;
  opacity: 0.225;
  padding: 0.5rem 0;
  transition: opacity 180ms var(--ease-soft);
}
.nav-mobile-link:hover { opacity: 1; }

/* On light-nav pages (kit, founder, privacy, terms, etc.) mobile panel matches */
.nav-light + .nav-mobile,
body[data-nav="light"] .nav-mobile { background: var(--bg-light); }
.nav-light + .nav-mobile .nav-mobile-link,
body[data-nav="light"] .nav-mobile .nav-mobile-link { color: var(--ink-dark); }

.nav-cta {
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border: 1px solid currentColor;
  border-radius: 100px;
  opacity: 0.9;
  transition: all var(--t-fast) var(--ease-soft);
}

.nav-cta:hover {
  opacity: 1;
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink-light) !important;
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: 100px;
  transition: all var(--t-med) var(--ease-soft);
  cursor: pointer;
  white-space: nowrap;
}

.btn-primary {
  background: var(--accent);
  color: var(--ink-light);
  border: 1px solid var(--accent);
}

.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 12px 36px -12px var(--accent-glow);
}

.btn-secondary {
  background: transparent;
  color: currentColor;
  border: 1px solid currentColor;
  opacity: 0.225;
}

.btn-secondary:hover { opacity: 1; }

.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  font-size: 1rem;
  font-weight: 500;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: gap var(--t-fast) var(--ease-soft);
}

.btn-text:hover { gap: 0.875rem; }

.btn-text .arrow {
  display: inline-block;
  transition: transform var(--t-fast) var(--ease-soft);
}

.btn-text:hover .arrow { transform: translateX(4px); }

/* ============ CINEMATIC: PARTICLES ============ */
.particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.55;
}

.particles circle {
  fill: var(--ink-light);
  animation: drift 24s infinite linear, pulse 8s infinite ease-in-out;
  transform-origin: center;
  transform-box: fill-box;
}

@keyframes drift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(8px, -12px); }
  50%  { transform: translate(-6px, -20px); }
  75%  { transform: translate(-12px, -6px); }
  100% { transform: translate(0, 0); }
}

@keyframes pulse {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 0.9; }
}

/* ============ CINEMATIC: MOLECULAR WATERMARK ============ */
.molecule-bg {
  position: absolute;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: screen;
}

.molecule-bg.spin-slow { animation: spin-slow 90s linear infinite; }
.molecule-bg.spin-rev { animation: spin-rev 120s linear infinite; }

@keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes spin-rev { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

/* ============ CINEMATIC: AMBIENT GLOW ============ */
.ambient-glow {
  position: absolute;
  pointer-events: none;
  width: 80vw;
  height: 80vw;
  max-width: 1100px;
  max-height: 1100px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    var(--accent-glow) 0%,
    rgba(217, 124, 32, 0.08) 25%,
    transparent 60%);
  z-index: 0;
  filter: blur(20px);
}

/* ============ HERO LAYOUT ============ */
.hero-content {
  position: relative;
  z-index: 5;
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

.hero-headline { max-width: 14ch; }
.hero-subhead { max-width: 36ch; }

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

/* ============ CINEMATIC: WORD REVEAL ============ */
.reveal-words .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(28px);
  filter: blur(8px);
  transition:
    opacity var(--t-cinema) var(--ease-cinematic),
    transform var(--t-cinema) var(--ease-cinematic),
    filter var(--t-cinema) var(--ease-cinematic);
}

.reveal-words.in .word {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.reveal-words.in .word:nth-child(1) { transition-delay: 0ms; }
.reveal-words.in .word:nth-child(2) { transition-delay: 90ms; }
.reveal-words.in .word:nth-child(3) { transition-delay: 180ms; }
.reveal-words.in .word:nth-child(4) { transition-delay: 270ms; }
.reveal-words.in .word:nth-child(5) { transition-delay: 360ms; }
.reveal-words.in .word:nth-child(6) { transition-delay: 450ms; }
.reveal-words.in .word:nth-child(7) { transition-delay: 540ms; }
.reveal-words.in .word:nth-child(8) { transition-delay: 630ms; }

/* ============ CINEMATIC: STATEMENT SCREENS ============ */
.statement {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem var(--pad-x);
  background: var(--bg-void);
  color: var(--ink-light);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.statement .titan { max-width: 18ch; }

/* ============ SIMPLE REVEAL ============ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}

.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-1 { transition-delay: 50ms; }
.reveal-2 { transition-delay: 150ms; }
.reveal-3 { transition-delay: 250ms; }
.reveal-4 { transition-delay: 350ms; }
.reveal-5 { transition-delay: 450ms; }

/* ============ CINEMATIC: SCROLL CUE ============ */
.scroll-cue {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  opacity: 0;
  animation: cue-fade 1s var(--ease-out) 1.8s forwards;
  z-index: 5;
}

.scroll-cue .line {
  width: 1px;
  height: 56px;
  background: linear-gradient(to bottom, transparent, var(--accent));
  animation: cue-pulse 2s ease-in-out infinite;
  transform-origin: top;
}

@keyframes cue-fade { to { opacity: 0.9; } }
@keyframes cue-pulse {
  0%, 100% { transform: scaleY(0.4); opacity: 0.5; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

/* ============ HAIRLINES ============ */
.hairline { width: 100%; height: 1px; background: var(--ink-faint-dark); border: 0; }
.sec-dark .hairline, .sec-void .hairline { background: var(--ink-faint-light); }

/* ============ SPLIT LAYOUT ============ */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split-7-5 { grid-template-columns: 7fr 5fr; }
  .split-5-7 { grid-template-columns: 5fr 7fr; }
}

.split-img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 4px;
}

.split-img.tall { aspect-ratio: 3 / 4; }
.split-img.wide { aspect-ratio: 4 / 3; }
.split-img.square { aspect-ratio: 1 / 1; }

/* ============ CINEMATIC: PARALLAX ============ */
.parallax-slow {
  transform: translate3d(0, calc(var(--scroll-y, 0px) * -0.06), 0);
  will-change: transform;
}

.parallax-fast {
  transform: translate3d(0, calc(var(--scroll-y, 0px) * -0.14), 0);
  will-change: transform;
}

/* ============ STATS / COUNTERS ============ */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem;
}

.stat-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.5rem, 4.5vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 0.5rem;
}

.stat-num.cinematic {
  font-size: clamp(5rem, 14vw, 13rem);
  letter-spacing: -0.05em;
  font-weight: 300;
}

.stat-label {
  font-size: 0.8125rem;
  color: var(--ink-soft-dark);
  letter-spacing: 0.01em;
}

.sec-dark .stat-label, .sec-void .stat-label { color: var(--ink-soft-light); }

/* ============ CINEMATIC: ICP CARD ============ */
.icp-card {
  background: var(--bg-dark-elev);
  border: 1px solid var(--ink-faint-light);
  border-radius: 8px;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  position: relative;
  color: var(--ink-light);
}

.sec-light .icp-card {
  background: var(--bg-light-elev);
  border-color: var(--ink-faint-dark);
  color: var(--ink-dark);
}

.icp-card-head {
  padding: 1rem 1.25rem;
  background: var(--bg-void);
  color: var(--ink-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--ink-faint-light);
}

.icp-card-head .live-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--signal-clean);
  margin-right: 0.5rem;
  animation: live-pulse 2s ease-in-out infinite;
  vertical-align: middle;
}

@keyframes live-pulse {
  0%, 100% { opacity: 0.4; box-shadow: 0 0 0 0 rgba(111, 170, 99, 0); }
  50%      { opacity: 1;   box-shadow: 0 0 0 6px rgba(111, 170, 99, 0); }
}

.icp-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 0.8fr;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--ink-faint-light);
  align-items: center;
  position: relative;
  opacity: 0;
  transform: translateX(-12px);
  transition:
    opacity 700ms var(--ease-cinematic),
    transform 700ms var(--ease-cinematic);
  overflow: hidden;
}

.sec-light .icp-row { border-bottom-color: var(--ink-faint-dark); }

.icp-row::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(111, 170, 99, 0.18) 50%,
    transparent 100%);
  transform: translateX(-100%);
  transition: transform 1200ms var(--ease-cinematic);
  pointer-events: none;
}

.icp-card.in .icp-row { opacity: 1; transform: translateX(0); }
.icp-card.in .icp-row::before { transform: translateX(100%); }

.icp-card.in .icp-row:nth-child(1) { transition-delay: 100ms; }
.icp-card.in .icp-row:nth-child(2) { transition-delay: 220ms; }
.icp-card.in .icp-row:nth-child(3) { transition-delay: 340ms; }
.icp-card.in .icp-row:nth-child(4) { transition-delay: 460ms; }
.icp-card.in .icp-row:nth-child(5) { transition-delay: 580ms; }
.icp-card.in .icp-row:nth-child(6) { transition-delay: 700ms; }
.icp-card.in .icp-row:nth-child(7) { transition-delay: 820ms; }
.icp-card.in .icp-row:nth-child(8) { transition-delay: 940ms; }
.icp-card.in .icp-row:nth-child(9) { transition-delay: 1060ms; }

.icp-card.in .icp-row:nth-child(1)::before { transition-delay: 200ms; }
.icp-card.in .icp-row:nth-child(2)::before { transition-delay: 320ms; }
.icp-card.in .icp-row:nth-child(3)::before { transition-delay: 440ms; }
.icp-card.in .icp-row:nth-child(4)::before { transition-delay: 560ms; }
.icp-card.in .icp-row:nth-child(5)::before { transition-delay: 680ms; }
.icp-card.in .icp-row:nth-child(6)::before { transition-delay: 800ms; }
.icp-card.in .icp-row:nth-child(7)::before { transition-delay: 920ms; }
.icp-card.in .icp-row:nth-child(8)::before { transition-delay: 1040ms; }

.icp-row:last-child { border-bottom: 0; }

.icp-row.icp-head {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute-light);
  background: rgba(255,255,255,0.02);
  opacity: 1;
  transform: none;
}

.sec-light .icp-row.icp-head { background: var(--bg-light); color: var(--ink-mute-dark); }

.icp-row.icp-head::before { display: none; }

.icp-result { font-weight: 500; }

.icp-status {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.icp-status.ok { color: var(--signal-clean); }
.icp-status.warn { color: var(--accent); }

/* ============ ICP TABBED REPORT VIEWER ============ */
.icp-tabs {
  display: flex;
  gap: 0.625rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
  justify-content: center;
}

.icp-tab {
  background: transparent;
  border: 1px solid var(--ink-faint-light);
  color: var(--ink-soft-light);
  padding: 0.625rem 1.25rem;
  border-radius: 100px;
  font-size: 0.8125rem;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: all 200ms var(--ease-soft);
  font-family: var(--font-body);
  font-weight: 500;
  white-space: nowrap;
}

.icp-tab:hover {
  color: var(--ink-light);
  border-color: var(--ink-light);
}

.icp-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink-light);
}

.icp-panel { display: none; }
.icp-panel.active { display: block; }

/* Static variant - rows always visible (for science page batch viewer) */
.icp-card.static .icp-row {
  opacity: 1;
  transform: none;
}
.icp-card.static .icp-row::before { display: none; }

/* ============ FORMS ============ */
.form { display: grid; gap: 1.25rem; max-width: 540px; }

.field { display: grid; gap: 0.5rem; }

.field label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft-dark);
}

.sec-dark .field label, .sec-void .field label { color: var(--ink-soft-light); }

.field input, .field textarea, .field select {
  width: 100%;
  padding: 0.875rem 1rem;
  background: transparent;
  border: 1px solid var(--ink-faint-dark);
  border-radius: 4px;
  font-size: 1rem;
  font-family: var(--font-body);
  color: var(--ink-dark);
  transition: border-color var(--t-fast) var(--ease-soft);
}

.sec-dark .field input, .sec-dark .field textarea, .sec-dark .field select,
.sec-void .field input, .sec-void .field textarea, .sec-void .field select {
  border-color: var(--ink-faint-light);
  color: var(--ink-light);
}

.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--accent);
}

.field-inline {
  display: flex;
  gap: 0.625rem;
  width: 100%;
  max-width: 540px;
}

.field-inline input {
  flex: 1;
  padding: 0.875rem 1.125rem;
  background: transparent;
  border: 1px solid var(--ink-faint-dark);
  border-radius: 100px;
  font-size: 1rem;
  font-family: var(--font-body);
  color: var(--ink-dark);
  transition: border-color var(--t-fast) var(--ease-soft);
}

.sec-dark .field-inline input, .sec-void .field-inline input {
  border-color: var(--ink-faint-light);
  color: var(--ink-light);
}

.field-inline input::placeholder { color: var(--ink-mute-dark); }
.sec-dark .field-inline input::placeholder, .sec-void .field-inline input::placeholder { color: var(--ink-mute-light); }

.field-inline input:focus { outline: none; border-color: var(--accent); }

/* ============ DIVIDER WITH NUMBER ============ */
.divider-num {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--ink-mute-dark);
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 2rem;
}

.divider-num::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ink-faint-dark);
}

.sec-dark .divider-num, .sec-void .divider-num { color: var(--ink-mute-light); }
.sec-dark .divider-num::after, .sec-void .divider-num::after { background: var(--ink-faint-light); }

/* ============ CINEMATIC MOMENT (full-bleed image reveal) ============ */
.cinematic-moment {
  position: relative;
  background: var(--bg-void);
  padding: clamp(3rem, 8vw, 8rem) var(--pad-x);
  overflow: hidden;
}

.cinematic-moment .moment-image {
  width: 100%;
  max-width: 1480px;
  display: block;
  margin: 0 auto;
  border-radius: 6px;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 1400ms var(--ease-cinematic), transform 1400ms var(--ease-cinematic);
}

/* Video shares moment-image sizing, plus background for letterbox edges while loading */
.cinematic-moment .moment-video {
  background: var(--bg-void);
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

.cinematic-moment.in .moment-image {
  opacity: 1;
  transform: scale(1);
}

.cinematic-moment .moment-caption {
  max-width: 600px;
  margin: 2.5rem auto 0;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1000ms var(--ease-cinematic) 400ms, transform 1000ms var(--ease-cinematic) 400ms;
}

.cinematic-moment.in .moment-caption {
  opacity: 1;
  transform: translateY(0);
}

/* ============ MASS COMPARISON ============ */
.mass-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: end;
  max-width: 720px;
  margin: 0 auto;
}

.mass-compare svg {
  width: 100%;
  height: auto;
  max-height: 360px;
}

.mass-compare .compare-label {
  text-align: center;
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute-light);
}

/* ============ FOOTER ============ */
.footer {
  padding: 4rem var(--pad-x) 2.5rem;
  background: var(--bg-void);
  color: var(--ink-soft-light);
}

.footer-inner { max-width: var(--max-w); margin: 0 auto; }

.footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--ink-faint-light);
  margin-bottom: 2rem;
}

@media (min-width: 700px) {
  .footer-top { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--ink-light);
  font-family: var(--font-display);
  font-size: 1.125rem;
}

.footer-brand img { width: 32px; height: 32px; border-radius: 50%; }

.footer-tag {
  font-size: 0.875rem;
  margin-top: 0.75rem;
  max-width: 24ch;
  color: var(--ink-mute-light);
}

.footer-col-title {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-light);
  margin-bottom: 1rem;
}

.footer-col ul { list-style: none; display: grid; gap: 0.625rem; }

.footer-col a {
  font-size: 0.875rem;
  color: var(--ink-soft-light);
  transition: color var(--t-fast) var(--ease-soft);
}

.footer-col a:hover { color: var(--ink-light); }

.footer-bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.75rem;
  color: var(--ink-mute-light);
}

.footer-bot a {
  color: var(--ink-mute-light);
  text-decoration: none;
  transition: color 160ms ease;
}

.footer-bot a:hover {
  color: var(--ink-light);
}

/* ============ UTILITIES ============ */
.text-center { text-align: center; }
.uppercase { text-transform: uppercase; letter-spacing: 0.06em; }
.accent { color: var(--accent); }
.muted { opacity: 0.7; }
.no-wrap { white-space: nowrap; }

/* ============ MOBILE ============ */
@media (max-width: 720px) {
  .nav { padding: 0.875rem 1.25rem; }
  .nav-links { gap: 1.25rem; }
  .nav-link.hide-sm { display: none; }
  .nav-toggle { display: block; order: 2; margin-left: auto; margin-right: 1rem; }
  .nav-links { order: 3; }
  .nav-mobile { display: flex; }
  body.nav-open { overflow: hidden; }
  .section { padding: 5rem 1.5rem; }
  .section-hero, .statement { padding: 1.5rem; }
  .field-inline { flex-direction: column; }
  .field-inline button { width: 100%; }
  .mass-compare { gap: 2rem; }
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .reveal-words .word { opacity: 1; transform: none; filter: drop-shadow(0 0 6px rgba(255,255,255,0.06)); }
  .icp-row { opacity: 1; transform: none; }
}

/* ============================================================
   BATCH ARCHIVE (v18)
   Card-based verification record display
   ============================================================ */

/* Filter count badge — appears on archive filter tabs */
.icp-tab .filter-count {
  display: inline-block;
  margin-left: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  opacity: 0.55;
  font-weight: 500;
}
.icp-tab.active .filter-count {
  opacity: 0.225;
}

/* Inline link inside body copy */
.inline-link {
  color: var(--accent);
  border-bottom: 1px solid currentColor;
  transition: opacity var(--t-fast) var(--ease-soft);
}
.inline-link:hover { opacity: 0.75; }

/* ---------- Batch grid ---------- */
.batch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

@media (max-width: 720px) {
  .batch-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

/* ---------- Batch card ---------- */
.batch-card {
  background: var(--bg-dark-elev);
  border: 1px solid var(--ink-faint-light);
  border-radius: 8px;
  padding: 1.5rem 1.5rem 1.25rem;
  color: var(--ink-light);
  position: relative;
  overflow: hidden;
  transition: border-color var(--t-fast) var(--ease-soft),
              transform var(--t-fast) var(--ease-soft);
}

.batch-card:hover {
  border-color: rgba(245, 242, 236, 0.20);
}

.batch-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: 1.125rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--ink-faint-light);
}

.batch-id .batch-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute-light);
  margin-bottom: 0.25rem;
}

.batch-id .batch-value {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-light);
}

.batch-status {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border-radius: 100px;
  border: 1px solid;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}

.batch-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.batch-status.status-accepted {
  background: rgba(111, 170, 99, 0.10);
  color: var(--signal-clean);
  border-color: rgba(111, 170, 99, 0.32);
}

.batch-status.status-pending {
  background: rgba(217, 124, 32, 0.10);
  color: var(--accent);
  border-color: rgba(217, 124, 32, 0.32);
}

.batch-status.status-pending .batch-status-dot {
  animation: batch-pulse 2s ease-in-out infinite;
}

@keyframes batch-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

.batch-status.status-hold {
  background: rgba(229, 91, 60, 0.12);
  color: #E55B3C;
  border-color: rgba(229, 91, 60, 0.32);
}

/* ---------- Field grid ---------- */
.batch-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.batch-field { margin: 0; }
.batch-field.batch-field-wide { grid-column: 1 / -1; }

.batch-field dt {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute-light);
  margin: 0 0 0.25rem;
}

.batch-field dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-light);
  letter-spacing: 0.005em;
}

.batch-field dd.is-product {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: -0.005em;
}

@media (max-width: 720px) {
  .batch-fields { grid-template-columns: 1fr; gap: 0.875rem; }
}

/* ---------- Measurements block ---------- */
.batch-measurements {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding: 1rem 0.75rem;
  border: 1px solid var(--ink-faint-light);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.18);
}

.batch-measurement { text-align: center; }

.measurement-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute-light);
  margin-bottom: 0.3125rem;
}

.measurement-value {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-light);
}

.measurement-value.variance-positive { color: var(--signal-clean); }
.measurement-value.variance-negative { color: var(--accent); }

/* ---------- Callouts ---------- */
.batch-callout {
  margin-top: 1.125rem;
  padding: 0.875rem 1rem;
  border-left: 2px solid var(--accent);
  background: rgba(217, 124, 32, 0.05);
  border-radius: 0 4px 4px 0;
}

.batch-callout-hold {
  border-left-color: #E55B3C;
  background: rgba(229, 91, 60, 0.06);
}

.batch-callout-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft-light);
  margin-bottom: 0.25rem;
}

.batch-callout p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-light);
}

/* ---------- Card foot ---------- */
.batch-card-foot {
  margin-top: 1.375rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ink-faint-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.batch-card-foot .btn-text {
  font-size: 0.8125rem;
  color: var(--ink-light);
}

.batch-card-foot .btn-text:hover { color: var(--accent); }

.batch-meta {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--ink-mute-light);
  letter-spacing: 0.04em;
}

/* ---------- States ---------- */
.archive-state {
  text-align: center;
  padding: 4rem 1.5rem;
  border: 1px dashed var(--ink-faint-light);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.01);
}

.archive-state-loading {
  border-style: solid;
  border-color: var(--ink-faint-light);
}

.archive-spinner {
  display: inline-block;
  width: 32px;
  height: 32px;
  border: 1.5px dashed var(--ink-mute-light);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: archive-spin 1.4s linear infinite;
}

@keyframes archive-spin {
  to { transform: rotate(360deg); }
}

/* ---------- Legend ---------- */
.archive-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  justify-content: center;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--ink-faint-light);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-soft-light);
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.legend-dot.legend-accepted { background: var(--signal-clean); }
.legend-dot.legend-pending  { background: var(--accent); }
.legend-dot.legend-hold     { background: #E55B3C; }

/* ============ ARCHIVE TEASER ON HOMEPAGE ============ */
.archive-teaser {
  border: 1px solid var(--ink-faint-light);
  border-radius: 8px;
  padding: 2.5rem;
  background: rgba(20, 20, 22, 0.4);
  display: grid;
  gap: 1.5rem;
  align-items: center;
  grid-template-columns: 1fr;
  margin-top: 3rem;
}

@media (min-width: 760px) {
  .archive-teaser {
    grid-template-columns: 1fr auto;
    gap: 2rem;
    padding: 3rem 3rem 2.75rem;
  }
}

.archive-teaser-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.875rem;
}

.archive-teaser h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 0.875rem;
  color: var(--ink-light);
}

.archive-teaser p {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft-light);
  margin: 0;
  max-width: 52ch;
}

/* ============================================================
   QR SCAN LANDING EXPERIENCE
   /science?batch=X banner + /archive?batch=X card highlight
   ============================================================ */

/* Banner appears at top of /science when ?batch= present */
.batch-scan-banner {
  position: sticky;
  top: 0;
  z-index: 95;
  background: linear-gradient(135deg, rgba(217, 124, 32, 0.95) 0%, rgba(184, 101, 24, 0.95) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--ink-light);
  border-bottom: 1px solid rgba(245, 242, 236, 0.18);
  padding: 0.875rem var(--pad-x);
  animation: scan-slide-down 600ms var(--ease-cinematic) 200ms backwards;
  margin-top: 64px; /* sit below the fixed nav */
}

.batch-scan-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.batch-scan-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(245, 242, 236, 0.16);
  border-radius: 6px;
  color: var(--ink-light);
}

.batch-scan-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.batch-scan-label {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 242, 236, 0.78);
}

.batch-scan-id {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-light);
  margin-top: 0.125rem;
}

.batch-scan-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(245, 242, 236, 0.12);
  border: 1px solid rgba(245, 242, 236, 0.30);
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-light);
  transition: background var(--t-fast) var(--ease-soft),
              transform var(--t-fast) var(--ease-soft);
}

.batch-scan-cta:hover {
  background: rgba(245, 242, 236, 0.22);
  transform: translateX(2px);
}

@keyframes scan-slide-down {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
  .batch-scan-inner { gap: 0.75rem; }
  .batch-scan-cta { width: 100%; justify-content: center; }
}

/* Highlight animation for a deep-linked batch card on /archive */
.batch-card-highlighted {
  animation: card-pulse 4s var(--ease-cinematic);
  border-color: var(--accent) !important;
}

@keyframes card-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(217, 124, 32, 0.55),
                0 0 0 0 rgba(217, 124, 32, 0.32);
  }
  20% {
    box-shadow: 0 0 0 12px rgba(217, 124, 32, 0),
                0 0 24px 8px rgba(217, 124, 32, 0.45);
  }
  60% {
    box-shadow: 0 0 0 0 rgba(217, 124, 32, 0),
                0 0 24px 8px rgba(217, 124, 32, 0.32);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(217, 124, 32, 0),
                0 0 0 0 rgba(217, 124, 32, 0);
  }
}

/* Notice shown when ?batch= refers to an unreleased batch */
.batch-deeplink-notice {
  background: var(--bg-dark-elev);
  border: 1px solid var(--ink-faint-light);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}

/* ============================================================
   CALCULATOR (v1)
   Switching calculator with audit-layer math display
   ============================================================ */

/* ---------- Disclosure panel (data sources) ---------- */
.calc-disclosure {
  background: var(--bg-dark-elev);
  border: 1px solid var(--ink-faint-light);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 2rem 2.25rem 2.25rem;
}

@media (max-width: 640px) {
  .calc-disclosure { padding: 1.5rem 1.5rem 1.75rem; }
}

.calc-disclosure-head {
  margin-bottom: 2rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--ink-faint-light);
}

.calc-disclosure-body p {
  color: var(--ink-soft-light);
  font-size: 0.9375rem;
  line-height: 1.65;
  margin: 0 0 1rem;
}

.calc-disclosure-body p:last-child { margin-bottom: 0; }

.calc-disclosure-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.calc-disclosure-list li {
  position: relative;
  padding-left: 1.25rem;
  color: var(--ink-light);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.calc-disclosure-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 1px;
  background: var(--accent);
}

.calc-disclosure-list strong {
  color: var(--ink-light);
  font-weight: 500;
}

/* ---------- Mode toggle ---------- */
.calc-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 2.5rem;
  border: 1px solid var(--ink-faint-light);
  border-radius: 6px;
  overflow: hidden;
}

@media (max-width: 720px) {
  .calc-modes { grid-template-columns: 1fr; }
}

.calc-mode {
  background: transparent;
  border: none;
  padding: 1.5rem 1.75rem;
  text-align: left;
  cursor: pointer;
  color: var(--ink-soft-light);
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: background var(--t-fast) var(--ease-soft),
              color var(--t-fast) var(--ease-soft);
  font-family: inherit;
}

.calc-mode + .calc-mode {
  border-left: 1px solid var(--ink-faint-light);
}

@media (max-width: 720px) {
  .calc-mode + .calc-mode {
    border-left: none;
    border-top: 1px solid var(--ink-faint-light);
  }
}

.calc-mode:hover {
  background: rgba(217, 124, 32, 0.05);
  color: var(--ink-light);
}

.calc-mode.active {
  background: rgba(217, 124, 32, 0.08);
  color: var(--ink-light);
}

.calc-mode-num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.06em;
}

.calc-mode-label {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.3;
}

/* ---------- Input pane ---------- */
.calc-input-pane {
  margin-top: 2.5rem;
  padding: 2rem 2.25rem 2.25rem;
  background: var(--bg-dark-elev);
  border: 1px solid var(--ink-faint-light);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (max-width: 640px) {
  .calc-input-pane { padding: 1.5rem 1.5rem 1.75rem; }
}

.calc-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

@media (max-width: 560px) {
  .calc-field-row { grid-template-columns: 1fr; }
}

.calc-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.calc-label {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute-light);
}

.calc-input {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--ink-faint-light);
  border-radius: 4px;
  padding: 0.75rem 0.875rem;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  color: var(--ink-light);
  transition: border-color var(--t-fast) var(--ease-soft);
}

.calc-input:focus {
  outline: none;
  border-color: var(--accent);
}

select.calc-input {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23A8A4A0' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.calc-submit {
  align-self: flex-start;
  margin-top: 0.5rem;
}

/* ---------- Output ---------- */
.calc-output {
  margin-top: 3.5rem;
  scroll-margin-top: 80px;
}

.calc-output-head {
  margin-bottom: 2.5rem;
}

.calc-result-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 2rem;
}

@media (max-width: 720px) {
  .calc-result-grid { grid-template-columns: 1fr; }
}

.calc-result-card {
  background: var(--bg-dark-elev);
  border: 1px solid var(--ink-faint-light);
  border-radius: 6px;
  padding: 1.75rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.calc-result-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
}

.calc-result-label {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute-light);
  margin: 0 0 0.875rem;
}

.calc-result-value {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 5vw, 2.75rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--accent);
  margin: 0 0 0.5rem;
}

.calc-result-sub {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--ink-soft-light);
  margin: 0;
  letter-spacing: -0.005em;
}

/* ---------- Show the math expandable ---------- */
.calc-math {
  background: var(--bg-dark-elev);
  border: 1px solid var(--ink-faint-light);
  border-radius: 6px;
  margin-bottom: 2.5rem;
  overflow: hidden;
}

.calc-math summary {
  cursor: pointer;
  padding: 1.25rem 1.75rem;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-light);
  transition: background var(--t-fast) var(--ease-soft);
}

.calc-math summary::-webkit-details-marker { display: none; }

.calc-math summary:hover { background: rgba(217, 124, 32, 0.05); }

.calc-math-summary-icon {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--accent);
  transition: transform var(--t-fast) var(--ease-soft);
}

.calc-math[open] .calc-math-summary-icon {
  transform: rotate(45deg);
}

.calc-math-body {
  padding: 0.5rem 1.75rem 2rem;
  border-top: 1px solid var(--ink-faint-light);
}

.calc-math-step {
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(245, 242, 236, 0.04);
}

.calc-math-step:last-child { border-bottom: none; }

.calc-math-step-label {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.75rem;
}

.calc-math-prose {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-light);
  margin: 0 0 0.875rem;
}

.calc-math-formula {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ink-light);
  background: rgba(0, 0, 0, 0.25);
  border-left: 2px solid var(--accent);
  border-radius: 0 4px 4px 0;
  padding: 0.875rem 1rem;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

.calc-math-cite {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--ink-mute-light);
  margin: 0.625rem 0 0;
  letter-spacing: 0.02em;
}

.calc-math-note {
  background: rgba(217, 124, 32, 0.04);
  border-left: 2px solid var(--accent);
  border-bottom: none;
  padding: 1.25rem 1.25rem;
  border-radius: 0 4px 4px 0;
  margin-top: 1rem;
}

.calc-math-note .calc-math-step-label {
  color: var(--accent);
}

/* ---------- CTA block ---------- */
.calc-cta-block {
  text-align: center;
  padding: 2.5rem 1rem;
  border: 1px dashed var(--ink-faint-light);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.01);
}

/* ---------- Methodology / sources section ---------- */
.calc-sources {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.calc-source-row {
  display: grid;
  grid-template-columns: minmax(0, 280px) 1fr;
  gap: 2rem;
  padding: 1.5rem 1.75rem;
  background: var(--bg-cream);
  border: 1px solid var(--ink-faint-dark);
  border-radius: 6px;
  align-items: start;
}

@media (max-width: 720px) {
  .calc-source-row {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
  }
}

.calc-source-bioforge {
  background: var(--bg-void);
  border-color: var(--accent);
}

.calc-source-bioforge .calc-source-label,
.calc-source-bioforge .calc-source-value,
.calc-source-bioforge .body-md {
  color: var(--ink-light);
}

.calc-source-bioforge .calc-source-cite {
  color: var(--ink-soft-light);
}

.calc-source-system {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.calc-source-label {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute-dark);
}

.calc-source-value {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-dark);
  letter-spacing: 0.005em;
}

.calc-source-derivation .body-md {
  color: var(--ink-dark);
  margin: 0 0 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.calc-source-cite {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--ink-mute-dark);
  margin: 0;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

/* ============================================================
   STARTER KIT FEATURE SECTION
   Premium product showcase with hero render + spec list + price
   ============================================================ */

.kit-feature {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.kit-feature-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 4rem;
  margin-top: 3rem;
  align-items: center;
}

@media (max-width: 960px) {
  .kit-feature-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

.kit-feature-image {
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4),
              0 0 60px rgba(217, 124, 32, 0.08);
}

.kit-feature-image::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(217, 124, 32, 0.15);
  border-radius: 8px;
  pointer-events: none;
}

.kit-feature-eyebrow {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

.kit-feature-list {
  list-style: none;
  padding: 0;
  margin: 2.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.kit-feature-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: baseline;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-light);
  padding-bottom: 0.875rem;
  border-bottom: 1px solid rgba(245, 242, 236, 0.06);
}

.kit-feature-list li:last-child { border-bottom: none; padding-bottom: 0; }

.kit-feature-list-num {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.06em;
}

.kit-feature-price {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--ink-faint-light);
  border-bottom: 1px solid var(--ink-faint-light);
  margin-bottom: 2rem;
}

.kit-feature-price-amount {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.5rem, 5vw, 3.25rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--accent);
}

.kit-feature-price-meta {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute-light);
}

.kit-feature-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
}

@media (max-width: 560px) {
  .kit-feature-cta .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* ============================================================
   CALCULATOR — additional cost detail strip
   Shows stock duration + starter kit price under the result cards
   ============================================================ */

.calc-cost-strip {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 2rem;
  padding: 1.25rem 1.5rem;
  background: var(--bg-dark-elev);
  border: 1px solid var(--ink-faint-light);
  border-radius: 6px;
}

.calc-cost-row {
  display: grid;
  grid-template-columns: 11rem 5rem 1fr;
  gap: 1rem;
  align-items: baseline;
}

@media (max-width: 640px) {
  .calc-cost-row {
    grid-template-columns: 1fr;
    gap: 0.25rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(245, 242, 236, 0.04);
  }
  .calc-cost-row:last-child { border-bottom: none; }
}

.calc-cost-label {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute-light);
}

.calc-cost-value {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--accent);
}

.calc-cost-sub {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--ink-soft-light);
  line-height: 1.4;
}

/* ============================================================
   /KIT — Dedicated Starter Kit page
   ============================================================ */

.kit-page-hero {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.kit-page-grid {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: 4rem;
  align-items: center;
}

@media (max-width: 960px) {
  .kit-page-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

.kit-page-image {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45),
              0 0 60px rgba(217, 124, 32, 0.08);
}

.kit-page-image img {
  width: 100%;
  display: block;
}

.kit-page-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--ink-faint-light);
  border-bottom: 1px solid var(--ink-faint-light);
}

@media (max-width: 560px) {
  .kit-page-pillars { grid-template-columns: 1fr; gap: 0.625rem; }
}

.kit-page-pillar {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.kit-page-pillar-num {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.kit-page-pillar-label {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-light);
}

/* Contents list — six-item grid */
.kit-page-contents {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 2.5rem;
  margin-top: 3.5rem;
}

@media (max-width: 720px) {
  .kit-page-contents { grid-template-columns: 1fr; gap: 1.75rem; }
}

.kit-page-content-item {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1.25rem;
  align-items: start;
}

.kit-page-content-num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent);
  padding-top: 0.4rem;
  border-top: 1px solid var(--accent);
  width: 2.5rem;
}

.kit-page-content-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  margin: 0 0 0.625rem;
  color: var(--ink-light);
}

.kit-page-content-text {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-soft-light);
  margin: 0;
}

/* Refill grid */
.kit-page-refill-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 3rem;
}

@media (max-width: 720px) {
  .kit-page-refill-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .kit-page-refill-grid { grid-template-columns: 1fr; }
}

.kit-page-refill-card {
  background: var(--bg-dark-elev);
  border: 1px solid var(--ink-faint-light);
  border-radius: 6px;
  padding: 1.5rem 1.25rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.kit-page-refill-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
}

.kit-page-refill-eyebrow {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute-light);
  margin: 0 0 0.875rem;
}

.kit-page-refill-price {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 2rem;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--accent);
  margin: 0 0 0.5rem;
}

.kit-page-refill-meta {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--ink-soft-light);
  margin: 0;
  line-height: 1.4;
}

/* ============================================================
   BLOG ARTICLE
   Editorial layout — accessible at top, depth available below
   Two-speed reading: scannable lede, optional deep chemistry
   ============================================================ */

.blog-article {
  background: var(--bg-void);
}

.blog-header {
  padding-top: 6rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--ink-faint-light);
}

.blog-eyebrow {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

.blog-meta {
  margin-top: 2.5rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--ink-mute-light);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.blog-meta-divider {
  color: var(--ink-faint-light);
}

.blog-body {
  padding-top: 3rem;
  padding-bottom: 6rem;
}

.blog-lede {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.375rem;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--ink-light);
  margin: 0 0 2rem;
}

.blog-body p {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink-soft-light);
  margin: 0 0 1.5rem;
  max-width: 64ch;
}

.blog-body p a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: opacity 0.2s ease;
}

.blog-body p a:hover {
  opacity: 0.75;
}

.blog-body strong {
  color: var(--ink-light);
  font-weight: 600;
}

.blog-body em {
  font-style: italic;
  color: var(--ink-light);
}

.blog-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.625rem, 3vw, 2rem);
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink-light);
  margin: 3.5rem 0 1.5rem;
  max-width: 24ch;
}

.blog-h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ink-light);
  margin: 2.5rem 0 1rem;
}

.blog-ordered {
  margin: 1.5rem 0 2rem;
  padding-left: 0;
  list-style: none;
  counter-reset: blog-step;
}

.blog-ordered li {
  counter-increment: blog-step;
  position: relative;
  padding-left: 3rem;
  margin-bottom: 1.25rem;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-soft-light);
  max-width: 64ch;
}

.blog-ordered li::before {
  content: counter(blog-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.06em;
}

.blog-list {
  margin: 1.5rem 0 2rem;
  padding-left: 1.25rem;
  list-style: none;
  max-width: 64ch;
}

.blog-list li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 0.75rem;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-soft-light);
}

.blog-list li::before {
  content: '—';
  position: absolute;
  left: -1rem;
  color: var(--accent);
  font-weight: 600;
}

.blog-protocol {
  margin: 2rem 0 2.5rem;
  border-top: 1px solid var(--ink-faint-light);
  border-bottom: 1px solid var(--ink-faint-light);
  max-width: 56ch;
}

.blog-protocol-row {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1.5rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(245, 242, 236, 0.04);
  align-items: baseline;
}

.blog-protocol-row:last-child { border-bottom: none; }

.blog-protocol-day {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.blog-protocol-detail {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink-light);
  line-height: 1.5;
}

.blog-divider {
  border: none;
  border-top: 1px solid var(--ink-faint-light);
  margin: 4rem auto;
  max-width: 60ch;
}

.blog-section-intro {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ink-mute-light);
  margin: 0 0 3rem;
  max-width: 60ch;
}

.blog-cta-block {
  margin: 3rem 0;
  padding: 2.5rem;
  background: var(--bg-dark-elev);
  border: 1px solid var(--ink-faint-light);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  max-width: 64ch;
}

.blog-cta-block::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
}

.blog-cta-eyebrow {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.75rem;
}

.blog-cta-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: -0.015em;
  color: var(--ink-light);
  margin: 0 0 0.875rem;
}

.blog-cta-body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft-light);
  margin: 0 0 1.5rem;
  max-width: 52ch;
}

.blog-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
}

.blog-cta-final {
  margin-top: 4rem;
}

.blog-faq {
  margin: 2rem 0 2.5rem;
}

.blog-faq-item {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--ink-faint-light);
}

.blog-faq-item:last-child { border-bottom: none; }

.blog-faq-q {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.0625rem;
  letter-spacing: -0.005em;
  color: var(--ink-light);
  margin: 0 0 0.75rem;
}

.blog-faq-a {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-soft-light);
  margin: 0;
  max-width: 64ch;
}

.blog-sources {
  margin: 2rem 0 2.5rem;
}

.blog-source-item {
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(245, 242, 236, 0.04);
}

.blog-source-item:last-child { border-bottom: none; }

.blog-source-author {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-mute-light);
  margin: 0 0 0.375rem;
  text-transform: uppercase;
}

.blog-source-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: -0.005em;
  color: var(--ink-light);
  margin: 0 0 0.375rem;
}

.blog-source-title a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.blog-source-title a:hover { color: var(--accent); }

.blog-source-meta {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--ink-mute-light);
  margin: 0;
  font-style: italic;
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .blog-lede { font-size: 1.1875rem; }
  .blog-body p { font-size: 1rem; }
  .blog-h2 { margin: 2.5rem 0 1rem; }
  .blog-h3 { margin: 2rem 0 0.875rem; }
  .blog-protocol-row { grid-template-columns: 6.5rem 1fr; gap: 1rem; }
  .blog-cta-block { padding: 2rem 1.5rem; }
  .blog-cta-row .btn { width: 100%; justify-content: center; text-align: center; }
}

/* ============================================================
   BLOG INDEX PAGE
   List of all posts
   ============================================================ */

.blog-index-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 3rem;
}

.blog-index-card {
  display: block;
  padding: 2.5rem 0;
  border-top: 1px solid var(--ink-faint-light);
  text-decoration: none;
  transition: transform 0.3s ease, padding 0.3s ease;
}

.blog-index-card:last-child {
  border-bottom: 1px solid var(--ink-faint-light);
}

.blog-index-card:hover {
  transform: translateX(4px);
}

.blog-index-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1rem;
}

.blog-index-eyebrow {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.blog-index-date {
  font-size: 0.75rem;
  color: var(--ink-mute-light);
  letter-spacing: 0.06em;
}

.blog-index-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink-light);
  margin: 0 0 1rem;
  max-width: 28ch;
}

.blog-index-excerpt {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-soft-light);
  margin: 0 0 1.25rem;
  max-width: 60ch;
}

.blog-index-readmore {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.blog-index-coming-soon {
  margin-top: 3rem;
  padding: 2rem;
  background: var(--bg-dark-elev);
  border: 1px solid var(--ink-faint-light);
  border-radius: 6px;
  border-left: 2px solid var(--accent);
}

.blog-index-coming-soon-text {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ink-soft-light);
  margin: 0.75rem 0 0;
  max-width: 60ch;
}

.blog-index-coming-soon-text a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================
   BLOG — additions for the casual reader
   Hero image + TL;DR box + small button variant
   ============================================================ */

.blog-hero-image {
  padding-top: 2.5rem;
  padding-bottom: 0;
}

.blog-hero-image img {
  width: 100%;
  display: block;
  border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4),
              0 0 60px rgba(217, 124, 32, 0.06);
}

.blog-tldr {
  margin: 2.5rem 0 2rem;
  padding: 1.75rem 2rem;
  background: var(--bg-dark-elev);
  border: 1px solid var(--ink-faint-light);
  border-left: 2px solid var(--accent);
  border-radius: 6px;
  max-width: 64ch;
}

.blog-tldr-label {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1rem;
}

.blog-tldr-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.blog-tldr-list li {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-light);
  padding: 0.5rem 0 0.5rem 1.5rem;
  position: relative;
  border-bottom: 1px solid rgba(245, 242, 236, 0.04);
}

.blog-tldr-list li:last-child {
  border-bottom: none;
}

.blog-tldr-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  top: 0.5rem;
  color: var(--accent);
  font-weight: 600;
}

.blog-tldr-list a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.blog-tldr-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
}

@media (max-width: 560px) {
  .blog-tldr { padding: 1.5rem 1.25rem; }
  .blog-tldr-cta .btn { width: 100%; justify-content: center; text-align: center; }
}

/* ============================================================
   BLOG — Education additions
   Comparison table, math detail, common mistakes
   ============================================================ */

/* Comparison table */
.blog-table-wrap {
  margin: 2rem 0 1rem;
  overflow-x: auto;
  border: 1px solid var(--ink-faint-light);
  border-radius: 6px;
  background: var(--bg-dark-elev);
}

.blog-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--ink-light);
  min-width: 540px;
}

.blog-table thead th {
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--ink-faint-light);
  vertical-align: bottom;
  background: rgba(0, 0, 0, 0.15);
}

.blog-table-sub {
  display: block;
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--ink-mute-light);
  text-transform: none;
  margin-top: 0.25rem;
}

.blog-table tbody td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(245, 242, 236, 0.04);
  vertical-align: middle;
  line-height: 1.4;
}

.blog-table tbody tr:last-child td { border-bottom: none; }

.blog-table tbody tr:first-child td {
  background: rgba(217, 124, 32, 0.04);
}

.blog-table .mono { font-size: 0.9375rem; font-weight: 500; }

.blog-table-pos {
  color: var(--ink-light);
  font-size: 0.875rem;
}

.blog-table-neg {
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 500;
}

.blog-table-muted td { color: var(--ink-mute-light); font-style: italic; }
.blog-table-muted td.mono { font-style: normal; }

.blog-table td a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-size: 0.8125rem;
}

.blog-caption {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-mute-light);
  margin: 0 0 2rem;
  max-width: 60ch;
}

.blog-caption a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Math detail (show your work) */
.blog-math-detail {
  margin: 1.5rem 0 2.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--bg-dark-elev);
  border: 1px solid var(--ink-faint-light);
  border-left: 2px solid var(--accent);
  border-radius: 4px;
  max-width: 64ch;
}

.blog-math-detail summary {
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  user-select: none;
  list-style: none;
}

.blog-math-detail summary::-webkit-details-marker { display: none; }
.blog-math-detail summary::before {
  content: '+';
  display: inline-block;
  margin-right: 0.625rem;
  font-weight: 700;
  transition: transform 0.2s ease;
}

.blog-math-detail[open] summary::before { content: '−'; }

.blog-math-body {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ink-faint-light);
}

.blog-math-body p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-soft-light);
  margin: 0 0 1rem;
}

.blog-math-eq {
  font-family: var(--font-mono) !important;
  font-size: 0.875rem !important;
  background: rgba(0, 0, 0, 0.25);
  padding: 0.875rem 1rem !important;
  border-radius: 4px;
  border-left: 2px solid var(--accent);
  margin: 0.75rem 0 1.25rem !important;
  color: var(--ink-light) !important;
  overflow-x: auto;
  line-height: 1.6 !important;
}

.blog-math-eq strong {
  color: var(--accent);
  font-weight: 600;
}

/* Common mistakes section */
.blog-mistakes {
  margin: 2rem 0 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.blog-mistake {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 1.5rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--ink-faint-light);
  align-items: start;
}

.blog-mistake:first-child { padding-top: 0; }
.blog-mistake:last-child { border-bottom: none; padding-bottom: 0; }

.blog-mistake-num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent);
  padding-top: 0.5rem;
  border-top: 1px solid var(--accent);
  width: 2.5rem;
}

.blog-mistake-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ink-light);
  margin: 0 0 0.75rem;
}

.blog-mistake-body p {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-soft-light);
  margin: 0;
  max-width: 60ch;
}

.blog-mistake-body p a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .blog-mistake {
    grid-template-columns: 2.5rem 1fr;
    gap: 1rem;
    padding: 1.5rem 0;
  }
  .blog-mistake-num { font-size: 0.6875rem; width: 2rem; }
  .blog-math-detail { padding: 1rem 1.25rem; }
  .blog-math-eq { font-size: 0.75rem !important; }
}

/* ============================================================
   THE FORMULATION — Homepage section
   Left: copy + leader statement
   Right: ingredient breakdown panel
   ============================================================ */

.formulation-feature {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.formulation-headline {
  max-width: 22ch;
  margin: 0;
}

.formulation-grid {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: 4rem;
  margin-top: 3rem;
  align-items: start;
}

@media (max-width: 960px) {
  .formulation-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 2.5rem;
  }
  /* Show the ingredient panel BEFORE the explanatory text on mobile.
     Visual hook leads, narrative explains what you just saw. */
  .formulation-ingredients { order: 1; }
  .formulation-body { order: 2; }
}

.formulation-body {
  padding-top: 0;
}

.formulation-cta {
  margin-top: 2rem;
}

/* Right-side ingredient panel */
.formulation-ingredients {
  background: var(--bg-dark-elev);
  border: 1px solid var(--ink-faint-light);
  border-radius: 6px;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}

.formulation-ingredients::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
}

.formulation-eyebrow {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.5rem;
}

.formulation-list {
  display: flex;
  flex-direction: column;
}

.formulation-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(245, 242, 236, 0.06);
  align-items: baseline;
}

.formulation-row:last-child { border-bottom: none; }

.formulation-amount {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--accent);
}

.formulation-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: -0.005em;
  color: var(--ink-light);
}

.formulation-role {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--ink-mute-light);
  text-transform: lowercase;
  text-align: right;
}

.formulation-footer {
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ink-faint-light);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--ink-mute-light);
}

.formulation-footer a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 560px) {
  .formulation-feature { padding-top: 4rem; padding-bottom: 4rem; }
  .formulation-ingredients { padding: 1.5rem 1.25rem; }
  .formulation-row {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    row-gap: 0.25rem;
  }
  .formulation-role { grid-column: 1; text-align: left; }
}

/* ============================================================
   /SYSTEM page — THE FORMULATION (responsive refactor)
   Headline at top full-width. Mobile: panel before text.
   ============================================================ */

.sys-formulation-headline {
  max-width: 22ch;
  margin: 3rem 0 0;
}

.sys-formulation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  margin-top: 3rem;
  align-items: start;
}

@media (max-width: 960px) {
  .sys-formulation-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 2.5rem;
  }
  /* On mobile: visual panel BEFORE the narrative text */
  .sys-formulation-panel { order: 1; }
  .sys-formulation-text { order: 2; }
}

.sys-formulation-panel {
  padding: 2rem;
  background: var(--bg-light-elev);
  border: 1px solid var(--ink-faint-dark);
  border-radius: 6px;
}

.sys-formulation-ingredients {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

@media (max-width: 480px) {
  .sys-formulation-ingredients { grid-template-columns: 1fr; gap: 1.25rem; }
}

.sys-formulation-ingredient .mono {
  color: var(--accent);
  font-size: 0.9375rem;
  margin: 0 0 0.25rem;
}

.sys-formulation-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: -0.005em;
  margin: 0 0 0.25rem;
  color: var(--ink-dark);
}

.sys-formulation-role {
  font-size: 0.75rem;
  color: var(--ink-mute-dark);
  margin: 0;
}

/* ============================================================
   /SCIENCE — Ingredient card meta grid (Supplier / Grade)
   Was hardcoded 1fr 1fr inline. Now responsive: 2-col on tablet+,
   stacks on small phones where two cramped columns become illegible.
   ============================================================ */

.ingredient-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ink-faint-dark);
}

@media (max-width: 560px) {
  .ingredient-meta {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

/* ============================================================
   THE FOUNDATION — Founder depth moment
   Editorial single-column, text-driven, no imagery.
   Sits between THE FOUNDER and THE WORKSHOP.
   ============================================================ */

.foundation-feature {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.foundation-inner {
  max-width: 920px;
  margin: 0 auto;
}

.foundation-headline {
  max-width: 22ch;
  margin: 2rem 0 0;
}

.foundation-body {
  margin-top: 2.5rem;
  border-top: 1px solid var(--ink-faint-light);
  padding-top: 2.5rem;
}

@media (max-width: 640px) {
  .foundation-feature { padding-top: 4rem; padding-bottom: 4rem; }
  .foundation-body { margin-top: 2rem; padding-top: 2rem; }
}

/* ============================================================
   /FOUNDER page — Editorial typography, no imagery
   Single-column prose layout, generous breathing room.
   ============================================================ */

.founder-prose {
  max-width: 720px;
  margin: 0 auto;
}

/* Photo block within a founder section — wider than prose, narrower than container */
.founder-photo {
  max-width: 1080px;
  margin: 4rem auto 0;
}
.founder-photo img {
  width: 100%;
  display: block;
  border-radius: 6px;
}
.founder-photo .photo-caption {
  margin-top: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-mute-light);
  text-align: center;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}
.sec-light .founder-photo .photo-caption {
  color: var(--ink-mute-dark);
}
@media (max-width: 720px) {
  .founder-photo { margin-top: 2.5rem; }
  .founder-photo .photo-caption { font-size: 0.72rem; }
}

/* Quiet inline link for the homepage FOUNDER section handoff — editorial footnote feel */
.link-quiet {
  color: inherit;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  text-decoration: none;
  opacity: 0.65;
  transition: opacity var(--t-fast) var(--ease-soft);
  font-style: italic;
  font-family: var(--font-display);
  font-weight: 400;
}
.link-quiet:hover { opacity: 1; }

.founder-systems-list {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.founder-system {
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--ink-faint-dark);
}

.founder-system:last-child { border-bottom: none; padding-bottom: 0; }
.founder-system:first-child { padding-top: 0; }

.founder-system-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ink-dark);
  margin: 0 0 0.625rem;
}

.founder-system-body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-soft-dark);
  margin: 0;
  max-width: 60ch;
}

/* When the founder-system is inside a sec-void/dark section */
.sec-void .founder-system { border-bottom-color: var(--ink-faint-light); }
.sec-void .founder-system-title { color: var(--ink-light); }
.sec-void .founder-system-body { color: var(--ink-soft-light); }

@media (max-width: 640px) {
  .founder-system { padding: 1.5rem 0; }
  .founder-system-title { font-size: 1.1875rem; }
}


/* ============================================================
THE RHYTHM — Operational embodiment section
============================================================ */

.rhythm-feature {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.rhythm-headline {
  max-width: 24ch;
  margin: 2rem 0 0;
}

.rhythm-body {
  margin-top: 2.5rem;
  border-top: 1px solid var(--ink-faint-light);
  padding-top: 2.5rem;
  max-width: 720px;
}

.rhythm-moment {
  max-width: 60ch;
  margin: 0 0 1.75rem;
}

.rhythm-moment:last-child {
  margin-bottom: 0;
}

.rhythm-time {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
  margin-right: 0.25rem;
}

@media (max-width: 640px) {
  .rhythm-feature {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .rhythm-body {
    margin-top: 2rem;
    padding-top: 2rem;
  }

  .rhythm-moment {
    margin-bottom: 1.5rem;
  }
}


/* ============================================================
v25.10 — Hero topology visibility enhancement
============================================================ */

.hero-network,
.hero-diagram,
.network-diagram,
.topology-diagram,
svg.hero-network,
svg.network-diagram {
  opacity: 0.22 !important;
  transform: scale(1.15);
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.06));
}

.hero-network line,
.hero-network path,
.hero-network circle,
.network-diagram line,
.network-diagram path,
.network-diagram circle,
.topology-diagram line,
.topology-diagram path,
.topology-diagram circle {
  stroke-width: 1.8 !important;
}

.hero-network .center-node,
.network-diagram .center-node,
.topology-diagram .center-node {
  opacity: 0.35 !important;
}