/* ==========================================================================
   BioVikas — Site Design System
   Built on brand/tokens/biovikas-tokens.css (v2.2 LOCKED).
   Never introduce a raw hex here that isn't traceable to the brand doc.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Marketing-surface tokens
   The token file targets the BioOS dashboard. The marketing site needs its own
   surface ladder: brand §3.2 mandates 60-70% white backgrounds, so the page
   base is pure white here rather than the dashboard's warm --surface-page.
   -------------------------------------------------------------------------- */
:root {
  --page:            #FFFFFF;
  --page-alt:        #F3F5F6;   /* section rhythm / banding */
  --page-sunken:     #E9EDEE;
  --ink:             #11171A;   /* Carbon Slate */
  --ink-soft:        #4E585E;
  --ink-muted:       #7B858A;
  --rule:            rgba(17, 23, 26, 0.10);
  --rule-strong:     rgba(17, 23, 26, 0.16);
  --heading:         #06784C;   /* Forest Green — headings only */
  --on-dark:         #FFFFFF;
  --deep:            #032F1E;   /* hero gradient terminus */

  /* Type scale — clamped for fluid response.

     Every font-size in this file must come from a step below. The scale
     previously stopped at --step--1 (0.82rem) while the design kept needing
     something smaller for eyebrows, pills, table captions and meta text, so
     components improvised: seventeen different hand-picked values between
     0.6rem and 0.84rem all doing the same job. --step--2 is that missing
     rung, and it exists so nobody has to guess again.

     Display sizes were also reduced ~15% from their previous maxima
     (h1 4.2rem, h2 3.0rem), which occupied more vertical space than the
     content warranted and pushed real content below the fold. */
  --step--2: clamp(0.68rem, 0.66rem + 0.10vw, 0.74rem);
  --step--1: clamp(0.82rem, 0.80rem + 0.10vw, 0.88rem);
  --step-0:  clamp(1.00rem, 0.97rem + 0.15vw, 1.06rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.32rem + 0.8vw, 1.9rem);
  --step-3:  clamp(1.9rem, 1.55rem + 1.6vw, 2.6rem);
  --step-4:  clamp(2.3rem, 1.75rem + 2.8vw, 3.6rem);

  /* Spacing */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;

  --measure: 68ch;
  --shell: 1140px;
  --radius: 3px;      /* brand v3.0 §17.2 */
  --radius-lg: 6px;
}

:root[data-theme="dark"],
html[data-theme="dark"] {
  --page:        #0E1315;
  --page-alt:    #171C1F;
  --page-sunken: #12181A;
  --ink:         #E6EAEC;
  --ink-soft:    #A3ADB2;
  --ink-muted:   #78838A;
  --rule:        rgba(255, 255, 255, 0.12);
  --rule-strong: rgba(255, 255, 255, 0.20);
  --heading:     #34C98A;
  --deep:        #0B120E;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page:        #0E1315;
    --page-alt:    #171C1F;
    --page-sunken: #12181A;
    --ink:         #E6EAEC;
    --ink-soft:    #A3ADB2;
    --ink-muted:   #78838A;
    --rule:        rgba(255, 255, 255, 0.12);
    --rule-strong: rgba(255, 255, 255, 0.20);
    --heading:     #34C98A;
    --deep:        #0B120E;
  }
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The masthead is sticky, so an anchored section would otherwise land
     underneath it. Reserving the header height means #cost-in-use, #checker
     and friends arrive with their heading actually visible. */
  scroll-padding-top: 88px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Headings default to Carbon Slate, not Forest Green. Green reads as "brand"
   in small, deliberate doses (logo, buttons, active nav, key stat figures) —
   spent on every heading on every page it stops signalling anything and just
   reads as a green site. Dark-background contexts (.hero, .section--deep,
   .cta-band) override this back to white further down; nothing there changes. */
h1, h2, h3, h4, h5 {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}
h1 { font-size: var(--step-4); font-weight: 700; letter-spacing: -0.025em; }
h2 { font-size: var(--step-3); letter-spacing: -0.02em; }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); }

p { margin: 0 0 var(--sp-4); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--link-text); text-decoration: none; }
a:hover { color: var(--link-text-hover); text-decoration: underline; }

img, svg { max-width: 100%; height: auto; }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--sp-7) 0; }

/* The precision voice — brand §4. Every number that carries meaning. */
.mono, .stat__value, .kpi__value, code, th.num, td.num {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

.eyebrow {
  /* v3.0 §6.3 — colour signals, weight reads. A mid-tone accent at regular
     weight is the first thing to disappear on a projector or a bright phone
     screen, so the label takes near-black at 600 and the accent moves into a
     solid tick. Dark grounds override .eyebrow colour further down. */
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 600;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 3px;
  background: var(--brand-green);
  flex: none;
}

:root[data-theme="dark"] .eyebrow { color: var(--ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .eyebrow { color: var(--ink); }
}

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 60ch;
}

.muted { color: var(--ink-muted); font-size: var(--step--1); }

/* Accessibility */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--btn-primary-bg); color: var(--btn-primary-text);
  padding: var(--sp-3) var(--sp-5); border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
@media (min-width: 768px) { .shell { padding-inline: var(--sp-6); } }

.section { padding-block: var(--sp-8); }
@media (min-width: 768px) { .section { padding-block: var(--sp-9); } }
.section--tight { padding-block: var(--sp-7); }
.section--alt { background: var(--page-alt); }
.section__head { max-width: var(--measure); margin-bottom: var(--sp-7); }

.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.split {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

.stack > * + * { margin-top: var(--sp-4); }
.flow > * + * { margin-top: var(--sp-5); }

/* --------------------------------------------------------------------------
   4. Buttons — brand §7.2, exactly
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 40px;
  padding-inline: var(--sp-5);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
  /* No box-shadow, ever — depth comes from the fill ladder (brand §7.2). */
}
.btn:hover { text-decoration: none; }
.btn--lg { height: 48px; padding-inline: var(--sp-6); font-size: var(--step-0); }
.btn--sm { height: 32px; padding-inline: var(--sp-4); }

.btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}
.btn--primary:hover { background: var(--btn-primary-bg-hover); color: var(--btn-primary-text); }
.btn--primary:active { background: var(--btn-primary-bg-active); }

.btn--secondary {
  border-color: var(--btn-secondary-border);
  color: var(--btn-secondary-text);
  background: transparent;
}
.btn--secondary:hover {
  background: var(--btn-secondary-bg-hover);
  color: var(--btn-secondary-text);
}
.btn--secondary:active {
  border-color: var(--btn-secondary-border-active);
  color: var(--btn-secondary-text-active);
}

