@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=EB+Garamond:ital@0;1&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg: #fffdeb;
  --bg-card: #fffdeb;
  --ink: #1a1a1a;
  --ink-dim: #6b6b60;
  --ink-faint: #8a8a80;
  --border: #e4e4d0;
  --accent: #cfa6ff;
  --accent-soft: #f0d7ff;
  --accent-dark: #0f3a34;
  --dark: #141310;
  --serif: 'EB Garamond', Georgia, serif;
  --sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- nav ---------- */

.nav-wrap {
  position: sticky;
  top: 0.9rem;
  z-index: 10;
  display: flex;
  justify-content: center;
  padding: 0 1.2rem;
}

.nav {
  width: 100%;
  max-width: 68rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 999px;
  padding: 0.6rem 0.6rem 0.6rem 1.1rem;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.nav-brand img {
  height: 28px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.9rem;
  list-style: none;
}

.nav-links a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
}

.nav-links a:hover {
  color: var(--ink-dim);
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  padding: 5.5rem 1.5rem 6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  /* Wide enough that the headline's third beat holds on one line at the top of
     the clamp — .hero-sub keeps its own narrower measure below. */
  max-width: 64rem;
}

/* ---------- hero: seedling draw ---------- */

.sprout {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* Same rule as Wooly's coastline: sized to fit the hero whole. Any larger and
     it clips the bud at the top and the roots at the bottom, which reads as a
     broken image rather than a deliberate bleed. */
  height: 96%;
  width: auto;
  /* Faint on purpose: the headline sits on top of it, and ink-on-ink at full
     strength made the middle line unreadable. Lower than Wooly's 0.3 because
     this stroke is heavier (2.2 vs 1.2) and the stem runs vertically straight
     through the centre of the headline rather than around it. */
  opacity: 0.22;
}

.sprout-line {
  fill: none;
  stroke: var(--ink);
  /* Heavier than Wooly's 1.2 coastline: this viewBox is scaled up more, so a
     hairline stroke all but vanished at 0.3 opacity. */
  stroke-width: 2.2;
  stroke-linejoin: round;
  stroke-linecap: round;
  /* --len is each path's measured length, written inline per path, so the dash
     animation covers exactly one lap with no guessing. */
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  /* 12s, down from Wooly's 19s. The delays below are scaled by the same ratio,
     so the parts still land in sequence rather than bunching up at the start. */
  animation: drawSprout 12s ease-in-out infinite;
}

/* Drawn in the order a seedling actually arrives — ground, roots, stem, leaves,
   and last the bud that hasn't opened yet. The bud is the point: the page is
   about something still growing, not something finished. */
.sprout-roots  { animation-delay: 0.5s; }
.sprout-stem   { animation-delay: 1.1s; }
.sprout-leaf-l { animation-delay: 1.9s; }
.sprout-leaf-r { animation-delay: 2.4s; }
.sprout-bud    { animation-delay: 2.9s; }

@keyframes drawSprout {
  0%   { stroke-dashoffset: var(--len); opacity: 1; }
  38%  { stroke-dashoffset: 0; opacity: 1; }
  88%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* The leaves fill once their outlines close. */
.sprout-glow path {
  fill: var(--accent);
  opacity: 0;
  animation: sproutGlow 12s ease-in-out infinite;
}

@keyframes sproutGlow {
  0%, 44%  { opacity: 0; }
  62%, 86% { opacity: 0.18; }
  100%     { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sprout-line { stroke-dashoffset: 0; animation: none; }
  .sprout-glow path { opacity: 0.14; animation: none; }
}

.hero-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.9rem, 7.6vw, 6rem);
  letter-spacing: -0.018em;
  /* Three short beats stacked tight — the density is what makes it land. */
  line-height: 1.0;
  margin-bottom: 1.6rem;
  color: var(--ink);
}

.hero-title .accent {
  font-style: italic;
  color: var(--ink);
  /* Lilac sits BEHIND the payoff line rather than tinting it: --accent on a
     cream background is too pale to hold as display type, so the swash carries
     the colour and the text keeps full ink contrast. */
  background-image: linear-gradient(transparent 64%, var(--accent-soft) 64%);
  background-repeat: no-repeat;
  padding: 0 0.08em 0.04em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.hero-sub {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--ink-dim);
  max-width: 34rem;
  margin: 0 auto 2.2rem;
}

