/*
 * Hallmark · genre: modern-minimal · macrostructure: Narrative Workflow (14)
 * theme: studied-DNA (sources: usehallmark.com/hum-07 · pasturebird.com · thehappyegg.co.uk · boweryfarming.com)
 * nav: N5 Floating pill · footer: Ft2 Inline rule single-line
 * paper: oklch(100% 0 0) — white (user explicit) · accent: oklch(46% 0.13 148) moss green
 * display: Plus Jakarta Sans 700 · body: Plus Jakarta Sans 400/500 · label: JetBrains Mono 500
 * studied: yes · DNA-source: URL panel (4 sites)
 * contrast: pass (40–41) · slop: pass (1–57) · mobile: pass (34, 49, 50–57)
 * pre-emit critique: P5 H5 E5 S5 R5 V5
 */

/* ============================================================
   DESIGN TOKENS — white paper + moss accent + soft geometric
   ============================================================ */
:root {
  /* Paper — pure white as user requested */
  --color-paper:    oklch(100%   0      0);    /* white */
  --color-paper-2:  oklch(97%    0.004  80);   /* near-white, warm tint */
  --color-paper-3:  oklch(95%    0.006  80);   /* light hover surface */

  /* Ink */
  --color-ink:      oklch(14%    0.010  65);   /* near-black, warm */
  --color-ink-2:    oklch(22%    0.008  70);   /* secondary text — high contrast for readability */
  --color-muted:    oklch(38%    0.008  70);   /* caption / muted — high contrast for readability */
  --color-rule:     oklch(88%    0.005  75);   /* hairlines */
  --color-rule-2:   oklch(80%    0.006  75);   /* stronger borders */

  /* Accent — moss green, ≤5% of viewport */
  --color-accent:        oklch(46%   0.130  148);  /* primary */
  --color-accent-hover:  oklch(40%   0.115  148);  /* hover */
  --color-accent-light:  oklch(95%   0.040  148);  /* soft tint */
  --color-accent-ink:    oklch(100%  0      0);    /* text on accent fills */

  /* Gold — for badges, second accent */
  --color-gold:     oklch(72%   0.14   78);
  --color-gold-ink: oklch(28%   0.06   72);

  /* Focus */
  --color-focus:    oklch(50%   0.17   148);

  /* Typography */
  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body:    "Plus Jakarta Sans", system-ui, sans-serif;
  --font-label:   "JetBrains Mono", ui-monospace, monospace;

  /* Type scale — optimized for legibility (target audience 30-40+ years old) */
  --text-xs:       0.8125rem;  /* 13px */
  --text-sm:       0.875rem;   /* 14px */
  --text-base:     1.0625rem;  /* 17px */
  --text-md:       1.1875rem;  /* 19px */
  --text-lg:       1.375rem;   /* 22px */
  --text-xl:       1.75rem;    /* 28px */
  --text-2xl:      2.25rem;    /* 36px */
  --text-3xl:      clamp(2.5rem, 5vw + 1rem, 4.25rem);
  --text-display:  clamp(3rem,   7vw + 0.5rem, 5.5rem);

  /* Spacing — 4pt base */
  --space-3xs:  0.125rem;  /* 2px  */
  --space-2xs:  0.25rem;   /* 4px  */
  --space-xs:   0.5rem;    /* 8px  */
  --space-sm:   0.75rem;   /* 12px */
  --space-md:   1rem;      /* 16px */
  --space-lg:   1.5rem;    /* 24px */
  --space-xl:   2rem;      /* 32px */
  --space-2xl:  3rem;      /* 48px */
  --space-3xl:  5rem;      /* 80px */
  --space-4xl:  8rem;      /* 128px */

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro:   100ms;
  --dur-short:   200ms;
  --dur-med:     350ms;
  --dur-long:    500ms;

  /* Z-index */
  --z-base:     1;
  --z-raised:   10;
  --z-nav:      200;
  --z-toast:    400;

  /* Nav pill dimensions */
  --pill-h: 48px;
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--pill-h) + var(--space-xl));
  font-size: 16px;
}