/* Reverse — for use on the dark hero only */
.btn--onDark {
  background: #FFFFFF;
  color: #055F3D;
}
.btn--onDark:hover { background: #E9F1EC; color: #04492F; }
.btn--ghostDark {
  border-color: rgba(255,255,255,.45);
  color: #FFFFFF;
  background: transparent;
}
.btn--ghostDark:hover { background: rgba(255,255,255,.10); color: #FFFFFF; }

.btn[disabled], .btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }

/* Tertiary / in-context link action — never boxed (brand §7.2) */
.link-action {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 600;
  font-size: var(--step--1);
  color: var(--link-text);
  text-decoration: none;
}
.link-action:hover { text-decoration: underline; color: var(--link-text-hover); }
.link-action .arrow { transition: transform .15s ease; }
.link-action:hover .arrow { transform: translateX(3px); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

/* --------------------------------------------------------------------------
   5. Header / navigation — capped at 5 items + one access CTA
   -------------------------------------------------------------------------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--page) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rule);
}
/* backdrop-filter on a sticky bar repaints every scroll frame and janks badly
   on Android. On small screens the translucency buys little, so make the header
   solid there and drop the filter — smooth scrolling matters more. */
@media (max-width: 900px) {
  .masthead {
    background: var(--page);
    backdrop-filter: none;
  }
}
.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  height: 68px;
}
.brand { display: inline-flex; align-items: center; gap: var(--sp-3); text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand__mark { width: 44px; height: 28px; flex: none; }
.brand__name {
  font-weight: 700;
  font-size: var(--step-0);
  color: var(--heading);
  letter-spacing: -0.02em;
}

.nav { display: flex; align-items: center; gap: var(--sp-5); }
.nav__link {
  color: var(--ink);
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 500;
  padding-block: var(--sp-2);
  border-bottom: 2px solid transparent;
  white-space: nowrap;   /* "Biomass Data" must never break across two lines */
}
.nav__link:hover {
  text-decoration: none;
  color: var(--heading);
  border-bottom-color: var(--btn-primary-bg);  /* Forest Green underline — brand §6 */
}
.nav__link[aria-current="page"] {
  color: var(--heading);
  border-bottom-color: var(--brand-amber);
}

.masthead__actions { display: flex; align-items: center; gap: var(--sp-3); }

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}
.theme-toggle:hover { color: var(--heading); border-color: var(--btn-primary-bg); }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

.nav-toggle { display: none; }

/* Two separate breakpoints, deliberately.

   The CTA button is the widest thing in the masthead, so it retires first at
   1080px. That buys the nav itself enough room to stay horizontal all the way
   down to 900px — a real tablet width — instead of collapsing to a hamburger
   on ordinary laptop windows. Hiding navigation behind a hamburger on desktop
   measurably reduces how much of a site people visit, so the menu only
   collapses when the links genuinely no longer fit. */
@media (max-width: 1080px) {
  .masthead__cta { display: none; }
}

@media (max-width: 900px) {
  .nav {
    position: fixed;
    inset: 68px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--page);
    border-bottom: 1px solid var(--rule);
    padding: var(--sp-4) var(--sp-5) var(--sp-6);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .nav[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
  .nav__link { padding-block: var(--sp-4); border-bottom: 1px solid var(--rule); }
  .nav__link:hover { border-bottom-color: var(--rule); }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border: 1px solid var(--rule-strong); border-radius: var(--radius);
    background: transparent; color: var(--ink); cursor: pointer;
  }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: linear-gradient(147deg, #05452D 0%, var(--deep) 100%);
  color: var(--on-dark);
  overflow: hidden;
}
.hero::after {
  /* Sequential-ramp wash, not decoration for its own sake — keeps the gradient
     from reading flat on wide screens. */
  content: "";
  position: absolute;
  inset: auto -10% -55% auto;
  width: 780px; height: 780px;
  background: radial-gradient(circle, rgba(47,168,112,.20) 0%, transparent 62%);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: var(--sp-9) var(--sp-9);
  max-width: 940px;
}
.hero h1 { color: var(--on-dark); max-width: 24ch; }
.hero .eyebrow { color: #FFFFFF; }
.hero .eyebrow::before { background: #34C98A; }
.hero__sub {
  font-size: var(--step-1);
  line-height: 1.55;
  color: #C4D8CC;
  max-width: 62ch;
  margin-block: var(--sp-5) var(--sp-6);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }

.hero--page { background: linear-gradient(147deg, #05452D 0%, var(--deep) 100%); }
.hero--page .hero__inner { padding-block: var(--sp-8); max-width: 800px; }
/* Interior-page h1 uses the full display step. It was held down to --step-3
   back when that meant 3rem and a full-size h1 would have dominated the page —
   but --step-3 is also what h2 uses, so an interior page's title ended up the
   same size as every section heading under it. With the scale reduced, h1 can
   take --step-4 and the hierarchy reads properly again. */
.hero--page h1 { font-size: var(--step-4); max-width: 24ch; }

/* Hero stat strip */
.hero__stats {
  display: flex; flex-wrap: wrap; gap: var(--sp-7);
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(255,255,255,.18);
}
.hero__stats .stat__value { color: #FFFFFF; }
.hero__stats .stat__label { color: #9BBBAC; }

/* --------------------------------------------------------------------------
   7. Stats / KPIs
   -------------------------------------------------------------------------- */
.stat { display: flex; flex-direction: column; gap: var(--sp-1); }
.stat__value {
  font-size: var(--step-3);
  font-weight: 600;
  color: var(--heading);
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat__label {
  font-size: var(--step--1);
  color: var(--ink-muted);
  max-width: 26ch;
  line-height: 1.4;
}

.stat-band {
  display: flex; flex-wrap: wrap; gap: var(--sp-7);
  padding: var(--sp-6);
  background: var(--page-alt);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--page);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.section--alt .card { background: var(--page); }
.card h3, .card h4 { margin: 0; }
.card p { margin: 0; color: var(--ink-soft); font-size: var(--step--1); }
.card__num {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  font-size: var(--step-2);
  color: var(--brand-amber);
  letter-spacing: 0;
  line-height: 1;
  margin-bottom: var(--sp-2);
  opacity: .55;
}
.card--link { text-decoration: none; color: inherit; transition: border-color .15s ease; }
.card--link:hover { text-decoration: none; border-color: var(--btn-primary-bg); }
.card--link:hover h3, .card--link:hover h4 { color: var(--btn-primary-bg); }

.card__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 1.5px solid var(--btn-primary-bg);
  background: transparent;
  color: var(--btn-primary-bg);
  margin-bottom: var(--sp-3);
}
.card__icon svg { width: 22px; height: 22px; }
:root[data-theme="dark"] .card__icon { color: #7FD1A9; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card__icon { color: #7FD1A9; }
}

/* Product card — the two flagship families */
.product-card { padding: var(--sp-7); gap: var(--sp-4); }
.product-card .tag {
  align-self: flex-start;
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--step--2);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--seq-green-100);
  color: var(--seq-green-700);
}
:root[data-theme="dark"] .product-card .tag { color: var(--seq-green-700); background: var(--seq-green-100); }
.product-card ul { margin: 0; padding-left: 1.1rem; color: var(--ink-soft); font-size: var(--step--1); }
.product-card li { margin-bottom: var(--sp-2); }

/* --------------------------------------------------------------------------
   9. Process / numbered flow
   -------------------------------------------------------------------------- */
.process { counter-reset: step; }
.process__item {
  position: relative;
  padding-left: var(--sp-8);
  padding-bottom: var(--sp-6);
  border-left: 1px solid var(--rule);
}
.process__item:last-child { border-left-color: transparent; padding-bottom: 0; }
.process__item::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -2px;
  transform: translateX(-50%);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: var(--page);
  border: 1px solid var(--btn-primary-bg);
  color: var(--btn-primary-bg);
  border-radius: 50%;
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--step--2);
  font-weight: 500;
}
.section--alt .process__item::before { background: var(--page-alt); }
.process__item h3 { margin-bottom: var(--sp-2); }
.process__item p { color: var(--ink-soft); font-size: var(--step--1); }

/* --------------------------------------------------------------------------
   10. Team
   -------------------------------------------------------------------------- */
.person { display: flex; flex-direction: column; gap: var(--sp-3); }
.person__avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--seq-green-100);
  color: var(--seq-green-700);
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--step-0);
  font-weight: 500;
  letter-spacing: .02em;
  border: 1px solid var(--rule);
}
.person__name { font-weight: 600; color: var(--ink); margin: 0; font-size: var(--step-0); }
.person__role {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--step--2);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--brand-amber);
  margin: 0;
}
.person__bio { font-size: var(--step--1); color: var(--ink-soft); margin: 0; }

/* --------------------------------------------------------------------------
   11. Insights / article cards
   -------------------------------------------------------------------------- */
.article-card {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
}
.article-card:hover { text-decoration: none; }
.article-card:hover .article-card__title { color: var(--btn-primary-bg); }
.article-card__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--step--2);
  letter-spacing: .04em;
  color: var(--ink-muted);
  text-transform: uppercase;
}
.article-card__title { margin: 0; font-size: var(--step-1); color: var(--ink); }
.article-card__excerpt { margin: 0; color: var(--ink-soft); font-size: var(--step--1); }

.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--page-sunken);
  color: var(--ink-soft);
  font-size: var(--step--2);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-family: 'IBM Plex Mono', monospace;
}

/* Long-form article body */
.prose { max-width: var(--measure); }
.prose h2 { font-size: var(--step-2); margin-top: var(--sp-7); }
.prose h3 { font-size: var(--step-1); margin-top: var(--sp-6); }
.prose ul, .prose ol { color: var(--ink-soft); padding-left: 1.2rem; max-width: var(--measure); }
.prose li { margin-bottom: var(--sp-2); }
.prose blockquote {
  margin: var(--sp-6) 0;
  padding: var(--sp-2) var(--sp-5);
  border-left: 3px solid var(--brand-amber);
  color: var(--ink);
  font-size: var(--step-1);
  line-height: 1.5;
}
.prose blockquote p { max-width: none; }
.source-note {
  font-size: var(--step--1);
  color: var(--ink-muted);
  border-top: 1px solid var(--rule);
  padding-top: var(--sp-4);
  margin-top: var(--sp-7);
}

/* --------------------------------------------------------------------------
   12. Forms
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.field label { font-size: var(--step--1); font-weight: 600; color: var(--ink); }
.field .hint { font-size: var(--step--1); color: var(--ink-muted); }
.field input, .field select, .field textarea {
  font-family: inherit;
  font-size: var(--step-0);
  color: var(--ink);
  background: var(--page);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 10px 12px;
  min-height: 40px;
  width: 100%;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-color: var(--btn-primary-bg);
}
.form-card {
  background: var(--page);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--sp-7);
}
.form-status {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--radius);
  font-size: var(--step--1);
  display: none;
}
.form-status[data-state="ok"] {
  display: block;
  background: var(--seq-green-100);
  color: var(--seq-green-700);
  border: 1px solid var(--seq-green-300);
}
.form-status[data-state="err"] {
  display: block;
  background: #FBEEEA;
  color: #7A1C18;
  border: 1px solid #E39A8F;
}

/* --------------------------------------------------------------------------
   13. Calculator (the traffic magnet)
   -------------------------------------------------------------------------- */
.calc {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: var(--sp-7);
  align-items: start;
}
@media (max-width: 900px) { .calc { grid-template-columns: 1fr; } }

.calc__panel {
  background: var(--page-alt);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  position: sticky;
  top: 88px;
}
@media (max-width: 900px) { .calc__panel { position: static; } }

.calc__results { display: flex; flex-direction: column; gap: var(--sp-5); }

.result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
@media (max-width: 700px) { .result-grid { grid-template-columns: 1fr; } }

.result {
  background: var(--page);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--series-1-green);
  border-radius: var(--radius);
  padding: var(--sp-5);
}
.result:nth-child(2) { border-left-color: var(--series-2-blue); }
.result:nth-child(3) { border-left-color: var(--series-4-gold); }
.result__label {
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-muted);
  font-family: 'IBM Plex Mono', monospace;
  display: block;
  margin-bottom: var(--sp-2);
}
.result__value {
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
  /* Sized to hold "₹21.06 Cr" on one line in a third-width card — currency
     suffixes wrapping onto their own line reads as a rendering fault. */
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--heading);
  line-height: 1.1;
  display: block;
  white-space: nowrap;
}
.result__unit { font-size: var(--step--1); color: var(--ink-soft); margin-left: 4px; font-weight: 400; }
.result__note { font-size: var(--step--2); color: var(--ink-muted); margin: var(--sp-2) 0 0; }