.hero-ctas {
  display: flex;
  gap: 0.9rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.8rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  font-family: var(--sans);
}

.btn-primary {
  background: var(--accent-soft);
  color: var(--ink);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.btn-primary:hover {
  background: var(--accent);
  transform: translateY(-2px);
}

.btn-ghost {
  color: var(--ink);
  border: 1.5px solid var(--border);
  background: transparent;
}

.btn-ghost:hover {
  background: var(--bg-card);
  border-color: var(--ink-faint);
}

.btn-dark {
  background: var(--dark);
  color: #f4f1e8;
  border: 1px solid var(--dark);
}

.btn-dark:hover {
  background: #000;
  transform: translateY(-2px);
}

.hero-note {
  font-size: 0.88rem;
  color: var(--ink-faint);
  margin-bottom: 2.6rem;
}

.pipeline {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--ink-dim);
}

.pipeline-step code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.3rem 0.7rem;
}

.pipeline-arrow {
  margin-left: 0.5rem;
  color: var(--ink-faint);
}

/* ---------- logo showcase strip ---------- */

.showcase {
  margin: 0 1.5rem 5.5rem;
  background: var(--dark);
  border-radius: 28px;
  padding: 3.2rem 2rem;
  text-align: center;
  color: #f4f1e8;
}

.showcase h2 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  margin-bottom: 0.6rem;
}

.showcase p {
  color: rgba(244, 241, 232, 0.65);
  max-width: 30rem;
  margin: 0 auto 2.2rem;
}

.showcase-logo {
  width: 64px;
  height: auto;
  filter: invert(1);
  opacity: 0.92;
}

/* ---------- features ---------- */

.features {
  padding: 0 1.5rem 6rem;
  /* width:100% is load-bearing — .page is a column flexbox, and an auto cross-axis
     margin cancels the default stretch, so without it the section shrink-wraps to
     its content and lands at a different width than its neighbours. */
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  text-align: center;
}

.section-title {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 0.7rem;
  color: var(--ink);
}

.section-sub {
  color: var(--ink-dim);
  max-width: 38rem;
  margin: 0 auto 3rem;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.2rem;
  text-align: left;
}

/* ---------- chew flow animation ---------- */

.chew-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 3.4rem;
}

.chew-flow-stage {
  position: relative;
  width: 148px;
  height: 148px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chew-flow-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.6rem;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-faint);
  letter-spacing: 0.01em;
}

.chew-flow-arrow {
  font-size: 1.3rem;
  color: var(--ink-faint);
  flex-shrink: 0;
}

.chew-flow-arrow-v {
  display: none;
}

/* -- stage 1: messy chips feeding in -- */

.chew-flow-in {
  background: var(--bg-card);
}

.messy-chip {
  position: absolute;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--ink-dim);
  white-space: nowrap;
  opacity: 0;
  animation: chewFeed 3.2s linear infinite;
}

.messy-chip-1 { top: 18px;  left: 10px; transform: rotate(-6deg); animation-delay: -2.8s; }
.messy-chip-2 { top: 46px;  left: -6px; transform: rotate(4deg);  animation-delay: -2.1s; }
.messy-chip-3 { top: 76px;  left: 14px; transform: rotate(-3deg); animation-delay: -1.4s; }
.messy-chip-4 { top: 8px;   left: 34px; transform: rotate(5deg);  animation-delay: -0.7s; }
.messy-chip-5 { top: 60px;  left: 30px; transform: rotate(-5deg); animation-delay: 0s; }
.messy-chip-6 { top: 96px;  left: -2px; transform: rotate(3deg);  animation-delay: -3.5s; }

@keyframes chewFeed {
  0% { opacity: 0; transform: translateX(0) rotate(var(--rot, 0deg)); }
  8% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateX(78px) rotate(var(--rot, 0deg)); }
}

/* -- stage 2: chewing mouth -- */

.chew-flow-mouth {
  background: var(--dark);
}

.chew-mouth-logo {
  width: 62px;
  height: auto;
  filter: invert(1);
  transform-origin: 50% 65%;
  animation: chomp 1.3s ease-in-out infinite;
}

