@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: coastline draw ---------- */

.nz-outline {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* Fits the whole country inside the hero. Any larger and it clips Cape Reinga
     at the top and Stewart Island at the bottom, which reads as a broken image
     rather than a deliberate bleed. */
  height: 98%;
  width: auto;
  /* Faint on purpose: the headline sits on top of it, and ink-on-ink at full
     strength made the middle line unreadable. */
  opacity: 0.3;
}

.nz-line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.2;
  stroke-linejoin: round;
  stroke-linecap: round;
  /* --len is each island's measured path length, written inline per path, so
     the dash animation covers exactly one lap with no guessing. */
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  animation: drawNZ 19s ease-in-out infinite;
}

/* Islands draw north to south, the way you'd trace them by hand. */
.nz-south   { animation-delay: 1.4s; }
.nz-stewart { animation-delay: 2.6s; }

@keyframes drawNZ {
  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 country fills once the outline closes — "here" without pinning a city we
   haven't chosen a data centre in yet. */
.nz-glow path {
  fill: var(--accent);
  opacity: 0;
  animation: nzGlow 19s ease-in-out infinite;
}

@keyframes nzGlow {
  0%, 36%   { opacity: 0; }
  56%, 86%  { opacity: 0.18; }
  100%      { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nz-line { stroke-dashoffset: 0; animation: none; }
  .nz-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;
  }
}

/* ==========================================================================
   Wooly additions — everything above is Chewey's stylesheet, unchanged.
   These extend it with the few pieces Wooly needs that Chewey didn't have.
   ========================================================================== */

/* The mark is a PNG like Chewey's, so .showcase-logo / .chew-mouth-logo above
   already size and invert() it — nothing to add. wooly.png is black line art on
   transparent, which is what makes Chewey's invert() trick work unchanged on
   the dark sections. The hero no longer carries the mark at all; the coastline
   draw took its place, and .hero-logo went with it.
   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. */

/* stage 3 of the flow: a shield drawing itself closed, reusing the same
   dash-offset trick as Chewey's chart line but with this path's length */
.chew-out-shield {
  width: 60%;
  height: 70%;
  overflow: visible;
}

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

.chew-shield-tick {
  fill: none;
  stroke: var(--accent-dark);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 14;
  stroke-dashoffset: 14;
  animation: drawTick 3.2s ease-in-out infinite;
}

@keyframes drawShield {
  0% { stroke-dashoffset: 96; }
  45% { stroke-dashoffset: 0; }
  92% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes drawTick {
  0%, 45% { stroke-dashoffset: 14; }
  62% { stroke-dashoffset: 0; }
  92% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .chew-shield-line, .chew-shield-tick { animation: none; stroke-dashoffset: 0; }
}

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

/* model list — same shape as .tag-pill but sits on the cream background */
.model-pills { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }

.model-pill {
  font-size: 0.86rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--bg-card);
}

.model-pill em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ink-faint);
  margin-left: 0.4rem;
}

/* deployment tiers — feature-card with a list */
.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 the compliance section */
.plain-note {
  max-width: 38rem;
  margin: 2rem auto 0;
  font-size: 0.88rem;
  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 "short 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;
  /* Travels one way and stays gone — the point of the offshore lane is that
     what leaves does not come back. */
  animation: packetAway 3.4s ease-in-out infinite;
}

.journey-packet-near {
  background: var(--accent);
  /* Goes, answers, and is gone — a round trip that ends in nothing retained. */
  animation: packetReturn 2.6s ease-in-out infinite;
}

@keyframes packetAway {
  0%   { left: 0; opacity: 0; transform: scale(0.6); }
  10%  { opacity: 1; transform: scale(1); }
  70%  { left: calc(100% - 8px); opacity: 1; }
  85%  { left: calc(100% - 8px); opacity: 0.35; }
  100% { left: calc(100% - 8px); opacity: 0.35; }
}

@keyframes packetReturn {
  0%   { left: 0; opacity: 0; transform: scale(0.6); }
  12%  { 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);
}

/* ---------- what "local" means ---------- */

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

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

.local-rack {
  width: 66px;
  height: 66px;
  margin-bottom: 0.7rem;
}

.local-rack-body,
.local-rack-slot {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
}

.local-rack-slot {
  stroke: var(--ink-faint);
}

.local-rack-led {
  fill: var(--accent);
  animation: ledBlink 2.4s ease-in-out infinite;
}

@keyframes ledBlink {
  0%, 45%, 100% { opacity: 1; }
  55%, 90% { opacity: 0.25; }
}

/* 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); }
}

.local-vanish {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink-dim);
  margin-bottom: 0.7rem;
  animation: vanish 3.4s ease-in-out infinite;
}

@keyframes vanish {
  0%, 30% { opacity: 1; filter: blur(0); transform: scale(1); }
  70%, 100% { opacity: 0; filter: blur(3px); transform: scale(0.94); }
}

.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);
}

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

@media (prefers-reduced-motion: reduce) {
  .journey-packet,
  .journey-packet-near,
  .local-rack-led,
  .local-think-bar,
  .local-vanish {
    animation: none;
  }
  /* Without motion the packet still has to say which end it ends at. */
  .journey-packet { left: calc(100% - 8px); opacity: 0.35; }
  .journey-packet-near { left: 0; opacity: 1; }
  .local-vanish { opacity: 0.35; }
  .local-think-bar { transform: scaleY(0.6); }
}