/* Comparison bars — mark specs per brand §8.6 */
.bars { display: flex; flex-direction: column; gap: var(--sp-4); }
.bar-row { display: grid; grid-template-columns: 130px 1fr 96px; gap: var(--sp-4); align-items: center; }
@media (max-width: 640px) { .bar-row { grid-template-columns: 96px 1fr 78px; } }
.bar-row__label { font-size: var(--step--1); color: var(--ink-soft); }
.bar-row__track { background: var(--page-sunken); border-radius: 4px; height: 22px; overflow: hidden; }
.bar-row__fill {
  height: 100%;
  border-radius: 0 4px 4px 0;   /* square at baseline, rounded data-end */
  background: var(--series-1-green);
  transition: width .45s cubic-bezier(.2,.7,.3,1);
}
.bar-row__value {
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: var(--step--1);
  text-align: right;
  color: var(--ink);
}

.disclaimer {
  background: var(--page-sunken);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.disclaimer strong { color: var(--ink); }

/* --------------------------------------------------------------------------
   14. Access / gated routing
   -------------------------------------------------------------------------- */
.access-card {
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-7);
  background: var(--page);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}
.access-card ul { margin: 0; padding-left: 1.1rem; color: var(--ink-soft); font-size: var(--step--1); }
.access-card li { margin-bottom: var(--sp-2); }
.access-card .btn { align-self: flex-start; margin-top: auto; }

.lock-note {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--step--2);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--brand-amber);
}

/* --------------------------------------------------------------------------
   15. Newsletter + sponsor slot (audience & revenue surfaces)
   -------------------------------------------------------------------------- */
.subscribe {
  background: var(--page-alt);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--sp-7);
}
.subscribe__form { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-5); }
.subscribe__form input { flex: 1 1 260px; }
.subscribe .field { margin-bottom: 0; }

/* Reserved sponsorship slot. Deliberately understated: a single labelled unit,
   never an ad grid — the brand's whitespace rule outranks inventory count. */
.sponsor-slot {
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  text-align: center;
  color: var(--ink-muted);
  background: var(--page-alt);
}
.sponsor-slot__label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--step--2);
  letter-spacing: .12em;
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--sp-2);
}
.sponsor-slot p { max-width: 46ch; margin-inline: auto; font-size: var(--step--1); }

/* --------------------------------------------------------------------------
   16. Tables
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius-lg); }
table.data { width: 100%; border-collapse: collapse; font-size: var(--step--1); min-width: 560px; }
table.data th {
  text-align: left;
  padding: var(--sp-4) var(--sp-5);
  background: var(--page-alt);
  color: var(--ink);
  font-size: var(--step--2);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 1px solid var(--rule);
}
table.data td {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--rule);
  color: var(--ink-soft);
  vertical-align: top;
}
table.data tr:last-child td { border-bottom: 0; }
table.data td strong { color: var(--ink); }

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.footer {
  background: var(--page-alt);
  border-top: 1px solid var(--rule);
  padding-block: var(--sp-8) var(--sp-6);
  margin-top: var(--sp-9);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--sp-6);
}
@media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer h4 {
  font-size: var(--step--2);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--sp-4);
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: var(--sp-3); }
.footer a { color: var(--ink-soft); font-size: var(--step--1); text-decoration: none; }
.footer a:hover { color: var(--heading); text-decoration: underline; }
.footer__brandline { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.footer__legal {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  font-size: var(--step--2);
  color: var(--ink-muted);
}
.footer__legal p { margin: 0; max-width: none; }

/* --------------------------------------------------------------------------
   18. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  background: linear-gradient(147deg, #05452D 0%, var(--deep) 100%);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  color: var(--on-dark);
  text-align: center;
}
.cta-band h2 { color: var(--on-dark); }
.cta-band p { color: #C4D8CC; margin-inline: auto; }
.cta-band .btn-row { justify-content: center; margin-top: var(--sp-6); }

/* --------------------------------------------------------------------------
   19. Utilities
   -------------------------------------------------------------------------- */
.center { text-align: center; }
.center p, .center .lede { margin-inline: auto; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.full { max-width: none; }

/* ==========================================================================
   20. Depth & texture
   The v1 pass read flat: white sections stacked with no rhythm. These add
   structure without adding clutter — the brand's whitespace rule still wins.
   ========================================================================== */

/* Fine grid, barely perceptible. Gives dark panels a fabricated, instrument
   quality rather than a plain colour fill. */
.texture-grid { position: relative; }
.texture-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 70% at 70% 0%, #000 20%, transparent 75%);
  pointer-events: none;
}
.texture-grid > * { position: relative; z-index: 1; }

/* Copper hairline that opens a section — the brand's 5% accent, used structurally. */
.rule-accent {
  width: 56px; height: 2px;
  background: var(--brand-amber);
  border: 0; margin: 0 0 var(--sp-5);
}

.section--deep {
  background: linear-gradient(147deg, #05452D 0%, var(--deep) 100%);
  color: var(--on-dark);
}
.section--deep h2, .section--deep h3 { color: var(--on-dark); }
.section--deep p { color: #C4D8CC; }
.section--deep .eyebrow { color: #FFFFFF; }
.section--deep .eyebrow::before { background: #34C98A; }
.section--deep .card {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.14);
}
.section--deep .card h3, .section--deep .card h4 { color: #FFFFFF; }
.section--deep .card p { color: #B3CBBE; }
.section--deep .stat__value { color: #FFFFFF; }
.section--deep .stat__label { color: #9BBBAC; }

/* Cards earn a hover response without shadows (brand §7.2 bans elevation). */
.card--hover { transition: border-color .18s ease, transform .18s ease; }
.card--hover:hover { border-color: var(--btn-primary-bg); transform: translateY(-2px); }

/* ==========================================================================
   21. Value ladder — the bio-cascading pyramid
   Tier width AND colour both encode value, so the shape reads correctly even
   in greyscale or for colour-blind viewers.
   ========================================================================== */
.ladder { display: flex; flex-direction: column-reverse; gap: var(--sp-3); }

.ladder__tier {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  background: var(--page);
  margin-inline: auto;
  width: 100%;
  transition: border-color .18s ease;
}
.ladder__tier:hover { border-color: var(--btn-primary-bg); }

/* A true value pyramid: Tier 1 is the wide, high-volume base and Tier 4 the
   narrow, high-value apex. Colour deepens as value rises, so width and hue
   encode the same message and the shape survives greyscale. */
.ladder__tier[data-tier="1"] { max-width: 100%; background: var(--seq-green-100); }
.ladder__tier[data-tier="2"] { max-width: 87%;  background: var(--seq-green-200); }
.ladder__tier[data-tier="3"] { max-width: 74%;  background: var(--seq-green-300); }
.ladder__tier[data-tier="4"] { max-width: 62%;  background: var(--seq-green-400); }
@media (max-width: 700px) {
  .ladder__tier { max-width: 100% !important; grid-template-columns: 36px 1fr; }
  .ladder__value { grid-column: 2; }
}

.ladder__num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--step--2);
  font-weight: 600;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--page);
  color: var(--seq-green-700);
  border: 1px solid var(--seq-green-500);
}
.ladder__label { display: flex; flex-direction: column; gap: 2px; }
.ladder__name { font-weight: 600; color: var(--seq-green-700); font-size: var(--step-0); }
.ladder__desc { font-size: var(--step--1); color: var(--seq-green-700); opacity: .8; }
/* Relative value, not absolute. Published per-tier price bands for the biomass
   value pyramid could not be sourced to any citable reference, and the width
   and hue of each tier already encode the ordering — so this shows rank rather
   than inventing numbers the page would have to defend. */
.ladder__value {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  font-size: var(--step-0);
  color: var(--seq-green-700);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* ==========================================================================
   22. Composition bar — biomass structural breakdown
   ========================================================================== */
.comp-bar {
  display: flex;
  height: 40px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--rule);
}
.comp-bar__seg {
  display: grid; place-items: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--step--2);
  font-weight: 600;
  color: #fff;
  transition: width .4s cubic-bezier(.2,.7,.3,1);
  min-width: 0;
  overflow: hidden;
}
/* Fixed roles, drawn from the categorical scale — never recoloured per page. */
.comp-bar__seg--cellulose    { background: var(--series-2-blue); }
.comp-bar__seg--hemicellulose{ background: var(--series-1-green); }
.comp-bar__seg--lignin       { background: var(--series-6-copper); }
.comp-bar__seg--ash          { background: var(--chart-axis); color: var(--ink); }

.comp-legend {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  margin-top: var(--sp-4);
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.comp-legend span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.comp-legend i {
  width: 11px; height: 11px; border-radius: 3px; display: inline-block; flex: none;
}

/* Affinity rating chip */
.affinity {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 5px 12px;
  border-radius: 999px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--step--2);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
}
.affinity--elite   { background: var(--seq-green-100); color: var(--seq-green-700); }
.affinity--high    { background: #E7F0F9; color: #1F4E7A; }
.affinity--moderate{ background: #FAF3E6; color: #7A5300; }
:root[data-theme="dark"] .affinity--high    { background: #16263A; color: #7FB2E8; }
:root[data-theme="dark"] .affinity--moderate{ background: #2E2410; color: #D8A249; }

/* ==========================================================================
   23. Head-to-head comparison — the formulator's hook
   ========================================================================== */
.versus { width: 100%; border-collapse: collapse; font-size: var(--step--1); min-width: 620px; }
.versus th {
  padding: var(--sp-4) var(--sp-5);
  text-align: left;
  font-size: var(--step--2);
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--rule-strong);
}
.versus th:nth-child(2) { color: var(--ink-muted); }
.versus th:nth-child(3) { color: var(--seq-green-700); background: var(--seq-green-100); }
.versus td { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--rule); vertical-align: top; }
.versus td:first-child { font-weight: 600; color: var(--ink); }
.versus td:nth-child(2) { color: var(--ink-muted); }
.versus td:nth-child(3) { background: var(--seq-green-100); color: var(--seq-green-700); font-weight: 600; }
.versus tr:last-child td { border-bottom: 0; }

/* ==========================================================================
   24. Gut-axis cards
   ========================================================================== */
.axis-card {
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--series-1-green);
  background: var(--page);
}
.axis-card:nth-child(2) { border-top-color: var(--series-3-magenta); }
.axis-card:nth-child(3) { border-top-color: var(--series-5-teal); }
.axis-card__tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--step--2);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.axis-card h3 { margin: 0; font-size: var(--step-1); }
.axis-card__chain {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--step--2);
  color: var(--ink-soft);
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--rule);
}
.axis-card__chain b { color: var(--seq-green-700); font-weight: 600; }
.axis-card__chain span { color: var(--brand-amber); }

/* ==========================================================================
   25. Lead capture — the dual-path CTA
   Two audiences, two doors, never merged into one generic "contact us".
   ========================================================================== */
.dual-cta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
@media (max-width: 760px) { .dual-cta { grid-template-columns: 1fr; } }

.dual-cta__door {
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-7);
  border-radius: var(--radius-lg);
  border: 1px solid var(--rule);
  background: var(--page);
  transition: border-color .18s ease;
}
.dual-cta__door:hover { border-color: var(--btn-primary-bg); }
.dual-cta__door h3 { margin: 0; font-size: var(--step-1); }
.dual-cta__door p { font-size: var(--step--1); color: var(--ink-soft); margin: 0; flex: 1; }
.dual-cta__door .btn { align-self: flex-start; }
.dual-cta__icon {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--radius);
  background: var(--seq-green-100);
  color: var(--seq-green-700);
}