@keyframes chomp {
  0%, 100% { transform: scaleY(1) rotate(0deg); }
  50% { transform: scaleY(0.84) rotate(-2deg); }
}

.chew-crumb {
  position: absolute;
  top: 58%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  animation: crumbPop 1.3s ease-in infinite;
}

.chew-crumb-1 { --dx: -22px; animation-delay: 0s; }
.chew-crumb-2 { --dx: 4px; animation-delay: 0.2s; }
.chew-crumb-3 { --dx: 24px; animation-delay: 0.4s; }

@keyframes crumbPop {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 10px), 34px) scale(1); }
}

/* -- stage 3: clean series drawing out -- */

.chew-flow-out {
  background: var(--bg-card);
}

.chew-out-chart {
  width: 84%;
  height: 60%;
  overflow: visible;
}

.chew-out-line {
  fill: none;
  stroke: var(--accent-dark);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 170;
  stroke-dashoffset: 170;
  animation: drawLine 3.2s ease-in-out infinite;
}

.chew-out-dot {
  fill: var(--accent-dark);
  opacity: 0;
  animation: dotPulse 3.2s ease-in-out infinite;
}

@keyframes drawLine {
  0% { stroke-dashoffset: 170; }
  55% { stroke-dashoffset: 0; }
  90% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -170; }
}

@keyframes dotPulse {
  0%, 48% { opacity: 0; }
  58% { opacity: 1; }
  88% { opacity: 1; }
  96% { opacity: 0; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .messy-chip {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .chew-mouth-logo {
    animation: none;
  }

  .chew-crumb {
    display: none;
  }

  .chew-out-line {
    animation: none;
    stroke-dashoffset: 0;
  }

  .chew-out-dot {
    animation: none;
    opacity: 1;
  }
}

@media (max-width: 640px) {
  .chew-flow {
    flex-direction: column;
  }

  .chew-flow-arrow-h {
    display: none;
  }

  .chew-flow-arrow-v {
    display: block;
  }
}

.feature-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 1.9rem 1.6rem;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--ink-faint);
  box-shadow: 0 12px 28px rgba(20, 19, 16, 0.06);
}

.feature-icon {
  font-size: 1.6rem;
  margin-bottom: 0.9rem;
}

.feature-card h3 {
  font-family: var(--sans);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.feature-card p {
  color: var(--ink-dim);
  font-size: 0.95rem;
}

/* ---------- bring your own model ---------- */

.compare-grid {
  max-width: 50rem;
  margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.byom-showcase {
  margin-top: -1rem;
}

.code-block {
  max-width: 42rem;
  margin: 0 auto 1.4rem;
  background: var(--dark);
  border-radius: 18px;
  padding: 1.6rem 1.8rem;
  text-align: left;
  overflow-x: auto;
}

.code-block pre {
  margin: 0;
}

.code-block code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9rem;
  line-height: 1.7;
  color: #f4f1e8;
  white-space: pre;
}

.code-note {
  max-width: 42rem;
}

/* ---------- format strip ---------- */

.format-strip {
  margin: 0 1.5rem 5.5rem;
  background: var(--dark);
  border-radius: 28px;
  padding: 3.4rem 2.4rem;
  color: #f4f1e8;
}

.format-strip-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  max-width: 68rem;
  margin: 0 auto;
}

.format-strip h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.2vw, 2.3rem);
  line-height: 1.18;
  margin-bottom: 0.9rem;
}

.format-strip p {
  color: rgba(244, 241, 232, 0.68);
  margin-bottom: 1.6rem;
}

.format-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.4rem;
}

.format-badge {
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(244, 241, 232, 0.25);
  color: #f4f1e8;
}

.format-badge-light {
  border-color: rgba(26, 26, 26, 0.15);
  color: var(--ink);
}

.btn-on-dark {
  border-color: rgba(244, 241, 232, 0.3);
  color: #f4f1e8;
}

.btn-on-dark:hover {
  background: rgba(244, 241, 232, 0.1);
  border-color: rgba(244, 241, 232, 0.5);
}

.manifest-card {
  background: #1e1c17;
  border: 1px solid rgba(244, 241, 232, 0.12);
  border-radius: 18px;
  padding: 1.4rem 1.5rem;
}

.manifest-card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 0.9rem;
}

.manifest-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
}