body {
  overflow-x: clip;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.65;
  color: var(--color-ink);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
a { color: inherit; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ============================================================
   SKIP LINK
   ============================================================ */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-md);
  z-index: var(--z-toast);
  background: var(--color-ink);
  color: var(--color-paper);
  font-family: var(--font-label);
  font-size: var(--text-xs);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  text-decoration: none;
  letter-spacing: 0.04em;
}
.skip-link:focus { top: var(--space-md); }

/* ============================================================
   NAV — N5 Floating pill
   Visibly detached · blurred backdrop · rounded full
   ============================================================ */
.site-nav {
  position: fixed;
  top: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-nav);
  height: var(--pill-h);
  display: flex;
  align-items: center;
  gap: 0;
  background: oklch(100% 0 0 / 0.88);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-pill);
  padding: 0 var(--space-sm);
  box-shadow: 0 2px 16px oklch(14% 0.010 65 / 0.06),
              0 1px 4px  oklch(14% 0.010 65 / 0.04);
  white-space: nowrap;
  max-width: calc(100vw - var(--space-xl));
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  text-decoration: none;
  padding: 0 var(--space-sm);
  white-space: nowrap;
}

.nav-brand__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

.nav-sep {
  width: 1px;
  height: 20px;
  background: var(--color-rule-2);
  flex-shrink: 0;
}

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

.nav-link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-muted);
  text-decoration: none;
  padding: 0 var(--space-sm);
  height: var(--pill-h);
  display: flex;
  align-items: center;
  white-space: nowrap;
  border-radius: 0;
  transition: color var(--dur-micro) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .nav-link:hover { color: var(--color-ink); }
}

.nav-link--active { color: var(--color-ink); font-weight: 500; }

.nav-actions {
  display: flex;
  align-items: center;
  padding-left: var(--space-xs);
}

/* Mobile burger — shown on narrow viewports */
.nav-burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-xs);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  width: 36px;
  height: 36px;
}

.nav-burger__bar {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--color-ink);
  border-radius: 1px;
  transition: transform var(--dur-short) var(--ease-out),
              opacity var(--dur-short) var(--ease-out);
}

/* Mobile menu sheet */
.nav-sheet {
  display: none;
  position: fixed;
  top: calc(var(--pill-h) + var(--space-md) + var(--space-xs));
  left: var(--space-md);
  right: var(--space-md);
  z-index: calc(var(--z-nav) - 1);
  background: var(--color-paper);
  border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  flex-direction: column;
  gap: 0;
  box-shadow: 0 8px 40px oklch(14% 0.010 65 / 0.12);
}

.nav-sheet--open { display: flex; }

.nav-sheet__link {
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--color-ink);
  text-decoration: none;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-sheet__wa {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  transition: transform var(--dur-short) var(--ease-out),
              background var(--dur-micro) var(--ease-out),
              box-shadow var(--dur-short) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out);
}

.btn:active { transform: translateY(1px); }

/* Primary — filled green pill */
.btn--primary {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-size: var(--text-sm);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-pill);
}

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover {
    background: var(--color-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px oklch(46% 0.13 148 / 0.25);
  }
}

/* Ghost — outlined */
.btn--ghost {
  background: transparent;
  color: var(--color-ink);
  font-size: var(--text-sm);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-rule-2);
}

@media (hover: hover) and (pointer: fine) {
  .btn--ghost:hover {
    border-color: var(--color-ink);
    transform: translateY(-1px);
  }
}

/* Large variant */
.btn--lg {
  font-size: var(--text-base);
  padding: var(--space-md) var(--space-2xl);
}

/* Nav pill CTA */
.btn--nav {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px var(--space-md);
  border-radius: var(--radius-pill);
}

@media (hover: hover) and (pointer: fine) {
  .btn--nav:hover {
    background: var(--color-accent-hover);
    transform: translateY(-1px);
  }
}

/* ============================================================
   LAYOUT
   ============================================================ */
.container {
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: var(--space-xl);
}

.container--narrow { max-width: 52rem; }
.container--mid    { max-width: 64rem; }

/* Offset for the floating pill nav */
main { padding-top: calc(var(--pill-h) + var(--space-2xl)); }