/* Gated download — trades a report for an email. */
.gate {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-6);
  align-items: center;
  padding: var(--sp-6) var(--sp-7);
  border-radius: var(--radius-lg);
  border: 1px solid var(--brand-amber);
  background: var(--page-alt);
}
@media (max-width: 760px) { .gate { grid-template-columns: 1fr; } }
.gate h3 { margin: 0 0 var(--sp-2); font-size: var(--step-1); }
.gate p { margin: 0; font-size: var(--step--1); color: var(--ink-soft); }
.gate__form { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.gate__form input { min-width: 220px; }
.gate__form .field { margin-bottom: 0; }

/* ==========================================================================
   26. Feature strip — icon + label rows
   ========================================================================== */
.feature-row {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--sp-4);
  align-items: start;
  padding: var(--sp-4) 0;
}
.feature-row + .feature-row { border-top: 1px solid var(--rule); }
.feature-row__icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--radius);
  background: var(--seq-green-100);
  color: var(--seq-green-700);
  flex: none;
}
.feature-row h4 { margin: 0 0 var(--sp-1); color: var(--ink); }
.feature-row p { margin: 0; font-size: var(--step--1); color: var(--ink-soft); }

/* Big pull-quote statistic */
.figure-callout {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding: var(--sp-6) 0;
  border-top: 2px solid var(--brand-amber);
  border-bottom: 1px solid var(--rule);
}
.figure-callout__num {
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: var(--step-4);
  font-weight: 600;
  line-height: 1;
  color: var(--heading);
  letter-spacing: -0.03em;
}
.figure-callout__text { font-size: var(--step-0); color: var(--ink-soft); max-width: 38ch; }

/* Ladder text in dark mode.
   The tier backgrounds flip to the dark ramp (deep greens), so the light-mode
   ink (--seq-green-700, itself light in dark mode) lands on too little
   contrast. Dark mode gets its own near-white ink instead. */