.manifest-body {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  line-height: 1.65;
  color: rgba(244, 241, 232, 0.85);
  white-space: pre;
  overflow-x: auto;
  margin-bottom: 1.1rem;
}

.chew-bar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  border-top: 1px solid rgba(244, 241, 232, 0.1);
  padding-top: 0.9rem;
}

.chew-label {
  font-size: 0.8rem;
  color: rgba(244, 241, 232, 0.55);
}

.chew-bars {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 18px;
}

.chew-bar-line {
  width: 3px;
  height: 40%;
  background: var(--accent);
  border-radius: 2px;
  animation: chew 1.1s ease-in-out infinite;
}

@keyframes chew {
  0%, 100% { height: 25%; }
  50% { height: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .chew-bar-line { animation: none; height: 60%; }
}

/* ---------- stat section ---------- */

.stat-section {
  padding: 0 1.5rem 6rem;
  width: 100%;
  max-width: 60rem;
  margin: 0 auto;
  text-align: center;
}

.stat-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.2rem);
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}

.stat-underline {
  position: relative;
}

.stat-underline::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.08em;
  height: 0.32em;
  background: var(--accent-soft);
  z-index: -1;
}

.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem;
  margin-top: 2.6rem;
}

.stat-card {
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 2rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: left;
}

.stat-card-dark {
  background: var(--dark);
  border-color: var(--dark);
  color: #f4f1e8;
}

.stat-card-label {
  font-size: 0.9rem;
  color: var(--ink-faint);
}

.stat-card-dark .stat-card-label {
  color: rgba(244, 241, 232, 0.6);
}

.stat-card-value {
  font-family: var(--serif);
  font-size: 2rem;
}

/* ---------- tags section ---------- */

.tags-section {
  margin: 0 1.5rem 5.5rem;
  background: var(--dark);
  border-radius: 28px;
  padding: 3.4rem 2.4rem;
  color: #f4f1e8;
}

.tags-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem;
  max-width: 68rem;
  margin: 0 auto;
}

.tags-grid h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 2.5rem);
  line-height: 1.2;
  margin-bottom: 0.6rem;
}

.accent-italic {
  font-style: italic;
  color: var(--accent-soft);
}

.tags-sub {
  color: rgba(244, 241, 232, 0.6);
  margin-bottom: 1.6rem;
}

.tag-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.tag-pill {
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(244, 241, 232, 0.25);
}

.tags-side {
  border-top: 1px solid rgba(244, 241, 232, 0.15);
  padding-top: 1.6rem;
  align-self: start;
}

.tags-side h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.5rem;
  margin-bottom: 0.7rem;
}

.tags-side p {
  color: rgba(244, 241, 232, 0.68);
  margin-bottom: 1.4rem;
}

/* ---------- feature block ---------- */

.feature-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  width: 100%;
  max-width: 68rem;
  margin: 0 auto 6rem;
  padding: 0 1.5rem;
}

.feature-block-mock {
  background: var(--dark);
  border-radius: 20px;
  padding: 2.2rem;
}

.table-mock {
  background: #1e1c17;
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.table-mock-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}

.table-mock-head span {
  font-size: 0.78rem;
  color: rgba(244, 241, 232, 0.5);
}

.table-tag {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  text-align: center;
}

.table-tag-ok {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
}

.table-tag-warn {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

.feature-eyebrow {
  display: inline-block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.6rem;
  margin-bottom: 1rem;
}

.feature-block-body {
  color: var(--ink-dim);
  font-size: 1.05rem;
  margin-bottom: 1.6rem;
  max-width: 26rem;
}

/* ---------- mini features ---------- */

.mini-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  text-align: left;
}

.mini-feature h3 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

.mini-feature p {
  color: var(--ink-dim);
  font-size: 0.92rem;
  margin-bottom: 1.1rem;
}

.mini-card {
  background: var(--dark);
  border-radius: 14px;
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mini-chip {
  background: var(--accent-dark);
  color: #f4f1e8;
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  font-size: 0.82rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- cta band ---------- */

.cta-band {
  margin: 0 1.5rem 5.5rem;
  background: var(--accent-soft);
  border-radius: 28px;
  padding: 3.4rem 2rem;
  text-align: center;
}

.cta-band .format-badges {
  justify-content: center;
  margin-bottom: 1.6rem;
}

.cta-band h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.6vw, 2.4rem);
  margin-bottom: 0.7rem;
}