/* Section base */
.section { padding-block: var(--space-3xl); }
.section--alt { background: var(--color-paper-2); }

/* Section label + heading (vertical stack only — gate 54) */
.section-header {
  margin-bottom: var(--space-2xl);
}

.section-label {
  display: block;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  font-style: normal;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--color-ink);
  overflow-wrap: anywhere;
  min-width: 0;
}

.section-sub {
  margin-top: var(--space-md);
  font-size: var(--text-md);
  font-weight: 400;
  color: var(--color-ink-2);
  line-height: 1.6;
  max-width: 48ch;
}

/* ============================================================
   HERO — H1 Marquee opening
   Large statement + process dots + CTA
   ============================================================ */
.hero {
  padding-top: var(--space-4xl);
  padding-bottom: var(--space-3xl);
}

/* Process dots row — above the headline */
.hero-process {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
}

.hero-stage {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-muted);
  letter-spacing: 0.06em;
}

.hero-stage__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.hero-stage__dot--a { background: var(--color-accent); }
.hero-stage__dot--b { background: oklch(65% 0.12 148); }
.hero-stage__dot--c { background: var(--color-gold); }
.hero-stage__dot--d { background: oklch(55% 0.08 75); }

.hero-stage-link {
  width: var(--space-xl);
  height: 1px;
  background: var(--color-rule-2);
}

/* Headline */
.hero-headline {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 700;
  font-style: normal;
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: var(--color-ink);
  max-width: 14ch;
  overflow-wrap: anywhere;
  min-width: 0;
  margin-bottom: var(--space-xl);
}

.hero-headline__accent {
  color: var(--color-accent);
  font-style: normal;
}

/* Lede + CTA row */
.hero-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: end;
  max-width: 72rem;
}

.hero-lede {
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--color-ink-2);
  line-height: 1.55;
  max-width: 40ch;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}

.hero-trust {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--space-xs);
}

.hero-trust__item {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-label);
  font-size: var(--text-xs);
  color: var(--color-muted);
  letter-spacing: 0.04em;
}

.hero-trust__check {
  width: 14px;
  height: 14px;
  color: var(--color-accent);
  flex-shrink: 0;
}

/* Hero divider */
.hero-divider {
  width: 100%;
  height: 1px;
  background: var(--color-rule);
  margin-top: var(--space-3xl);
}

/* ============================================================
   HERO PHOTO PANEL — below the text fold
   ============================================================ */
.hero-photo {
  padding-block: var(--space-xl) var(--space-3xl);
}

.hero-photo__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-md);
  height: 420px;
}

.hero-photo__cell {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}

.hero-photo__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-photo__caption {
  position: absolute;
  bottom: var(--space-md);
  left: var(--space-md);
  font-family: var(--font-label);
  font-size: var(--text-xs);
  color: var(--color-paper);
  background: oklch(14% 0.010 65 / 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 3px var(--space-sm);
  border-radius: var(--radius-pill);
  letter-spacing: 0.04em;
}

/* ============================================================
   NARRATIVE WORKFLOW — 5 Stages
   Numbered vertical timeline, photo alternating
   ============================================================ */
.workflow {
  padding-block: var(--space-3xl);
}

.workflow__stages {
  display: flex;
  flex-direction: column;
}

.stage {
  display: grid;
  grid-template-columns: 64px 1fr 1fr;
  gap: var(--space-xl);
  align-items: stretch;
  padding-block: var(--space-2xl);
  border-top: 1px solid var(--color-rule);
}

.stage:last-child { border-bottom: 1px solid var(--color-rule); }

/* Number rail */
.stage__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--space-xs);
}

.stage__node {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--color-rule-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-muted);
  background: var(--color-paper);
  flex-shrink: 0;
  transition: background var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out);
}

.stage--active .stage__node {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}

.stage__line {
  width: 1px;
  flex: 1;
  background: var(--color-rule);
  margin-top: var(--space-sm);
}

/* Stage body */
.stage__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-md);
  padding-right: var(--space-xl);
}

.stage__label {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-muted);
}

.stage__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  font-style: normal;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  overflow-wrap: anywhere;
  min-width: 0;
}

.stage__text {
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--color-ink-2);
  line-height: 1.7;
  max-width: 46ch;
}