:root[data-theme="dark"] .ladder__name,
:root[data-theme="dark"] .ladder__value { color: #E8F1EC; }
:root[data-theme="dark"] .ladder__desc  { color: #A8C4B8; opacity: 1; }
:root[data-theme="dark"] .ladder__num   { background: #101613; color: #7FD1A9; border-color: #34C98A; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ladder__name,
  :root:not([data-theme="light"]) .ladder__value { color: #E8F1EC; }
  :root:not([data-theme="light"]) .ladder__desc  { color: #A8C4B8; opacity: 1; }
  :root:not([data-theme="light"]) .ladder__num   { background: #101613; color: #7FD1A9; border-color: #34C98A; }
}

/* Same issue on the versus table's highlighted column. */
:root[data-theme="dark"] .versus th:nth-child(3),
:root[data-theme="dark"] .versus td:nth-child(3) { color: #7FD1A9; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .versus th:nth-child(3),
  :root:not([data-theme="light"]) .versus td:nth-child(3) { color: #7FD1A9; }
}

/* And on the affinity chip + product tag, which share the same ramp. */
:root[data-theme="dark"] .affinity--elite,
:root[data-theme="dark"] .product-card .tag { color: #7FD1A9; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .affinity--elite,
  :root:not([data-theme="light"]) .product-card .tag { color: #7FD1A9; }
}

/* ==========================================================================
   27. Motion system
   Pairs with assets/js/motion.js. Reduced-motion users get the .reveal--visible
   state applied instantly by JS with no transition, so nothing here needs its
   own reduced-motion branch beyond what §2 already sets globally.
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s cubic-bezier(.2,.65,.3,1), transform .55s cubic-bezier(.2,.65,.3,1);
  will-change: opacity, transform;
}
.reveal--visible {
  opacity: 1;
  transform: none;
}

.masthead {
  transition: box-shadow .25s ease, border-color .25s ease;
}
.masthead--scrolled {
  box-shadow: 0 1px 0 var(--rule), 0 8px 24px -16px rgba(0,0,0,.25);
}

/* Slightly livelier hover on the primary/secondary buttons — a small lift
   rather than only a color swap, without touching the token-defined colors. */
.btn--primary, .btn--secondary, .btn--onDark, .btn--ghostDark {
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.btn--primary:hover, .btn--onDark:hover { transform: translateY(-1px); }
.btn--primary:active, .btn--onDark:active { transform: translateY(0); }

/* Hero content settles in on load rather than appearing instantly. */
@media (prefers-reduced-motion: no-preference) {
  .hero .eyebrow, .hero h1, .hero .hero__sub, .hero .hero__actions, .hero .hero__stats {
    animation: hero-in .6s cubic-bezier(.2,.65,.3,1) both;
  }
  .hero h1 { animation-delay: .06s; }
  .hero .hero__sub { animation-delay: .12s; }
  .hero .hero__actions { animation-delay: .18s; }
  .hero .hero__stats { animation-delay: .24s; }
}
@keyframes hero-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   28. Transformation flow diagram
   Biomass -> BioOS processing -> refined molecules, as a continuous animated
   pipeline rather than a static row of icons. Built from plain positioned
   HTML (not SVG transforms, which don't map to viewBox units predictably
   across browsers) so every value below is a normal, reliable CSS box
   property. Degrades to a calm static arrangement under reduced motion.
   ========================================================================== */
.flow-diagram {
  position: relative;
  max-width: 900px;
  height: 130px;
  margin: 0 auto var(--sp-5);
}

/* Connecting tracks */
.flow-track {
  position: absolute;
  top: 50%;
  height: 2px;
  background-image: linear-gradient(to right, var(--rule-strong) 0 6px, transparent 6px 12px);
  background-size: 12px 2px;
  transform: translateY(-50%);
}
.flow-track--1 { left: 19%; width: 27%; }
.flow-track--2 { left: 57%; width: 27%; }

/* Nodes */
.flow-node {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.flow-node--biomass { left: 10%; width: 76px; height: 76px; }
.flow-node--biomass span {
  position: absolute;
  border-radius: 50%;
  background: var(--brand-amber);
}
.flow-node--biomass span:nth-child(1) { width: 44px; height: 44px; top: 6px;  left: 4px;  opacity: .5; }
.flow-node--biomass span:nth-child(2) { width: 38px; height: 38px; top: 26px; left: 30px; opacity: .75; }
.flow-node--biomass span:nth-child(3) { width: 30px; height: 30px; top: 4px;  left: 38px; opacity: 1; }

.flow-node--bioos { left: 50%; width: 84px; height: 84px; }
.flow-node--bioos .flow-node__core {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--btn-primary-bg);
  display: grid; place-items: center;
  color: #fff;
  z-index: 1;
}
.flow-node--bioos .flow-node__ring {
  position: absolute;
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 2px solid var(--btn-primary-bg);
  opacity: .5;
}
@media (prefers-reduced-motion: no-preference) {
  .flow-node--bioos .flow-node__ring { animation: flow-pulse 2.4s ease-out infinite; }
}
@keyframes flow-pulse {
  0%   { transform: scale(1);    opacity: .5; }
  100% { transform: scale(1.45); opacity: 0; }
}

.flow-node--molecules { left: 90%; width: 76px; height: 60px; }
.flow-node--molecules span {
  position: absolute;
  width: 30px; height: 30px;
  background: var(--series-5-teal);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.flow-node--molecules span:nth-child(1) { top: 2px;  left: 0;  opacity: .6; }
.flow-node--molecules span:nth-child(2) { top: 18px; left: 22px; opacity: .85; }
.flow-node--molecules span:nth-child(3) { top: 0;    left: 40px; opacity: 1; }

/* Particles — animate the `left` box property (percent of the container),
   which behaves identically and predictably in every browser, then use
   transform only for vertical centering. */
.flow-particle {
  position: absolute;
  top: 50%;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1.5px solid var(--brand-amber);
  transform: translateY(-50%);
  opacity: 0;
}
.flow-particle--seg2 { border-color: var(--series-5-teal); }

@media (prefers-reduced-motion: no-preference) {
  .flow-particle--seg1-a { animation: flow-seg1 4s linear infinite; }
  .flow-particle--seg1-b { animation: flow-seg1 4s linear infinite; animation-delay: 1.3s; }
  .flow-particle--seg1-c { animation: flow-seg1 4s linear infinite; animation-delay: 2.6s; }
  .flow-particle--seg2-a { animation: flow-seg2 4s linear infinite; animation-delay: .5s; }
  .flow-particle--seg2-b { animation: flow-seg2 4s linear infinite; animation-delay: 1.8s; }
  .flow-particle--seg2-c { animation: flow-seg2 4s linear infinite; animation-delay: 3.1s; }
}
@keyframes flow-seg1 {
  0%   { left: 19%; opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { left: 46%; opacity: 0; }
}
@keyframes flow-seg2 {
  0%   { left: 57%; opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { left: 84%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  /* Static, evenly spaced along each track rather than a flickering
     near-zero-duration loop. */
  .flow-particle { opacity: .9; }
  .flow-particle--seg1-a { left: 25%; }
  .flow-particle--seg1-b { left: 33%; }
  .flow-particle--seg1-c { left: 41%; }
  .flow-particle--seg2-a { left: 63%; }
  .flow-particle--seg2-b { left: 71%; }
  .flow-particle--seg2-c { left: 79%; }
  .flow-node--bioos .flow-node__ring { display: none; }
}

.flow-diagram__labels {
  display: flex;
  justify-content: space-between;
  max-width: 900px;
  margin: 0 auto var(--sp-8);
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--step--2);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: center;
}
.flow-diagram__labels span { flex: 1; }
@media (max-width: 640px) {
  .flow-diagram { height: 100px; }
  .flow-node--biomass, .flow-node--molecules { width: 56px; height: 56px; transform: translate(-50%,-50%) scale(.72); }
  .flow-node--bioos { width: 64px; height: 64px; transform: translate(-50%,-50%) scale(.72); }
  /* Off-scale by design: these labels sit inside a diagram fixed at 100px
     high on mobile, and --step--2 wraps them onto a second line. */
  .flow-diagram__labels { font-size: 0.6rem; }
}

/* ==========================================================================
   29. Process pipeline — the real architecture: one input, one core process,
   two branching output streams. Replaces the earlier linear flow-diagram on
   the homepage, which implied a single output and understated the platform.
   Static (no transform animation) so the earlier SVG-coordinate caveat from
   §28 doesn't apply here — this is plain positioned HTML + a static SVG for
   the fork connector only.
   ========================================================================== */
.pipeline {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 760px;
  margin: 0 auto var(--sp-7);
}

.pipeline__node {
  width: 100%;
  max-width: 320px;
  background: var(--page);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-6);
  text-align: center;
}
.pipeline__node--core {
  border-color: var(--btn-primary-bg);
  border-width: 1.5px;
}
.pipeline__node h4 { margin: 0 0 4px; }
.pipeline__node p { margin: 0; font-size: var(--step--1); color: var(--ink-soft); }

.pipeline__icon {
  width: 40px; height: 40px;
  margin: 0 auto var(--sp-3);
  display: grid; place-items: center;
  border-radius: var(--radius);
  background: var(--seq-green-100);
  color: var(--seq-green-700);
}
.pipeline__node--branch-b .pipeline__icon { background: #E7F0F9; color: #2B6CB0; }

.pipeline__badge {
  display: inline-block;
  margin-bottom: var(--sp-3);
  padding: 3px 10px;
  border: 1px dashed var(--brand-amber);
  border-radius: 999px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--step--2);
  letter-spacing: .03em;
  color: var(--brand-amber);
}
.pipeline__badge--oversight {
  margin-bottom: var(--sp-5);
}

.pipeline__connector {
  width: 2px;
  height: 28px;
  background-image: linear-gradient(to bottom, var(--rule-strong) 0 5px, transparent 5px 10px);
  background-size: 2px 10px;
}

.pipeline__fork { width: 62%; max-width: 420px; height: 30px; display: block; }
.pipeline__fork-path {
  stroke: var(--rule-strong);
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 5 6;
}

.pipeline__row--split {
  display: flex;
  gap: var(--sp-5);
  width: 100%;
  justify-content: center;
  align-items: stretch;
}
.pipeline__row--split .pipeline__node { flex: 1; max-width: 280px; }

.pipeline__connectors {
  display: flex;
  gap: var(--sp-5);
  width: 100%;
  max-width: 640px;
  justify-content: center;
}
.pipeline__connectors > div { flex: 1; max-width: 280px; display: flex; justify-content: center; }

.pipeline__output-tag {
  display: inline-block;
  margin-bottom: var(--sp-2);
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--step--2);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

@media (max-width: 640px) {
  .pipeline__row--split { flex-direction: column; align-items: center; }
  .pipeline__row--split .pipeline__node { max-width: 320px; }
  .pipeline__connectors { flex-direction: column; align-items: center; }
  .pipeline__fork { display: none; }
  .pipeline__connectors > div { max-width: 320px; }
}

/* ==========================================================================
   30. Commercial roadmap — staged grade escalation over time (animal feed ->
   human food -> pharmaceutical -> premium/cosmetic). Deliberately distinct
   from the vertical value-ladder pyramid (§21): this is a horizontal
   timeline, since it represents stages reached over time as regulatory gates
   clear, not a value stratification at a single point in time.
   ========================================================================== */
.roadmap {
  display: flex;
  align-items: stretch;
  gap: 0;
  max-width: 100%;
}
.roadmap__step {
  flex: 1;
  background: var(--page);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  position: relative;
}
.roadmap__step--future { border-style: dashed; background: var(--page-alt); }
.roadmap__num {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--seq-green-100);
  color: var(--seq-green-700);
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--step--2);
  font-weight: 600;
  margin-bottom: var(--sp-3);
}
.roadmap__step--future .roadmap__num { background: var(--page-sunken); color: var(--ink-muted); }
.roadmap__step h4 { margin: 0 0 4px; font-size: var(--step-0); }
.roadmap__step p { margin: 0; font-size: var(--step--1); color: var(--ink-soft); }
.roadmap__gate {
  display: block;
  margin-top: var(--sp-3);
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--step--2);
  letter-spacing: .03em;
  color: var(--brand-amber);
}
.roadmap__arrow {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  color: var(--ink-muted);
  font-size: var(--step-0);
}

@media (max-width: 860px) {
  .roadmap { flex-direction: column; }
  .roadmap__arrow { width: auto; height: 24px; transform: rotate(90deg); }
}

/* ==========================================================================
   31. Pipeline mobile fix
   §28's pipeline component shipped with no breakpoint at all — the two-node
   split rows overflow badly under ~600px. Stack them, matching the pattern
   already used for .roadmap and .ladder.
   ========================================================================== */
@media (max-width: 640px) {
  .pipeline__row--split { flex-direction: column; align-items: center; }
  .pipeline__row--split .pipeline__node { max-width: 320px; width: 100%; }
  .pipeline__connectors { flex-direction: column; align-items: center; gap: var(--sp-3); }
  .pipeline__connectors > div { max-width: none; }
  .pipeline__fork { display: none; }
  .pipeline__node { max-width: 320px; }
}

/* Pipeline/roadmap node titles were promoted from h4 to h3 for correct
   heading hierarchy (no more h2 -> h4 skip). Restore their original visual
   size here so the fix is semantic-only, not a layout change. */
.pipeline__node h3, .roadmap__step h3 {
  font-size: var(--step-0);
}

/* ==========================================================================
   32. Hero tagline — distinct from the generic .eyebrow utility label
   "Beyond Fossil Carbon." is the brand tagline, not a section kicker. It was
   sharing .eyebrow's small mono-uppercase treatment with 40+ other section
   labels sitewide and reads as an afterthought. Give it real presence.
   ========================================================================== */
.hero__tagline {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  font-size: var(--step-1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #E8C078;
  margin-bottom: var(--sp-5);
}
.hero__tagline::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--brand-amber);
  flex: none;
}

/* ==========================================================================
   33. Nav "Tools" group — dropdown on desktop, always-expanded on mobile.
   Consolidates Biomass Database, Value Calculator and Gut-Health Science
   under one discoverable nav entry instead of the calculator having no nav
   presence at all and the other two competing for separate top-level slots.
   ========================================================================== */
.nav__group { position: relative; }
.nav__group-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: inherit;
  cursor: pointer;
}
.nav__chevron { transition: transform .15s ease; flex: none; }
.nav__group[data-open="true"] .nav__chevron { transform: rotate(180deg); }

.nav__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  background: var(--page);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--sp-2);
  box-shadow: 0 12px 32px -12px rgba(0,0,0,.22);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  z-index: 50;
}
.nav__group[data-open="true"] .nav__panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav__panel-link {
  display: block;
  padding: 9px 12px;
  border-radius: 5px;
  font-size: var(--step--1);
  color: var(--ink);
  text-decoration: none;
}
.nav__panel-link:hover {
  background: var(--page-alt);
  color: var(--btn-primary-bg);
  text-decoration: none;
}

@media (max-width: 900px) {
  /* Inside the mobile slide-down nav, the dropdown becomes a plain always-
     visible indented sub-list — a hover/click panel makes no sense once the
     nav itself is already a vertical, tap-to-open menu.

     Because the trigger is inert here (the links below it do the work), it
     must not look like the links around it. Styled as a small uppercase
     section heading it reads as a category; styled like a link it reads as
     broken — people tap "Feedstock", nothing happens, and they end up
     guessing at a neighbouring item instead. */
  .nav__group { display: block; }
  .nav__group-trigger {
    width: 100%;
    justify-content: flex-start;
    padding-block: var(--sp-3);
    padding-top: var(--sp-5);
    border-bottom: 0;
    font-size: var(--step--2);
    font-family: 'IBM Plex Mono', monospace;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-muted);
    cursor: default;
    pointer-events: none; /* label only on mobile; links below do the work */
  }
  /* The current-page marker belongs on the actual link, never on the inert
     label — an underlined heading is exactly what reads as a tappable link. */
  .nav__group-trigger[aria-current="page"] {
    color: var(--ink-muted);
    border-bottom-color: transparent;
  }
  .nav__chevron { display: none; }
  .nav__panel {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0;
    background: transparent;
  }
  .nav__panel-link {
    padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-5);
    border-bottom: 1px solid var(--rule);
    font-size: var(--step-0);
  }
}

/* ==========================================================================
   34. LAYOUT REBUILD — breaking the single-column template
   Diagnosis: every section was eyebrow -> h2 -> lede -> uniform card grid,
   inside one 1140px column, on metronomic white/grey alternating bands, with
   ~40% of wide viewports left empty. That architecture is what read as dated,
   not the type or icon details. These utilities exist to break it.
   ========================================================================== */

/* --- Full-bleed: escape the .shell container entirely --- */
.bleed {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* --- Wide: break out partially, for diagrams and data that need room --- */
.wide {
  width: min(1440px, 94vw);
  margin-left: 50%;
  transform: translateX(-50%);
}

/* --- Section head that uses the full width instead of stranding half of it.
       The old .section__head capped at 68ch and left-aligned, leaving wide
       screens visibly empty on the right. --- */
.section__head--wide {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--sp-7);
  align-items: end;
  margin-bottom: var(--sp-8);
}
.section__head--wide h2 { margin-bottom: 0; }
.section__head--wide .lede { margin-bottom: 0; }
@media (max-width: 860px) {
  .section__head--wide { grid-template-columns: 1fr; gap: var(--sp-4); align-items: start; }
}

/* --- Oversized display heading for the one or two moments that should
       actually stop someone scrolling --- */
.display {
  /* No longer carries its own size. It used to be a bespoke 3.4rem clamp that
     sat ABOVE h2 (--step-3), which made it a fourth, undocumented heading
     size competing with the scale. It now inherits h2's size and contributes
     only the tighter tracking and leading that make a section opener read as
     a statement. Kept as a class so the ~23 existing usages need no markup
     change. */
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* ==========================================================================
   35. Bento grid — varied cell sizes, not uniform card rows
   ========================================================================== */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-4);
}
.bento__cell {
  border-radius: 16px;
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--sp-2);
  min-height: 190px;
  background: var(--page-alt);
  position: relative;
  overflow: hidden;
}
.bento__cell h3 { margin: 0; }
.bento__cell p { margin: 0; font-size: var(--step--1); color: var(--ink-soft); }