.cta-band p {
  color: var(--ink-dim);
  max-width: 32rem;
  margin: 0 auto 1.6rem;
}

.btn-cta-band {
  border-color: rgba(26, 26, 26, 0.2);
  background: var(--bg);
}

/* ---------- stats grid section ---------- */

.stats-grid-section {
  margin: 0 1.5rem 5.5rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.1rem;
  max-width: 68rem;
  margin: 0 auto;
}

.stat-tile {
  background: var(--accent-dark);
  color: #f4f1e8;
  border-radius: 18px;
  padding: 1.8rem 1.6rem;
  text-align: left;
}

.stat-tile-value {
  display: block;
  font-family: var(--serif);
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.stat-tile p {
  color: rgba(244, 241, 232, 0.75);
  font-size: 0.92rem;
}

/* ---------- final cta ---------- */

.final-cta {
  position: relative;
  margin: 0 1.5rem 5.5rem;
  background: var(--dark);
  border-radius: 28px;
  padding: 5rem 2rem;
  text-align: center;
  color: #f4f1e8;
  overflow: hidden;
}

.final-cta-dots {
  position: absolute;
  top: 0;
  right: 0;
  width: 220px;
  height: 220px;
  color: rgba(244, 241, 232, 0.35);
  pointer-events: none;
}

.final-cta h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  margin-bottom: 0.9rem;
}

.final-cta p {
  color: rgba(244, 241, 232, 0.7);
  max-width: 30rem;
  margin: 0 auto 1.8rem;
}

/* ---------- mega footer ---------- */

.mega-footer {
  border-top: 2px solid var(--border);
  padding: 4rem 1.5rem 2rem;
  max-width: 68rem;
  margin: 0 auto;
  width: 100%;
}