.stage__chips {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-ink-2);
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-pill);
  padding: var(--space-2xs) var(--space-sm);
  white-space: nowrap;
}

.chip__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

/* Stage visual */
.stage__visual {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-paper-3);
  align-self: center;
}

.stage__img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}

/* ============================================================
   PRODUCT GRID — Egg variants
   ============================================================ */
.products {
  padding-block: var(--space-3xl);
  background: var(--color-paper-2);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}

.product-card {
  background: var(--color-paper);
  border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--dur-short) var(--ease-out),
              transform var(--dur-short) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .product-card:hover {
    box-shadow: 0 8px 32px oklch(14% 0.010 65 / 0.08);
    transform: translateY(-2px);
  }
}

.product-card__img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.product-card__body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1;
}

.product-card__badge {
  display: inline-block;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  background: var(--color-accent-light);
  color: var(--color-accent);
  border-radius: var(--radius-pill);
  padding: 3px var(--space-sm);
  align-self: flex-start;
}

.product-card__badge--gold {
  background: oklch(96% 0.04 78);
  color: var(--color-gold-ink);
}

.product-card__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.product-card__desc {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-ink-2);
  line-height: 1.65;
  flex: 1;
}

.product-card__specs {
  border-top: 1px solid var(--color-rule);
  padding-top: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.product-card__spec {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2xs) 0;
  font-size: var(--text-xs);
}

.spec-key {
  font-family: var(--font-label);
  font-weight: 400;
  color: var(--color-muted);
  letter-spacing: 0.04em;
}

.spec-val {
  font-weight: 500;
  color: var(--color-ink);
}

.product-card__cta {
  margin-top: var(--space-sm);
}

/* ============================================================
   AUDIENCE SPLIT — Home / Business
   ============================================================ */
.audience {
  padding-block: var(--space-3xl);
}

.audience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.audience-card {
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.audience-card--light {
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule-2);
}

.audience-card--accent {
  background: var(--color-accent-light);
  border: 1.5px solid oklch(88% 0.04 148);
}

.audience-card__label {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-accent);
}

.audience-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  font-style: normal;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.audience-card__desc {
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--color-ink-2);
  line-height: 1.6;
  flex: 1;
}

.audience-card__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.audience-card__list li {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-ink-2);
  padding-block: var(--space-xs);
  border-bottom: 1px solid var(--color-rule);
}

.audience-card__list li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

/* ============================================================
   LAB TEST & TRANSPARENCY
   ============================================================ */
.lab-section {
  padding-block: var(--space-3xl);
}

/* Farm Authority & Insights Section */
.farm-insights {
  background: var(--color-paper);
  padding-block: var(--space-3xl);
}

.farm-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

@media (max-width: 56.25rem) {
  .farm-pillars-grid {
    grid-template-columns: 1fr;
  }
}

.farm-pillar-card {
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: all var(--dur-short) var(--ease-out);
}

.farm-pillar-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px oklch(14% 0.01 65 / 0.06);
}

.farm-pillar-card__icon {
  font-size: var(--text-2xl);
  display: block;
  margin-bottom: var(--space-sm);
}

.farm-pillar-card__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: var(--space-xs);
}

.farm-pillar-card__desc {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  line-height: 1.6;
  margin: 0;
}

/* Farm Comparison Component */
.farm-compare-wrap {
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: 0 4px 20px oklch(14% 0.01 65 / 0.04);
}

.farm-compare-header {
  margin-bottom: var(--space-lg);
}

.farm-compare-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: var(--space-2xs);
}

.farm-compare-desc {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin: 0;
}

.farm-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.farm-compare-table th,
.farm-compare-table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-rule-2);
  text-align: left;
}

.farm-compare-table th {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  background: var(--color-paper-3);
}

.text-green {
  color: oklch(46% 0.13 148);
}

/* Lab Switcher (Tabs & Journey Steps) */
.lab-journey {
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-bottom: var(--space-xl);
  max-width: 58rem;
  margin-inline: auto;
  box-shadow: 0 4px 20px oklch(14% 0.010 65 / 0.04);
}