/* Span helpers */
.bento__cell--wide  { grid-column: span 4; }
.bento__cell--half  { grid-column: span 3; }
.bento__cell--third { grid-column: span 2; }
.bento__cell--tall  { grid-row: span 2; min-height: 400px; }

/* Emphasis variants — colour carries hierarchy instead of borders */
.bento__cell--feature {
  background: linear-gradient(147deg, #05452D 0%, var(--deep) 100%);
  color: var(--on-dark);
}
.bento__cell--feature h3 { color: var(--on-dark); }
.bento__cell--feature p  { color: #B3CBBE; }
.bento__cell--feature .eyebrow { color: #D8A249; }

.bento__cell--accent { background: var(--seq-green-100); }
.bento__cell--sunken { background: var(--page-sunken); }

.bento__stat {
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: var(--step-4);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: var(--sp-1);
}

@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento__cell--wide, .bento__cell--half, .bento__cell--third { grid-column: span 2; }
  .bento__cell--tall { grid-row: auto; min-height: 190px; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; }
  .bento__cell--wide, .bento__cell--half, .bento__cell--third { grid-column: span 1; }
}

/* ==========================================================================
   36. Borderless card variant
   The default .card outlines everything in 1px, which is the single most
   template-ish tell in the whole system. This variant uses space and
   background instead.
   ========================================================================== */
.card--plain {
  border: none;
  background: transparent;
  padding: 0;
}
.card--plain .card__icon { margin-bottom: var(--sp-4); }

/* Numbered editorial list — replaces a card grid where the content is
   genuinely sequential rather than parallel. */
.editorial-list { display: grid; gap: 0; }
.editorial-list__item {
  display: grid;
  grid-template-columns: minmax(0, 88px) minmax(0, 1fr) minmax(0, 1.3fr);
  gap: var(--sp-6);
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--rule);
  align-items: start;
}
.editorial-list__item:last-child { border-bottom: 1px solid var(--rule); }
.editorial-list__num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--brand-amber);
  opacity: .5;
  line-height: 1;
}
.editorial-list__item h3 { margin: 0; }
.editorial-list__item p { margin: 0; color: var(--ink-soft); font-size: var(--step--1); }
@media (max-width: 800px) {
  .editorial-list__item { grid-template-columns: 56px 1fr; gap: var(--sp-4); }
  .editorial-list__item p { grid-column: 2; }
}

/* ==========================================================================
   37. Imagery
   Photography was the single biggest gap in the visual system — the site had
   zero images. These are the containers for it.
   ========================================================================== */

/* Aspect-locked media box. The fixed ratio reserves space before the image
   loads, so nothing on the page jumps as it arrives. */
.media {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: var(--page-sunken);
}
.media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media--16x9 { aspect-ratio: 16 / 9; }
.media--4x3  { aspect-ratio: 4 / 3; }
.media--square { aspect-ratio: 1 / 1; }

/* Caption sits under the frame, not over it — these are evidence, not decoration. */
.media__caption {
  margin-top: var(--sp-3);
  font-size: var(--step--1);
  color: var(--ink-muted);
  max-width: 52ch;
}

/* Full-bleed image band, for moments that should break the column. */
.media-band {
  position: relative;
  overflow: hidden;
  min-height: clamp(340px, 46vh, 560px);
}
.media-band img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.media-band__overlay {
  position: relative;
  min-height: inherit;
  display: flex;
  align-items: flex-end;
  padding: var(--sp-7) 0;
  /* Dark scrim so white type stays legible over any part of the photograph. */
  background: linear-gradient(180deg,
    rgba(1,26,13,.15) 0%, rgba(1,26,13,.55) 55%, rgba(1,26,13,.88) 100%);
}
.media-band__overlay h2,
.media-band__overlay h3 { color: #fff; }
.media-band__overlay p  { color: #DCE9DF; }
.media-band__overlay .eyebrow { color: #E8C078; }

/* --- Hero photographic ground ---------------------------------------------
   Two background-image declarations on purpose: the first is a plain JPEG that
   every browser understands, the second re-declares with image-set() so
   WebP-capable browsers take the smaller file. Older engines simply ignore the
   second rule and keep the JPEG. */
.hero--image {
  background-color: #04170C;
  background-image:
    linear-gradient(118deg, rgba(0,77,37,.94) 0%, rgba(1,32,16,.86) 52%, rgba(1,20,10,.92) 100%),
    url("../img/hero-texture.jpg");
  background-image:
    linear-gradient(118deg, rgba(0,77,37,.94) 0%, rgba(1,32,16,.86) 52%, rgba(1,20,10,.92) 100%),
    image-set(url("../img/hero-texture.webp") type("image/webp"),
              url("../img/hero-texture.jpg")  type("image/jpeg"));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Feedstock portrait on the database detail pages */
.feedstock-figure { margin: 0; }

/* Paradox diagrams — two native-SVG figures on the platform page. */
.paradox-figure {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
  margin: var(--sp-7) 0 0;
}
.paradox {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--page-alt);
  padding: var(--sp-5);
}
.paradox__svg { display: block; width: 100%; height: auto; }
.paradox__cap {
  margin: var(--sp-4) 0 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: 46ch;
}
.paradox .pdx-lbl { font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 500; }
.paradox .pdx-tick { font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: .02em; }
@media (max-width: 720px) {
  .paradox-figure { grid-template-columns: 1fr; }
}
.feedstock-figure .media { border: 1px solid var(--rule); }

/* ==========================================================================
   38. AI-generated imagery disclosure
   Every photographic image on this site is AI-generated. Labelling it is both
   an honesty measure and a credibility one — an unlabelled synthetic
   "documentary" photograph of a burning field is the kind of thing that costs
   trust badly if a diligence process discovers it unaided.
   ========================================================================== */
.ai-note {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--step--2);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}
.ai-note::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--brand-amber);
  flex: none;
}

/* Overlay variant — for images with no caption slot beneath them
   (full-bleed bands, hero grounds). */
.ai-note--overlay {
  position: absolute;
  right: var(--sp-4);
  bottom: var(--sp-3);
  z-index: 3;
  color: rgba(255,255,255,.62);
  background: rgba(0,0,0,.30);
  backdrop-filter: blur(4px);
  padding: 4px 9px;
  border-radius: 4px;
  /* Off-scale by design: this badge sits ON TOP of an image and must stay
     subordinate to it. At --step--2 it competes with the caption beneath. */
  font-size: 0.62rem;
}
.ai-note--overlay::before { background: rgba(255,255,255,.55); }