.footer-wordmark {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(3rem, 12vw, 7rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 1.6rem;
}

.footer-bottom {
  display: flex;
  gap: 0.5rem;
  color: var(--ink-dim);
  font-size: 0.85rem;
  border-top: 1px solid var(--border);
  padding-top: 1.4rem;
}

/* ---------- footer ---------- */

.footer {
  border-top: 2px solid var(--border);
  padding: 1.8rem;
  text-align: center;
  color: var(--ink-dim);
  font-size: 0.88rem;
}

.footer-brand {
  color: var(--ink);
  font-weight: 700;
}

.footer-sep {
  margin: 0 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@media (max-width: 720px) {
  .nav-links {
    display: none;
  }

  .format-strip-grid,
  .tags-grid,
  .feature-block {
    grid-template-columns: 1fr;
  }

  .tags-side {
    border-top: none;
    padding-top: 0;
  }
}

/* ==========================================================================
   Grow additions — everything above is Chewey's stylesheet with Wooly's hero
   swapped for the seedling draw. These extend it with the pieces Grow needs.

   Deliberately NO new colour tokens. Chewey, Wooly and Grow share one palette
   to the hex; Grow just leans on --accent-dark (the deep green already in the
   set) for its stat tiles and line art rather than introducing a second green.
   ========================================================================== */

/* The mark is an SVG of black line art on transparent, so Chewey's
   .showcase-logo / .chew-mouth-logo rules above already size and invert() it —
   same trick as wooly.png, no PNG required.
   Don't give those an explicit `display: block` — they centre by being inline
   inside a text-align: center parent, and blocking them pins them left. */

/* ---------- hero headline ---------- */

/* Four short beats rather than Chewey's three long ones. At the inherited
   clamp the benefit line ("Better harvests, better lessons,") overflowed and
   wrapped, orphaning a word onto its own line — which reads as a bug, not a
   line break. Smaller type and shorter beats mean every <br> is the only break
   that happens, at any width above the mobile breakpoint. */
.hero-title {
  font-size: clamp(2.4rem, 5.6vw, 4.4rem);
  line-height: 1.06;
}

/* Chewey's swash starts at 64% of the line box, which sits right at its looser
   leading. At Grow's line-height: 1.0 that lands below the baseline and reads
   as a detached bar floating under the text rather than a highlighter stroke
   through it. Pull it up into the lower third of the glyphs and close it off
   before the descender space so it doesn't reach the bottom of the line box. */
.hero-title .accent {
  background-image: linear-gradient(
    transparent 54%,
    var(--accent-soft) 54%,
    var(--accent-soft) 90%,
    transparent 90%
  );
}

/* ---------- flow A: the mark growing, mid-flow ---------- */

/* Stage 2 of "No signal required". Chewey chomps; Grow breathes — the same
   slot in the same diagram, doing the thing its own name implies. */
.grow-flow-mark {
  width: 62px;
  height: auto;
  filter: invert(1);
  transform-origin: 50% 78%;
  animation: growPulse 2.6s ease-in-out infinite;
}

@keyframes growPulse {
  0%, 100% { transform: scale(0.94); }
  50%      { transform: scale(1.04); }
}

/* -- stage 3: a tick closing inside a ring -- */

/* This slot used to hold a cloud with a line struck through it, meaning "no
   connection used". That claim isn't true yet — the models are hosted today —
   so the payoff of the flow is now the answer itself, not the absence of a
   network. Put the cloud back only when on-device is real. */
.grow-out-answer {
  width: 58%;
  height: 62%;
  overflow: visible;
}

.grow-answer-ring,
.grow-answer-tick {
  fill: none;
  stroke: var(--accent-dark);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The browser's measured length for this r=17 circle, so the dash covers
   exactly one lap. (2πr rounds to 107; getTotalLength reports 106.) */
.grow-answer-ring {
  stroke-dasharray: 106;
  stroke-dashoffset: 106;
  animation: drawRing 3.2s ease-in-out infinite;
}

.grow-answer-tick {
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  animation: drawAnswerTick 3.2s ease-in-out infinite;
}

@keyframes drawRing {
  0%   { stroke-dashoffset: 107; }
  45%  { stroke-dashoffset: 0; }
  92%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes drawAnswerTick {
  0%, 45% { stroke-dashoffset: 26; }
  64%     { stroke-dashoffset: 0; }
  92%     { stroke-dashoffset: 0; }
  100%    { stroke-dashoffset: 0; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .grow-flow-mark { animation: none; transform: none; }
  .grow-answer-ring, .grow-answer-tick { animation: none; stroke-dashoffset: 0; }
}

/* the question chips that feed into the flow read better a little wider than
   Chewey's short format chips */
.messy-chip-wide { font-size: 0.62rem; }

/* ---------- deployment / programme tiers ---------- */

.tier-list {
  list-style: none;
  margin-top: 1rem;
  display: grid;
  gap: 0.5rem;
}

.tier-list li {
  position: relative;
  padding-left: 1.2rem;
  font-size: 0.92rem;
  color: var(--ink-dim);
}

.tier-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--accent);
}

.tier-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.7rem;
}

/* ---------- the boundaries list — a plain ✕ row, cream on cream ---------- */

.nope-grid { display: grid; gap: 0.8rem; text-align: left; max-width: 46rem; margin: 0 auto; }

.nope-row {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 1rem 1.2rem;
  background: var(--bg-card);
}

.nope-x {
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-top: 0.15rem;
  background: var(--accent-soft);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 700;
}

.nope-row p { color: var(--ink-dim); font-size: 0.94rem; }
.nope-row strong { color: var(--ink); font-weight: 700; }

/* honesty note — deliberately plain, sits under a section that made a promise */
.plain-note {
  max-width: 38rem;
  margin: 2rem auto 0;
  color: var(--ink-faint);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
}

/* ---------- plain-english comparison: two journeys ---------- */

.journey-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
  margin-top: 3rem;
  text-align: left;
}

.journey {
  border: 1.5px solid var(--border);
  border-radius: 20px;
  background: var(--bg-card);
  padding: 1.6rem 1.5rem 1.4rem;
}

.journey-good {
  border-color: var(--accent);
}

.journey-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--ink);
}

.journey-tag-warn {
  background: var(--border);
  color: var(--ink-dim);
}

.journey h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.5rem;
  margin: 0.8rem 0 0;
}

/* -- the track: two ends joined by a wire a packet travels along -- */

.journey-track {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 1.6rem 0 1.4rem;
}

.journey-end {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
  width: 5.2rem;
}