.lab-journey__header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.lab-journey__tag {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 600;
  display: block;
  margin-bottom: var(--space-2xs);
}

.lab-journey__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-ink);
}

.lab-journey__timeline {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: var(--space-sm);
}

@media (max-width: 48rem) {
  .lab-journey__timeline {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
  .lab-journey__connector {
    display: none;
  }
}

.lab-journey__step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  background: var(--color-paper);
  border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  cursor: pointer;
  transition: all var(--dur-short) var(--ease-out);
  width: 100%;
}

.lab-journey__step:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.lab-journey__step.is-active {
  border-color: var(--color-accent);
  background: oklch(98% 0.01 90);
  box-shadow: 0 4px 12px oklch(14% 0.01 65 / 0.08);
}

.lab-journey__step-num {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  background: var(--color-paper-3);
  color: var(--color-ink-2);
  padding: 4px 7px;
  border-radius: var(--radius-sm);
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.lab-journey__step-num--highlight {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.lab-journey__step-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lab-journey__step-date {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.lab-journey__step-name {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
}

.lab-journey__step-desc {
  font-size: 12px;
  color: var(--color-ink-2);
  line-height: 1.35;
  margin: 0;
}

.lab-journey__connector {
  font-size: var(--text-md);
  color: var(--color-muted);
  user-select: none;
}

/* Lab Tab Switcher */
.lab-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
}

.lab-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-2);
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-md);
  cursor: pointer;
  transition: all var(--dur-short) var(--ease-out);
}

.lab-tab:hover {
  border-color: var(--color-accent);
  color: var(--color-ink);
}

.lab-tab.is-active {
  background: var(--color-ink);
  color: var(--color-paper);
  border-color: var(--color-ink);
  box-shadow: 0 2px 8px oklch(14% 0.010 65 / 0.12);
}

.lab-tab__badge {
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 600;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.lab-tab-panel {
  display: none;
  max-width: 52rem;
  margin-inline: auto;
}

.lab-tab-panel.is-active {
  display: block;
  animation: labFadeIn var(--dur-med) var(--ease-out);
}

@keyframes labFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.lab-summary-text {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  line-height: 1.6;
}

.proof-date-badge--muted {
  background: var(--color-paper-3);
  color: var(--color-muted);
  border-color: var(--color-rule-2);
}

.proof-card__action {
  margin-top: var(--space-xs);
  padding-top: var(--space-md);
  border-top: 1px dashed var(--color-rule-2);
}

.lab-action-banner {
  margin-top: var(--space-2xl);
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
}

.lab-action-banner__content {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  max-width: 44rem;
}

.lab-action-banner__icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.lab-action-banner__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-ink);
  display: block;
  margin-bottom: var(--space-2xs);
}

.lab-action-banner__desc {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  line-height: 1.5;
}

@media (max-width: 56.25rem) {
  .lab-action-banner {
    flex-direction: column;
    align-items: flex-start;
  }
}

.proof {
  padding-block: var(--space-3xl);
  background: var(--color-paper-2);
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}

.proof-grid--3col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.proof-card {
  background: var(--color-paper);
  border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.proof-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  font-style: normal;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

.proof-placeholder {
  background: var(--color-paper-2);
  border: 2px dashed var(--color-rule-2);
  border-radius: var(--radius-md);
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}

.proof-placeholder__text {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  color: var(--color-muted);
  text-align: center;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.proof-card__note {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-muted);
  line-height: 1.55;
  font-style: italic;
}

.proof-meta {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  color: var(--color-muted);
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--color-paper-2);
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-rule-2);
}

.proof-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-xs);
  margin-block: var(--space-xs);
}

.proof-table th,
.proof-table td {
  padding: var(--space-xs) var(--space-sm);
  text-align: left;
  border-bottom: 1px solid var(--color-rule);
}

.proof-table th {
  font-family: var(--font-label);
  font-weight: 500;
  color: var(--color-muted);
}

.proof-table td {
  font-weight: 400;
  color: var(--color-ink);
}