.media__caption .ai-note { margin-left: var(--sp-2); }

/* ==========================================================================
   39. Product grades & specifications
   Peer research finding: buyers in this category shop by grade and purity
   ("XOS 95% food grade", "feed grade 35%", "DP2-DP7"), not by brand narrative.
   Every established supplier organises around a grade ladder. These are the
   components for that.
   ========================================================================== */
.grade-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--sp-4);
}

.grade {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--page);
  transition: border-color .18s ease, transform .18s ease;
}
.grade:hover { border-color: var(--btn-primary-bg); transform: translateY(-2px); }

.grade__code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--heading);
  line-height: 1;
}
.grade__form {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--step--2);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.grade__purity {
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: var(--step-3);
  font-weight: 600;
  line-height: 1;
  color: var(--series-1-green);
  letter-spacing: -.03em;
}
.grade__purity small {
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--ink-muted);
  letter-spacing: 0;
  margin-left: 2px;
}
.grade__use { font-size: var(--step--1); color: var(--ink-soft); margin: 0; flex: 1; }

/* Development-stage pill. Deliberately explicit: this site describes a
   pre-commercial line, and every grade must carry its real status. */
.stage-pill {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--step--2); letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
  border: 1px solid currentColor;
}
.stage-pill::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex: none;
}
.stage-pill--pilot    { color: #06784C; }
.stage-pill--dev      { color: #B87300; }
.stage-pill--planned  { color: var(--ink-muted); }
:root[data-theme="dark"] .stage-pill--pilot { color: #4FD69B; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stage-pill--pilot { color: #4FD69B; }
}

/* Pre-commercial disclosure — sits above the grade ladder, not buried. */
.spec-notice {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  padding: var(--sp-5);
  border: 1px solid var(--brand-amber);
  border-radius: 10px;
  background: var(--page-alt);
  margin-bottom: var(--sp-6);
}
.spec-notice__icon { color: var(--brand-amber); flex: none; margin-top: 2px; }
.spec-notice p { margin: 0; font-size: var(--step--1); color: var(--ink-soft); }
.spec-notice strong { color: var(--ink); }

/* Specification parameter table */
table.spec { width: 100%; border-collapse: collapse; font-size: var(--step--1); min-width: 520px; }
table.spec th {
  text-align: left; padding: var(--sp-3) var(--sp-4);
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--step--2); letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-muted); border-bottom: 1px solid var(--rule);
  font-weight: 500;
}
table.spec td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--rule-2, var(--rule));
  color: var(--ink-soft);
}
table.spec td:first-child { color: var(--ink); font-weight: 500; }
table.spec td.num {
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
table.spec tr:last-child td { border-bottom: 0; }

/* ==========================================================================
   40. Reference citations
   Every calculator and data claim carries its sources on-page. This is the
   difference between a marketing widget and a tool a technical buyer will
   trust enough to cite in their own internal case.
   ========================================================================== */
.refs {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
}
.refs h3 {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--step--2);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--sp-4);
  font-weight: 500;
}
.refs ol { margin: 0; padding-left: 1.4rem; }
.refs li {
  font-size: var(--step--1);
  color: var(--ink-soft);
  margin-bottom: var(--sp-3);
  line-height: 1.55;
}
.refs li::marker { color: var(--brand-amber); font-family: 'IBM Plex Mono', monospace; }
.refs cite { font-style: normal; color: var(--ink); }

/* Method box — states the arithmetic openly rather than hiding it */
.method {
  background: var(--page-sunken);
  border-radius: 10px;
  padding: var(--sp-5);
  margin-top: var(--sp-5);
}
.method h4 {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--step--2); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-muted); margin: 0 0 var(--sp-3); font-weight: 500;
}
.method code {
  display: block;
  font-size: var(--step--1);
  color: var(--ink);
  background: var(--page);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
  overflow-x: auto;
}
.method p { margin: 0; font-size: var(--step--1); color: var(--ink-soft); }

/* ==========================================================================
   41. Dose meter — the visual core of the Dose Checker
   ========================================================================== */
.meter {
  height: 34px;
  border-radius: 6px;
  background: var(--page-sunken);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--rule);
}
.meter__fill {
  height: 100%;
  border-radius: 0 4px 4px 0;
  transition: width .45s cubic-bezier(.2,.7,.3,1), background-color .3s ease;
  background: var(--status-good);
}
.meter__fill[data-tone="warn"] { background: var(--status-warning); }
.meter__fill[data-tone="bad"]  { background: var(--status-critical); }
.meter__fill[data-tone="idle"] { background: var(--chart-axis); }
.meter__scale {
  display: flex; justify-content: space-between;
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--step--2); color: var(--ink-muted);
  margin-top: var(--sp-2);
}

/* Big single readout used by both tools */
.readout {
  display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-5);
  border-radius: 10px;
  background: var(--page-alt);
  border: 1px solid var(--rule);
}
.readout__label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--step--2); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-muted);
}
.readout__value {
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: var(--step-3);
  font-weight: 600; line-height: 1.05;
  color: var(--heading);
  letter-spacing: -.02em;
}
.readout__note { font-size: var(--step--1); color: var(--ink-soft); margin: 0; }
.readout--accent { border-left: 3px solid var(--btn-primary-bg); }

/* Comparison bar rows reused by the cost-in-use tool */
.cmp-row {
  display: grid;
  grid-template-columns: minmax(90px, 130px) 1fr minmax(88px, auto);
  gap: var(--sp-4); align-items: center;
  margin-bottom: var(--sp-4);
}
.cmp-row__label { font-size: var(--step--1); color: var(--ink-soft); }
.cmp-row__track { height: 24px; border-radius: 5px; background: var(--page-sunken); overflow: hidden; }
.cmp-row__fill  { height: 100%; border-radius: 0 4px 4px 0; background: var(--series-2-blue); transition: width .45s cubic-bezier(.2,.7,.3,1); }
.cmp-row__fill--xos { background: var(--series-1-green); }
.cmp-row__val {
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: var(--step--1); text-align: right; color: var(--ink);
}
@media (max-width: 640px) {
  .cmp-row { grid-template-columns: 84px 1fr 76px; gap: var(--sp-3); }
}

/* ==========================================================================
   42. Fraction split — the whole-biomass economics visual
   The single most investable fact about this business: hemicellulose carries
   the margin, the remaining fractions carry operating cost. Deserves to be
   seen, not just described.
   ========================================================================== */
.fractions {
  display: grid;
  grid-template-columns: 30fr 55fr 15fr;
  gap: 4px;
  margin-bottom: var(--sp-4);
}
@media (max-width: 700px) { .fractions { grid-template-columns: 1fr; gap: var(--sp-3); } }