.journey-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--ink-faint);
  background: var(--bg);
  margin-top: 4px;
}

.journey-dot-warn {
  border-color: #c98a00;
  background: #fdf0cf;
}

.journey-dot-good {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.journey-end-label {
  font-size: 0.7rem;
  line-height: 1.3;
  color: var(--ink-faint);
  text-align: center;
}

.journey-wire {
  position: relative;
  flex: 1;
  height: 12px;
  margin-top: 4px;
  display: flex;
  align-items: center;
}

/* The wire itself. Dashes read as distance; the far one is dashed wider so the
   two lanes are legible as "long trip" vs "no trip" without a caption. */
.journey-wire::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background-image: linear-gradient(to right, var(--ink-faint) 55%, transparent 55%);
  background-size: 9px 2px;
  opacity: 0.55;
}

.journey-wire-near::before {
  background-image: linear-gradient(to right, var(--accent) 60%, transparent 60%);
  background-size: 7px 2px;
  opacity: 1;
}

.journey-distance {
  position: absolute;
  left: 0;
  right: 0;
  top: 14px;
  text-align: center;
  font-size: 0.66rem;
  color: var(--ink-faint);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.journey-packet {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c98a00;
  /* Sets off and doesn't arrive — the offshore lane's failure mode is the trip
     itself, not the destination. */
  animation: packetStall 3.4s ease-in-out infinite;
}

.journey-packet-near {
  background: var(--accent);
  /* Barely travels at all: the model is already on the device, so this lane is
     a question crossing a few centimetres and coming straight back. */
  animation: packetShort 2.6s ease-in-out infinite;
}

@keyframes packetStall {
  0%   { left: 0; opacity: 0; transform: scale(0.6); }
  10%  { opacity: 1; transform: scale(1); }
  55%  { left: 62%; opacity: 1; }
  75%  { left: 62%; opacity: 0.25; }
  100% { left: 62%; opacity: 0.25; }
}

@keyframes packetShort {
  0%   { left: 0; opacity: 0; transform: scale(0.6); }
  15%  { opacity: 1; transform: scale(1); }
  45%  { left: calc(100% - 8px); opacity: 1; }
  80%  { left: 0; opacity: 1; }
  100% { left: 0; opacity: 0; transform: scale(0.6); }
}

.journey-points {
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.journey-points li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.92rem;
  color: var(--ink-dim);
}

.journey-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-faint);
}

.journey-good .journey-points li::before {
  background: var(--accent);
}

/* ---------- flow B: what "handed over" means ---------- */

.local-stage {
  background: var(--bg-card);
}

.local-stage-dark {
  background: var(--dark);
}

/* stage 1 — the partner's brief, written before any code exists */
.grow-brief {
  width: 62px;
  display: grid;
  gap: 5px;
  margin-bottom: 0.7rem;
}

.grow-brief-line {
  height: 5px;
  border-radius: 3px;
  background: var(--border);
  transform-origin: left;
  animation: briefWrite 3.4s ease-out infinite;
}

.grow-brief-line:nth-child(1) { width: 100%; }
.grow-brief-line:nth-child(2) { width: 78%;  animation-delay: 0.35s; }
.grow-brief-line:nth-child(3) { width: 90%;  animation-delay: 0.7s; }
.grow-brief-line:nth-child(4) { width: 54%;  background: var(--accent); animation-delay: 1.05s; }

@keyframes briefWrite {
  0%, 100% { transform: scaleX(0); opacity: 0; }
  18%, 82% { transform: scaleX(1); opacity: 1; }
}

/* stage 2 — building, same bar vocabulary as the audit card's inference meter */
.local-think {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 34px;
  margin-bottom: 0.7rem;
}

.local-think-bar {
  width: 5px;
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
  transform-origin: bottom;
  animation: thinkBar 1.1s ease-in-out infinite;
}

.local-think-bar:nth-child(2) { animation-delay: 0.12s; }
.local-think-bar:nth-child(3) { animation-delay: 0.24s; }
.local-think-bar:nth-child(4) { animation-delay: 0.36s; }
.local-think-bar:nth-child(5) { animation-delay: 0.48s; }

@keyframes thinkBar {
  0%, 100% { transform: scaleY(0.3); }
  50%      { transform: scaleY(1); }
}