.proof-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.proof-date-badge {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-accent);
  background: var(--color-accent-light);
  border: 1px solid oklch(46% 0.13 148 / 0.2);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.proof-badge {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 500;
  color: var(--color-accent);
  background: var(--color-accent-light);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

.proof-badge--green {
  background: oklch(92% 0.06 148);
  color: oklch(35% 0.14 148);
}

.proof-explanation {
  border-top: 1px solid var(--color-rule-2);
  padding-top: var(--space-md);
  margin-top: var(--space-xs);
}

.proof-explanation__title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: var(--space-sm);
}

.proof-explanation__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.proof-explanation__list li {
  display: flex;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-ink-2);
  line-height: 1.5;
}

.proof-explanation__icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  line-height: 1;
}

/* ============================================================
   FAQ — accordion
   ============================================================ */
.faq { padding-block: var(--space-3xl); }

.faq-list { border-top: 1px solid var(--color-rule-2); }

.faq-item { border-bottom: 1px solid var(--color-rule); }

.faq-question {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-ink);
  cursor: pointer;
  padding: var(--space-lg) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-lg);
  list-style: none;
  user-select: none;
  transition: color var(--dur-micro) var(--ease-out);
  line-height: 1.4;
}

.faq-question::-webkit-details-marker { display: none; }

.faq-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--color-rule-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: var(--text-md);
  font-weight: 400;
  color: var(--color-muted);
  transition: transform var(--dur-short) var(--ease-out),
              background var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
  line-height: 1;
}

.faq-item[open] .faq-icon {
  transform: rotate(45deg);
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}

@media (hover: hover) and (pointer: fine) {
  .faq-question:hover { color: var(--color-accent); }
}

.faq-answer {
  padding-bottom: var(--space-xl);
}

.faq-answer p {
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--color-ink-2);
  line-height: 1.7;
  max-width: 58ch;
}

/* ============================================================
   FINAL CTA — inline form style
   ============================================================ */
.final-cta {
  padding-block: var(--space-4xl);
  border-top: 1px solid var(--color-rule);
  text-align: center;
}

.final-cta__eyebrow {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: var(--space-lg);
  display: block;
}

.final-cta__headline {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  font-style: normal;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-ink);
  max-width: 14ch;
  margin-inline: auto;
  margin-bottom: var(--space-xl);
  overflow-wrap: anywhere;
  min-width: 0;
}

.final-cta__sub {
  font-size: var(--text-md);
  font-weight: 400;
  color: var(--color-ink-2);
  max-width: 38ch;
  margin-inline: auto;
  line-height: 1.55;
  margin-bottom: var(--space-2xl);
}

.final-cta__actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}

/* ============================================================
   FOOTER — Ft2 Inline rule single-line
   ============================================================ */
.site-footer {
  border-top: 1px solid var(--color-rule-2);
  padding-block: var(--space-xl);
}

.footer-inner {
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  flex-wrap: wrap;
}

.footer-brand {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-ink);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  text-decoration: none;
}

.footer-brand__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.footer-link {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-micro) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .footer-link:hover { color: var(--color-ink); }
}

.footer-copy {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  color: var(--color-muted);
  letter-spacing: 0.02em;
}

/* ============================================================
   WA FLOAT — mobile/tablet
   ============================================================ */
.wa-float {
  position: fixed;
  bottom: max(var(--space-lg), env(safe-area-inset-bottom));
  right: var(--space-lg);
  z-index: var(--z-toast);
  display: none;
}

.wa-float__btn {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  text-decoration: none;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 4px 20px oklch(46% 0.13 148 / 0.3);
  transition: transform var(--dur-short) var(--ease-out),
              box-shadow var(--dur-short) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .wa-float__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px oklch(46% 0.13 148 / 0.35);
  }
}

/* ============================================================
   PARTNERS — brand logo/name grid
   ============================================================ */
.partners {
  padding-block: var(--space-3xl);
}

.partners-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}

.partner-item {
  list-style: none;
  flex: 0 0 auto;
}

.partner-card {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  background: var(--color-paper);
  border: 1.5px solid var(--color-rule-2);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color var(--dur-short) var(--ease-out),
              box-shadow   var(--dur-short) var(--ease-out),
              transform    var(--dur-short) var(--ease-out);
  min-width: 100px;
}