.fraction {
  padding: var(--sp-5);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-height: 190px;
  position: relative;
}
.fraction--margin { background: linear-gradient(160deg, #06784C 0%, #04492F 100%); color: #fff; }
.fraction--base   { background: var(--page-sunken); }
.fraction--other  { background: var(--page-alt); }

.fraction__pct {
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: var(--step-3);
  font-weight: 600; line-height: 1; letter-spacing: -.02em;
}
.fraction--margin .fraction__pct { color: #fff; }
.fraction--base .fraction__pct   { color: var(--heading); }
.fraction--other .fraction__pct  { color: var(--ink-muted); }

.fraction__name { font-weight: 600; font-size: var(--step-0); }
.fraction--margin .fraction__name { color: #fff; }

.fraction__role {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--step--2); letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  align-self: flex-start; margin-top: auto;
}
.fraction--margin .fraction__role { background: rgba(255,255,255,.18); color: #fff; }
.fraction--base .fraction__role   { background: var(--seq-green-100); color: var(--seq-green-700); }
.fraction--other .fraction__role  { background: transparent; color: var(--ink-muted); border: 1px solid var(--rule); }

.fraction__desc { font-size: var(--step--1); }
.fraction--margin .fraction__desc { color: #B3CBBE; }
.fraction--base .fraction__desc, .fraction--other .fraction__desc { color: var(--ink-soft); }

/* Incumbent-displacement cards — each names the material it targets */
.target-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap: var(--sp-4); }
.target {
  padding: var(--sp-5);
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--page);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.target__sector {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--step--2); letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand-amber);
}
.target__vs {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--step--2); color: var(--ink-muted);
  padding-top: var(--sp-3); border-top: 1px dashed var(--rule);
  margin-top: auto;
}
.target__vs strong { color: var(--ink); font-weight: 600; }
.target h3 { margin: 0; font-size: var(--step-0); }
.target p { margin: 0; font-size: var(--step--1); color: var(--ink-soft); }

/* ==========================================================================
   43. Hero tagline — elevated
   "Beyond Fossil Carbon." is the brand line, not a section label. Earlier it
   shared the small .eyebrow treatment used by 40+ section kickers and got
   lost. Given brand v2.2 §4 locks the IBM Plex system, the prominence comes
   from scale, weight and framing rather than a fourth typeface.
   ========================================================================== */
.hero__tagline {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  font-size: var(--step-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #E8C078;
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid rgba(232, 207, 168, .28);
  text-shadow: 0 1px 14px rgba(0,0,0,.32);
}
.hero__tagline::before {
  content: "";
  width: clamp(28px, 4vw, 56px);
  height: 3px;
  background: var(--brand-amber);
  flex: none;
  border-radius: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  .hero__tagline::before {
    transform-origin: left center;
    animation: tagline-rule .7s cubic-bezier(.2,.65,.3,1) both;
  }
}
@keyframes tagline-rule {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* On interior pages the tagline isn't present, so nothing else changes. */

/* ==========================================================================
   44. Section eyebrows
   These were once pushed up to --step-0 to balance display headings that had
   grown to ~6rem. Those headings are now --step-3 (2.6rem max), so a 17px
   uppercase label no longer balances anything — it just competes with body
   text set at the same size. Back to --step--1: still distinct via the mono
   face, tracking, weight and the copper rule, without shouting.
   ========================================================================== */
.section__head .eyebrow,
.hero--page .eyebrow {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.section__head .eyebrow::before,
.hero--page .eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: currentColor;
  opacity: .55;
  flex: none;
  border-radius: 2px;
}

/* Slightly deeper copper so the label holds its own against large headings
   without drifting toward orange. Contrast-checked against both grounds. */
/* v3.0 §6.3 + §5.5 — the label ink is near-black, never the accent. Amber is
   3.82:1 and is not a text colour; setting a label in it is the exact failure
   the device exists to fix. The accent lives in the rule instead. */
.section__head .eyebrow { color: var(--ink); }
.section__head .eyebrow::before { background: var(--brand-green); opacity: 1; height: 3px; }
:root[data-theme="dark"] .section__head .eyebrow { color: var(--ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .section__head .eyebrow { color: var(--ink); }
}
/* On dark hero grounds the eyebrow keeps the lighter tone it already had. */
.hero--page .eyebrow { color: #E8C078; }

/* In-card eyebrows stay deliberately small — they label, they don't announce. */
.card .eyebrow,
.bento__cell .eyebrow,
.grade .eyebrow,
.dual-cta__door .eyebrow {
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .10em;
  display: block;
  margin-bottom: var(--sp-2);
}
.card .eyebrow::before,
.bento__cell .eyebrow::before,
.grade .eyebrow::before,
.dual-cta__door .eyebrow::before { content: none; }

/* ==========================================================================
   Statement band — v3.0 §10.2 (Tier 0 art direction)
   Replaces the AI-generated photo band. With no plant to photograph, a
   typographic statement on Deep Fraction is a stronger hero than a synthetic
   image, and it costs nothing. When the feedstock shoot happens this band can
   take a real photograph behind the same scrim without any layout change.
   ========================================================================== */
/* --image adds a photograph behind the same scrim. The band was built so a
   real photograph can be dropped in later with no layout change; that is the
   whole point of the Tier 0 -> Tier 1 upgrade path. */
.statement-band--image { position: relative; overflow: hidden; }
.statement-band--image img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.statement-band--image .shell { position: relative; z-index: 1; }
.statement-band--image::before {
  content: "";
  position: absolute; inset: 0;
  /* Scrim strong enough that white type and the figure rules stay legible
     over any part of the photograph. */
  background: linear-gradient(180deg,
    rgba(3,32,20,.62) 0%, rgba(3,32,20,.78) 55%, rgba(3,32,20,.90) 100%);
}

.statement-band {
  background: linear-gradient(147deg, #05452D 0%, var(--deep) 100%);
  color: var(--on-dark);
  padding-block: var(--sp-9);
}
.statement-band .eyebrow { color: #FFFFFF; }
.statement-band .eyebrow::before { background: #34C98A; }

.statement-band__h {
  color: var(--on-dark);
  max-width: 20ch;
  margin-block: 0 var(--sp-5);
}
.statement-band__p {
  color: #C4D8CC;
  max-width: 56ch;
  margin: 0;
}

/* The figures carry the argument the photograph used to carry. */
.statement-band__figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-6);
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 2px solid rgba(255, 255, 255, 0.22);
}
.statement-fig__v {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--step-3);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--on-dark);
  font-variant-numeric: tabular-nums;
}
.statement-fig__v small {
  font-size: 0.36em;
  font-weight: 400;
  letter-spacing: 0;
  color: #9CBBAB;
}
.statement-fig__k {
  display: block;
  margin-top: var(--sp-3);
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.5;
  color: #9CBBAB;
}

/* ==========================================================================
   The measure sweep — v3.0 §11.2
   The digits are correct from the first frame; only their arrival animates.
   Paired with assets/js/motion.js, which adds .sweep then .sweep--done.
   ========================================================================== */
.sweep {
  opacity: 0;
  transform: translateY(0.22em);
  transition: opacity 220ms cubic-bezier(.2,0,0,1),
              transform 220ms cubic-bezier(.2,0,0,1);
}
.sweep--done { opacity: 1; transform: none; }

/* The rule draws beneath the figure, slightly after it lands. */
.sweep::after {
  content: "";
  display: block;
  height: 2px;
  background: currentColor;
  opacity: 0.28;
  margin-top: 0.32em;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 240ms cubic-bezier(.2,0,0,1) 120ms;
}
.sweep--done::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .sweep, .sweep--done { opacity: 1; transform: none; transition: none; }
  .sweep::after, .sweep--done::after { transform: scaleX(1); transition: none; }
}

/* ==========================================================================
   45. Process diagram — brand v3.0 §9.2
   Fixed vocabulary so a reader who learns one figure can read all of them:
   green is the product path, grey is context, amber squares are measurement
   points, blue squares are BioOS taps. Flow is left-to-right, never mixed.
   ========================================================================== */
.flow {
  margin: 0 0 var(--sp-8);
  padding: var(--sp-6) 0 var(--sp-5);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  overflow-x: auto;
}
.flow svg { display: block; width: 100%; min-width: 640px; height: auto; }

.flow__in, .flow__mid { stroke: var(--ink-muted); }
.flow__out            { stroke: var(--brand-green); }
.flow__node           { stroke: var(--ink); }
.flow__tap  rect      { fill: var(--brand-amber); }
.flow__bios rect      { fill: var(--brand-blue); }
.flow__biosline       { stroke: var(--brand-blue); }

.flow__label text {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  fill: var(--ink-soft);
}
.flow__label--tap  text { fill: var(--brand-amber); font-size: 9px; }
.flow__label--bios text { fill: var(--brand-blue);  font-size: 9px; }

.flow figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  margin-top: var(--sp-4);
}
.flow__key {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.flow__sw { width: 16px; height: 3px; display: block; flex: none; }
.flow__sw--product { background: var(--brand-green); }
.flow__sw--ctx     { background: var(--ink-muted); }
.flow__sw--tap     { background: var(--brand-amber); width: 9px; height: 9px; }
.flow__sw--bios    { background: var(--brand-blue);  width: 9px; height: 9px; }

/* The streams draw themselves in once, on first view — animating the drawing
   of a diagram is honest in a way animating a value is not (§11.1). */
@media (prefers-reduced-motion: no-preference) {
  .flow__stream path {
    stroke-dasharray: var(--len, 400);
    stroke-dashoffset: var(--len, 400);
  }
  .flow.is-drawn .flow__stream path {
    animation: flow-draw 900ms cubic-bezier(.2,0,0,1) forwards;
  }
  .flow.is-drawn .flow__stream path:nth-child(2) { animation-delay: 180ms; }
  .flow.is-drawn .flow__stream path:nth-child(3),
  .flow.is-drawn .flow__stream path:nth-child(4) { animation-delay: 340ms; }

  .flow__tap rect, .flow__bios rect, .flow__biosline path { opacity: 0; }
  .flow.is-drawn .flow__tap rect,
  .flow.is-drawn .flow__bios rect,
  .flow.is-drawn .flow__biosline path {
    animation: flow-pop 200ms cubic-bezier(.2,0,0,1) 900ms forwards;
  }
}
@keyframes flow-draw { to { stroke-dashoffset: 0; } }
@keyframes flow-pop  { to { opacity: 1; } }

/* ==========================================================================
   46. Interaction craft
   The site was inert — cards had no hover state at all, and a page where
   nothing responds reads as flat regardless of how good the typography is.
   Depth still comes from colour and border, never from shadow (§7.2).
   ========================================================================== */
.card {
  transition: border-color 160ms cubic-bezier(.2,0,0,1),
              background-color 160ms cubic-bezier(.2,0,0,1),
              transform 160ms cubic-bezier(.2,0,0,1);
}
.card:hover {
  border-color: var(--brand-green);
  background: var(--btn-secondary-bg-hover);
  transform: translateY(-2px);
}
.section--deep .card:hover {
  border-color: #34C98A;
  background: rgba(52, 201, 138, .10);
}
.card__num { transition: color 160ms cubic-bezier(.2,0,0,1); }
.card:hover .card__num { color: var(--brand-green); }

/* Arrows lead the eye in the direction the link goes. */
.link-action .arrow,
.link-arrow .arrow,
a .arrow {
  display: inline-block;
  transition: transform 160ms cubic-bezier(.2,0,0,1);
}
a:hover .arrow { transform: translateX(4px); }

/* The section tick draws in with the heading rather than just appearing. */
@media (prefers-reduced-motion: no-preference) {
  .reveal .eyebrow::before,
  .section__head .eyebrow::before {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 320ms cubic-bezier(.2,0,0,1) 80ms;
  }
  .reveal--visible .eyebrow::before,
  .section__head.reveal--visible .eyebrow::before,
  .is-drawn .eyebrow::before { transform: scaleX(1); }
}

/* Statement bands get the same restrained grid the hero has, so a coloured
   ground reads as a surface rather than a flat fill. */
.statement-band { position: relative; }
.statement-band:not(.statement-band--image)::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 70% at 70% 0%, #000 20%, transparent 75%);
  pointer-events: none;
}
.statement-band .shell { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .card, .card__num, a .arrow { transition: none; }
  .card:hover { transform: none; }
}