/* stage 3 — a box drawing itself shut around a tick: the handover */
.grow-keep {
  width: 58%;
  height: 66%;
  overflow: visible;
}

.grow-keep-box,
.grow-keep-tick {
  fill: none;
  stroke: var(--accent-dark);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.grow-keep-box {
  stroke-dasharray: 108;
  stroke-dashoffset: 108;
  animation: drawKeep 3.4s ease-in-out infinite;
}

.grow-keep-tick {
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  animation: drawKeepTick 3.4s ease-in-out infinite;
}

@keyframes drawKeep {
  0%   { stroke-dashoffset: 108; }
  48%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}

@keyframes drawKeepTick {
  0%, 50% { stroke-dashoffset: 22; }
  68%     { stroke-dashoffset: 0; }
  100%    { stroke-dashoffset: 0; }
}

.local-notes {
  display: grid;
  gap: 0.7rem;
  max-width: 34rem;
  margin: 0 auto;
  text-align: left;
}

.local-note {
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 0.8rem 1.1rem;
  font-size: 0.94rem;
  color: var(--ink-dim);
  background: var(--bg-card);
}

.local-note strong {
  color: var(--ink);
  font-weight: 700;
}

.local-note-yes {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
}

/* ---------- funding note ---------- */

/* Sits at the bottom of the programme section. Bordered rather than filled so
   it reads as a disclosure, not another sales panel. */
.funding-note {
  max-width: 46rem;
  margin: 2.2rem auto 0;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 1.3rem 1.5rem;
  text-align: left;
}

.funding-note h3 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.funding-note p {
  color: var(--ink-dim);
  font-size: 0.92rem;
}

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

@media (prefers-reduced-motion: reduce) {
  .journey-packet,
  .journey-packet-near,
  .local-think-bar,
  .grow-brief-line,
  .grow-keep-box,
  .grow-keep-tick {
    animation: none;
  }
  /* Without motion each lane still has to say where it ended up. */
  .journey-packet { left: 62%; opacity: 0.25; }
  .journey-packet-near { left: 0; opacity: 1; }
  .local-think-bar { transform: scaleY(0.6); }
  .grow-brief-line { transform: scaleX(1); opacity: 1; }
  .grow-keep-box, .grow-keep-tick { stroke-dashoffset: 0; }
}

/* ---------- mobile menu ---------- */

/* The 720px rule above hides .nav-links and — until now — put nothing in its
   place, so on a phone the nav pill was a wordmark and nothing else. Every
   link out of a page was unreachable: /why-now.html had no route at all except
   one button halfway down the home page, and /privacy.html couldn't get back
   to anything. That is a Grow divergence from Chewey's stylesheet; the other
   sites still hide their links.

   No JavaScript, so this is the checkbox-and-label pattern: the checkbox is
   the state, the label is the button, and a sibling selector opens the panel.
   The checkbox stays focusable (opacity, not display:none) so the menu is
   reachable by keyboard, and the focus ring is drawn on the label.

   Known limitation: a same-page anchor does not close the panel, because
   nothing unchecks the box without a script. Navigating to another page does,
   since the checkbox resets on load. */

.nav-check {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.nav-burger {
  display: none;
  width: 42px;
  height: 42px;
  border: 2px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: none;
}

.nav-burger span {
  display: block;
  width: 16px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

@media (max-width: 720px) {
  .nav {
    position: relative;
  }

  .nav-burger {
    display: flex;
  }

  /* The 720px block above sets display:none; this overrides it for the open
     state, so both rules have to live at the same breadth. */
  .nav-links {
    display: none;
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    min-width: 13rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem;
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: 20px;
  }

  .nav-check:checked ~ .nav-links {
    display: flex;
  }

  .nav-links a {
    display: block;
    padding: 0.6rem 0.75rem;
    border-radius: 14px;
  }

  .nav-links a:hover {
    background: var(--accent-soft);
    color: var(--ink);
  }

  /* Open state: the outer bars cross, the middle one goes. */
  .nav-check:checked ~ .nav-burger span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .nav-check:checked ~ .nav-burger span:nth-child(2) {
    opacity: 0;
  }

  .nav-check:checked ~ .nav-burger span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .nav-check:focus-visible ~ .nav-burger {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-burger span {
    transition: none;
  }
}