@media (hover: hover) and (pointer: fine) {
  .partner-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 4px 16px oklch(46% 0.13 148 / 0.10);
    transform: translateY(-2px);
  }
}

.partner-card--plain {
  cursor: default;
  border-style: dashed;
}

.partner-card--plain:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--color-rule-2);
}

.partner-card__name {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.3;
  white-space: nowrap;
}

.partner-card__handle {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-muted);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.partner-card:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.partners-note {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-muted);
}

.partners-note__link {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 500;
  transition: opacity var(--dur-micro) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .partners-note__link:hover { opacity: 0.75; }
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-long) var(--ease-out),
              transform var(--dur-long) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 60ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ============================================================
   RESPONSIVE — TABLET (≤ 900px)
   ============================================================ */
@media (max-width: 56.25rem) {

  /* Nav pill collapses */
  .nav-links { display: none; }
  .nav-sep + .nav-links { display: none; }
  .nav-actions { display: none; }
  .nav-burger { display: flex; }

  /* Hero */
  .hero-headline { max-width: 100%; }
  .hero-bottom { grid-template-columns: 1fr; gap: var(--space-xl); }

  /* Photo grid */
  .hero-photo__grid {
    grid-template-columns: 1fr 1fr;
    height: auto;
  }
  .hero-photo__grid > :nth-child(1) { grid-column: 1 / -1; height: 240px; }
  .hero-photo__grid > :nth-child(2),
  .hero-photo__grid > :nth-child(3) { height: 160px; }

  /* Workflow */
  .stage {
    grid-template-columns: 44px 1fr;
  }
  .stage__visual { display: none; }

  /* Product grid */
  .product-grid { grid-template-columns: 1fr 1fr; }

  /* Audience */
  .audience-grid { grid-template-columns: 1fr; }

  /* Proof & Lab grid */
  .lab-grid,
  .proof-grid,
  .proof-grid--3col { grid-template-columns: 1fr; }

  /* WA float on tablet */
  .wa-float { display: block; }
}

/* ============================================================
   RESPONSIVE — MOBILE (≤ 640px)
   ============================================================ */
@media (max-width: 40rem) {

  :root {
    --space-3xl: 3.5rem;
    --space-4xl: 5rem;
    --pill-h: 44px;
  }

  .container { padding-inline: var(--space-md); }

  main { padding-top: calc(var(--pill-h) + var(--space-xl)); }

  /* Hero */
  .hero { padding-top: var(--space-3xl); }
  .hero-process { gap: var(--space-sm); }
  .hero-stage-link { width: var(--space-md); }
  .hero-actions { width: 100%; }
  .hero-actions .btn { width: 100%; justify-content: center; }

  /* Photo grid — single column */
  .hero-photo__grid {
    grid-template-columns: 1fr;
    height: auto;
  }
  .hero-photo__grid > * { height: 220px; }

  /* Workflow — single column */
  .stage { grid-template-columns: 36px 1fr; gap: var(--space-md); }
  .stage__node { width: 36px; height: 36px; }
  .stage__body { padding-right: 0; }

  /* Product grid — single column */
  .product-grid { grid-template-columns: 1fr; }

  /* Nav pill — narrower */
  .site-nav { top: var(--space-sm); padding: 0 var(--space-xs); }
  .nav-brand__name { display: none; }

  /* Footer */
  .footer-inner { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
  .footer-links { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }

  /* Lab Section Mobile Polish */
  .lab-journey { padding: var(--space-md); }
  .lab-action-banner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-md);
    padding: var(--space-md);
  }
  .lab-action-banner .btn {
    width: 100%;
    justify-content: center;
  }
  .proof-table th,
  .proof-table td {
    padding: var(--space-2xs) var(--space-xs);
    font-size: 11.5px;
  }
  .proof-card {
    padding: var(--space-md);
  }
}

/* ============================================================
   TOUCH TARGETS
   ============================================================ */
@media (pointer: coarse) {
  .btn, .nav-link, .faq-question, .footer-link, .nav-sheet__link {
    min-height: 44px;
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  .reveal {
    transition: opacity 150ms linear;
    transform: none !important;
  }
  html { scroll-behavior: auto; }
}