/* ============================================================
   ANIMAL-ID OPEN PLATFORM — page styles
   Built on design-system tokens (colors_and_type.css + components.css).
   Only consumes --* tokens; no one-off hex except code-surface syntax.
   ============================================================ */

body { padding-bottom: 0; }
.container--narrow { max-width: 960px; }

/* ---------- Mono / code surface ---------- */
:root {
  --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;
  --code-bg: #1B1E1C;          /* near-dark green-black, harmonized w/ brand dark */
  --code-bg-head: #24302A;
  --code-line: rgba(255,255,255,.08);
  --code-text: #E8EDE9;
  --code-dim: #8FA295;
  --code-green: #8BD49A;
  --code-yellow: #F4C871;
  --code-blue: #84B6F0;
}

/* ============================================================
   Skip link
   ============================================================ */
.skip-link {
  position: absolute; left: var(--s-4); top: -60px; z-index: var(--z-toast);
  background: var(--color-action-primary); color: #fff;
  padding: var(--s-2) var(--s-4); border-radius: var(--r-md); font-weight: var(--fw-semibold);
  transition: top var(--dur-fast) var(--ease-standard);
}
.skip-link:focus { top: var(--s-4); text-decoration: none; }

/* ============================================================
   Header / nav
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--color-bg-page);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
  height: 68px; max-width: var(--container-max); margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex; align-items: center; gap: var(--s-6);
}
.site-header__logo { display: inline-flex; align-items: center; gap: var(--s-2); }
.site-header__logo img { height: 28px; }
.site-header__badge {
  font-size: var(--fs-caption); font-weight: var(--fw-bold);
  letter-spacing: 0.02em; color: var(--color-action-primary);
  background: var(--c-brand-green-100); padding: 3px 9px; border-radius: var(--r-pill);
  align-self: center;
}
.site-header nav { display: flex; gap: var(--s-5); margin-left: var(--s-4); }
.site-header nav a {
  color: var(--color-text-primary); font-weight: var(--fw-medium);
  font-size: var(--fs-body-sm); padding: var(--s-2) 0; display: inline-flex; align-items: center; gap: 6px;
}
.site-header nav a:hover { color: var(--color-action-primary); text-decoration: none; }
.site-header nav a svg { width: 15px; height: 15px; opacity: .6; }
.site-header__spacer { flex: 1; }
.site-header__actions { display: flex; gap: var(--s-3); align-items: center; }
.nav-toggle { display: none; }

@media (max-width: 1080px) {
  .site-header nav { display: none; }
  .site-header__actions .btn--ghost { display: none; }
}
@media (max-width: 600px) {
  .site-header__badge { display: none; }
}

/* ============================================================
   Section scaffolding
   ============================================================ */
.section { padding: var(--s-20) 0; }
@media (max-width: 768px) { .section { padding: var(--s-12) 0; } }
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-caption); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-action-primary); margin: 0 0 var(--s-3);
}
.eyebrow::before {
  content: ""; width: 18px; height: 2px; border-radius: 2px;
  background: var(--color-action-primary);
}
.section-head { max-width: 60ch; margin: 0 0 var(--s-10); }
.section-head h2 { margin: 0 0 var(--s-3); }
.section-head p { margin: 0; }
.lead { font-size: var(--fs-body-lg); color: var(--color-text-secondary); line-height: var(--lh-base); }

/* ============================================================
   1 — HERO (developer-led, tint surface)
   ============================================================ */
.hero { background: var(--color-bg-tint); border-bottom: 1px solid var(--color-border); overflow: hidden; }
.hero__inner {
  max-width: var(--container-max); margin: 0 auto; padding: var(--s-20) var(--container-pad);
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--s-16); align-items: center;
}
.hero__pill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: var(--c-white); border: 1px solid var(--color-border);
  padding: 5px 16px 5px 6px; border-radius: var(--r-pill);
  font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--color-text-primary);
  margin-bottom: var(--s-6); box-shadow: var(--shadow-sm); white-space: nowrap;
}
.hero__pill .tag-free {
  background: var(--color-action-primary); color: #fff; font-size: var(--fs-caption);
  font-weight: var(--fw-bold); padding: 2px 8px; border-radius: var(--r-pill);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.hero__title {
  font-size: clamp(2.25rem, 4.2vw, 3.5rem);
  line-height: 1.08; font-weight: var(--fw-bold); letter-spacing: -0.02em;
  margin: 0 0 var(--s-5); text-wrap: balance; max-width: 18ch;
}
.hero__title em { font-style: normal; color: var(--color-action-primary); }
.hero__sub {
  font-size: var(--fs-body-lg); color: var(--color-text-primary);
  max-width: 50ch; margin: 0 0 var(--s-8); line-height: var(--lh-base);
}
.hero__cta { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }
.hero__cta .btn--text {
  color: var(--color-text-link); font-weight: var(--fw-semibold);
  display: inline-flex; align-items: center; gap: 6px; padding: 0 var(--s-2); height: 44px; white-space: nowrap;
}
.hero__cta .btn--text:hover { text-decoration: underline; }
.hero__micro {
  margin: var(--s-6) 0 0; font-size: var(--fs-body-sm); color: var(--color-text-secondary);
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
}
.hero__micro span { display: inline-flex; align-items: center; gap: 6px; }
.hero__micro span::before {
  content: ""; width: 16px; height: 16px; flex: 0 0 16px;
  background: var(--color-action-primary);
  -webkit-mask: url("icons/ui/check.svg") center / contain no-repeat;
          mask: url("icons/ui/check.svg") center / contain no-repeat;
}

/* Hero code card */
.code-card {
  background: var(--code-bg); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); overflow: hidden; border: 1px solid rgba(255,255,255,.06);
}
.code-card__head {
  display: flex; align-items: center; gap: var(--s-2);
  background: var(--code-bg-head); padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--code-line);
}
.code-card__dots { display: flex; gap: 6px; }
.code-card__dots i { width: 11px; height: 11px; border-radius: 50%; display: block; background: rgba(255,255,255,.18); }
.code-card__file {
  margin-left: var(--s-2); font-family: var(--font-mono); font-size: var(--fs-body-sm);
  color: var(--code-dim);
}
.code-card__copy {
  margin-left: auto; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  color: var(--code-text); font-family: inherit; font-size: var(--fs-caption); font-weight: var(--fw-semibold);
  padding: 5px 10px; border-radius: var(--r-sm); cursor: pointer; display: inline-flex; gap: 6px; align-items: center;
  transition: background var(--dur-fast) var(--ease-standard);
}
.code-card__copy:hover { background: rgba(255,255,255,.14); }
.code-card__copy.is-copied { color: var(--code-green); border-color: rgba(139,212,154,.4); }
.code-card pre {
  margin: 0; padding: var(--s-5); overflow-x: auto;
  font-family: var(--font-mono); font-size: 13.5px; line-height: 1.7; color: var(--code-text);
  tab-size: 2;
}
.code-card pre .c-cmd { color: var(--code-green); }
.code-card pre .c-flag { color: var(--code-blue); }
.code-card pre .c-str { color: var(--code-yellow); }
.code-card pre .c-dim { color: var(--code-dim); }
.code-card pre .c-key { color: var(--code-blue); }
.code-card__foot {
  display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--code-line); background: rgba(0,0,0,.18);
}
.code-card__foot .dot-ok { width: 8px; height: 8px; border-radius: 50%; background: var(--code-green); box-shadow: 0 0 0 3px rgba(139,212,154,.18); }
.code-card__foot span { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--code-dim); }
.code-card__foot .status-200 { color: var(--code-green); font-weight: var(--fw-bold); }

@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--s-10); padding: var(--s-12) var(--container-pad); }
  .hero__title { max-width: 22ch; }
}

/* ============================================================
   2 — WHAT IS IT (definition, tint surface alt → cream)
   ============================================================ */
.definition { background: var(--color-bg-surface-alt); }
.definition__inner { max-width: 980px; margin: 0 auto; padding: var(--s-20) var(--container-pad); text-align: center; }
.definition blockquote {
  margin: 0; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.4;
  font-weight: var(--fw-medium); letter-spacing: -0.01em; color: var(--color-text-primary);
  text-wrap: pretty;
}
.definition blockquote strong { font-weight: var(--fw-bold); color: var(--color-action-primary); }
.definition__mark {
  width: 48px; height: 48px; margin: 0 auto var(--s-6); color: var(--color-action-primary);
  background: var(--c-brand-green-100); border-radius: var(--r-md); display: grid; place-items: center;
}
.definition__mark img { width: 28px; height: 28px; }

/* ============================================================
   3 — WHO IT'S FOR (chip grid)
   ============================================================ */
.role-grid { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.role-chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-5); border-radius: var(--r-pill);
  background: var(--color-bg-surface); border: 1px solid var(--color-border);
  font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--color-text-primary);
  box-shadow: var(--shadow-sm); transition: border-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.role-chip:hover { border-color: var(--color-border-strong); transform: translateY(-1px); }
.role-chip::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-border-strong); flex: 0 0 8px;
}
.role-chip--brand {
  background: var(--color-action-primary); color: #fff; border-color: var(--color-action-primary);
}
.role-chip--brand::before { background: rgba(255,255,255,.7); }
.role-chip--brand:hover { background: var(--color-action-primary-hover); border-color: var(--color-action-primary-hover); }

/* ============================================================
   4 — API AT A GLANCE (facts + endpoint table, cream)
   ============================================================ */
.api-glance { background: var(--color-bg-surface-alt); }
.api-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--s-12); align-items: start; }
@media (max-width: 980px) { .api-grid { grid-template-columns: 1fr; gap: var(--s-10); } }

.facts-list { display: flex; flex-direction: column; gap: var(--s-5); }
.fact { display: flex; flex-direction: column; gap: 6px; }
.fact__k { font-size: var(--fs-caption); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-secondary); }
.fact__v { font-size: var(--fs-body); color: var(--color-text-primary); }
.fact__v code { font-family: var(--font-mono); font-size: 0.92em; background: var(--c-brand-dark-025); padding: 2px 7px; border-radius: var(--r-xs); color: var(--color-text-primary); border: 1px solid var(--color-border); }
.fact--free {
  background: var(--c-brand-green-100); border-radius: var(--r-md); padding: var(--s-4) var(--s-5);
  border: 1px solid var(--c-brand-green-500);
}
.fact--free .fact__k { color: var(--color-action-primary); }
.fact--free .fact__v { font-weight: var(--fw-semibold); }

/* Endpoint table */
.endpoints {
  background: var(--color-bg-surface); border: 1px solid var(--color-border);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm);
}
.endpoints__group { border-top: 1px solid var(--color-border); }
.endpoints__group:first-child { border-top: none; }
.endpoints__grouphead {
  padding: var(--s-3) var(--s-5); font-size: var(--fs-caption); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-secondary);
  background: var(--c-brand-dark-025);
}
.endpoint-row {
  display: grid; grid-template-columns: 76px 1fr; gap: var(--s-4); align-items: center;
  padding: var(--s-3) var(--s-5); border-top: 1px solid var(--color-border);
}
.endpoints__group .endpoint-row:first-of-type { border-top: none; }
.endpoint-row code {
  font-family: var(--font-mono); font-size: 13px; color: var(--color-text-primary); word-break: break-word;
}
.endpoint-row .ep-desc { color: var(--color-text-secondary); font-size: var(--fs-body-sm); }
.method {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  text-align: center; padding: 4px 6px; border-radius: var(--r-xs); text-transform: uppercase;
}
.method--get    { background: var(--c-status-info-100);    color: var(--c-status-info-700); }
.method--post   { background: var(--c-brand-green-100);    color: var(--c-brand-green-700); }
.method--patch  { background: var(--c-status-warning-100); color: var(--c-status-warning-700); }
.method--delete { background: var(--c-status-danger-100);  color: var(--c-status-danger-500); }

/* ============================================================
   5 — HOW TO START (stepper)
   ============================================================ */
.stepper { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); counter-reset: step; }
@media (max-width: 900px) { .stepper { grid-template-columns: 1fr; } }
.step {
  position: relative; background: var(--color-bg-surface); border: 1px solid var(--color-border);
  border-radius: var(--r-lg); padding: var(--s-8) var(--s-6) var(--s-6); box-shadow: var(--shadow-sm);
}
.step__num {
  width: 44px; height: 44px; border-radius: var(--r-pill);
  background: var(--c-brand-green-100); color: var(--color-action-primary);
  display: grid; place-items: center; font-weight: var(--fw-black); font-size: var(--fs-h4);
  margin-bottom: var(--s-4);
}
.step h3 { margin: 0 0 var(--s-2); }
.step p { margin: 0; color: var(--color-text-secondary); font-size: var(--fs-body); }
.step p code { font-family: var(--font-mono); font-size: 0.88em; background: var(--c-brand-dark-025); padding: 1px 6px; border-radius: var(--r-xs); color: var(--color-text-primary); }
.step__connector { display: none; }

/* ============================================================
   6 — BUILD WITH AI AGENTS (3 cards, brand accent)
   ============================================================ */
.ai-section { position: relative; }
.ai-intro { font-size: var(--fs-body-lg); max-width: 60ch; margin: 0 0 var(--s-10); color: var(--color-text-primary); }
.ai-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
@media (max-width: 900px) { .ai-grid { grid-template-columns: 1fr; } }
.ai-card {
  position: relative; background: var(--color-bg-surface); border: 1px solid var(--color-border);
  border-radius: var(--r-lg); padding: var(--s-8) var(--s-6) var(--s-6); box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--color-action-primary);
  display: flex; flex-direction: column; gap: var(--s-3);
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.ai-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.ai-card__chip {
  width: 52px; height: 52px; border-radius: var(--r-md);
  background: var(--c-brand-green-100); color: var(--color-action-primary);
  display: grid; place-items: center; margin-bottom: var(--s-2);
}
.ai-card__chip svg, .ai-card__chip img { width: 28px; height: 28px; }
.ai-card__tag {
  position: absolute; top: var(--s-5); right: var(--s-5);
  font-family: var(--font-mono); font-size: var(--fs-caption); font-weight: var(--fw-bold);
  color: var(--color-action-primary); background: var(--c-brand-green-050);
  padding: 3px 8px; border-radius: var(--r-sm); border: 1px solid var(--c-brand-green-100);
}
.ai-card h3 { margin: 0; font-size: var(--fs-h4); }
.ai-card p { margin: 0; color: var(--color-text-secondary); font-size: var(--fs-body); flex: 1; }
.ai-card a {
  font-weight: var(--fw-semibold); display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-body-sm);
}
.ai-card a svg { width: 15px; height: 15px; }
.ai-foot {
  margin-top: var(--s-8); display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: var(--fw-semibold); color: var(--color-text-primary);
}
.ai-foot svg { width: 18px; height: 18px; color: var(--color-action-primary); }

/* ============================================================
   7 — REQUEST AN API (form, cream)
   ============================================================ */
.request { background: var(--color-bg-surface-alt); }
.request-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--s-12); align-items: start; }
@media (max-width: 980px) { .request-grid { grid-template-columns: 1fr; gap: var(--s-8); } }
.request-aside h2 { margin: 0 0 var(--s-4); }
.request-aside p { color: var(--color-text-secondary); font-size: var(--fs-body-lg); margin: 0 0 var(--s-6); }
.request-aside .roadmap-link { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-semibold); }
.request-aside .roadmap-link svg { width: 16px; height: 16px; }
.request-stats { display: flex; gap: var(--s-6); margin-top: var(--s-10); flex-wrap: wrap; }
.request-stat strong { display: block; font-size: var(--fs-h2); font-weight: var(--fw-black); color: var(--color-action-primary); line-height: 1; }
.request-stat span { font-size: var(--fs-body-sm); color: var(--color-text-secondary); }

.form-card { background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: var(--s-8); }
@media (max-width: 540px) { .form-card { padding: var(--s-5); } }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.form-grid .col-span-2 { grid-column: 1 / -1; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } .form-grid .col-span-2 { grid-column: auto; } }
.form-section-label {
  grid-column: 1 / -1; font-size: var(--fs-caption); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-secondary);
  margin-top: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--color-border);
}
.form-section-label:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.textarea--mono { font-family: var(--font-mono); font-size: 13px; }
.field__error { display: none; align-items: center; gap: 5px; }
.field.has-error .field__error { display: flex; }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--color-action-danger); }

/* radio + checkbox rows */
.choice-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.choice {
  display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer;
  padding: var(--s-2) var(--s-4); border: 1px solid var(--color-border); border-radius: var(--r-pill);
  font-size: var(--fs-body-sm); font-weight: var(--fw-medium); background: var(--color-bg-surface);
  transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.choice input { accent-color: var(--color-action-primary); width: 16px; height: 16px; margin: 0; }
.choice:has(input:checked) { border-color: var(--color-action-primary); background: var(--c-brand-green-050); color: var(--c-brand-green-700); }
.check-row { display: flex; align-items: flex-start; gap: var(--s-3); font-size: var(--fs-body-sm); cursor: pointer; }
.check-row input { accent-color: var(--color-action-primary); width: 18px; height: 18px; margin-top: 1px; flex: 0 0 18px; }
.check-row span .req { color: var(--color-action-danger); }
.check-group { display: flex; flex-direction: column; gap: var(--s-3); }

.form-foot { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-6); flex-wrap: wrap; }
.form-foot .btn--primary[disabled] { opacity: .55; }
.form-note { font-size: var(--fs-body-sm); color: var(--color-text-secondary); }

/* submitting spinner */
.spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  animation: spin .7s linear infinite; display: none;
}
.is-submitting .spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 1.4s; } }

/* success state */
.form-success { display: none; text-align: center; padding: var(--s-10) var(--s-4); }
.form-card.is-success .form-body { display: none; }
.form-card.is-success .form-success { display: block; }
.form-success__icon {
  width: 72px; height: 72px; border-radius: 50%; margin: 0 auto var(--s-5);
  background: var(--c-brand-green-100); color: var(--color-action-primary);
  display: grid; place-items: center;
}
.form-success__icon svg { width: 38px; height: 38px; }
.form-success h3 { margin: 0 0 var(--s-3); }
.form-success p { color: var(--color-text-secondary); max-width: 42ch; margin: 0 auto var(--s-6); }

/* ============================================================
   8 — MISSION (inverse)
   ============================================================ */
.mission { background: var(--color-bg-inverse); color: #fff; }
.mission__inner { max-width: 880px; margin: 0 auto; padding: var(--s-24) var(--container-pad); text-align: center; }
.mission__mark { width: 56px; height: 56px; margin: 0 auto var(--s-6); }
.mission__mark img { width: 100%; height: 100%; }
.mission blockquote {
  margin: 0 0 var(--s-8); font-size: clamp(1.5rem, 2.8vw, 2.125rem); line-height: 1.35;
  font-weight: var(--fw-medium); letter-spacing: -0.01em; color: #fff; text-wrap: pretty;
}
.mission blockquote strong { color: var(--c-brand-green-500); font-weight: var(--fw-bold); }
.mission__sig { font-size: var(--fs-body); color: rgba(255,255,255,.7); }

/* ============================================================
   9 — FAQ
   ============================================================ */
.faq-list { display: flex; flex-direction: column; gap: var(--s-2); max-width: 820px; margin: 0 auto; }
.faq-item summary { font-size: var(--fs-body-lg); gap: var(--s-4); }
.faq-item__body { line-height: var(--lh-base); }
.faq-item__body code { font-family: var(--font-mono); font-size: 0.9em; background: var(--c-brand-dark-025); padding: 1px 6px; border-radius: var(--r-xs); color: var(--color-text-primary); }

/* ============================================================
   10 — FOOTER
   ============================================================ */
.site-footer { padding: var(--s-16) 0 var(--s-10); }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: var(--s-8); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-8); } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-grid h5 { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,.6); margin: 0 0 var(--s-4); }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.footer-grid a { color: rgba(255,255,255,.85); font-size: var(--fs-body-sm); display: inline-flex; align-items: center; gap: 6px; }
.footer-grid a svg { width: 14px; height: 14px; opacity: .7; }
.footer-brand img { height: 28px; margin-bottom: var(--s-4); }
.footer-brand p { color: rgba(255,255,255,.7); max-width: 30ch; font-size: var(--fs-body-sm); margin: 0 0 var(--s-5); }
.footer-brand .free-pill {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-body-sm); font-weight: var(--fw-semibold);
  color: #fff; background: var(--color-action-primary); padding: 6px 12px; border-radius: var(--r-pill);
}
.footer-legal {
  border-top: 1px solid rgba(255,255,255,.12); margin-top: var(--s-12); padding-top: var(--s-6);
  display: flex; gap: var(--s-4) var(--s-8); justify-content: space-between; flex-wrap: wrap;
  font-size: var(--fs-body-sm); color: rgba(255,255,255,.6);
}
.footer-legal a { color: rgba(255,255,255,.7); }

/* ============================================================
   Toast (copy confirmation)
   ============================================================ */
.toast {
  position: fixed; bottom: var(--s-6); left: 50%; transform: translate(-50%, 20px);
  background: var(--c-brand-dark-900); color: #fff; padding: var(--s-3) var(--s-5);
  border-radius: var(--r-pill); font-size: var(--fs-body-sm); font-weight: var(--fw-medium);
  box-shadow: var(--shadow-lg); z-index: var(--z-toast); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
  display: inline-flex; align-items: center; gap: var(--s-2);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast svg { width: 16px; height: 16px; color: var(--code-green); }

/* ============================================================
   Hero photo variant (Tweak: hero treatment)
   ============================================================ */
.hero__photo { display: none; position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/3.1; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.hero__photo .hero__hotspot { position: absolute; top: 40%; left: 60%; width: 40px; height: 40px; }
.hero__photo .hero__hotspot::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--c-brand-yellow-500); opacity: .45; animation: hotspot 2.2s ease-out infinite; }
.hero__photo .hero__hotspot img { position: relative; width: 40px; height: 40px; }
.hero__photo__caption {
  position: absolute; left: var(--s-4); bottom: var(--s-4); right: var(--s-4);
  background: rgba(27,30,28,.82); color: #fff; backdrop-filter: blur(4px);
  border-radius: var(--r-md); padding: var(--s-3) var(--s-4);
  font-family: var(--font-mono); font-size: 13px; display: flex; align-items: center; gap: var(--s-2);
}
.hero__photo__caption .dot-ok { width: 8px; height: 8px; border-radius: 50%; background: var(--c-brand-green-500); flex: 0 0 8px; }
@keyframes hotspot { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero__photo .hero__hotspot::before { animation: none; } }

body.tw-hero-photo .code-card { display: none; }
body.tw-hero-photo .hero__photo { display: block; }

/* ============================================================
   Density variant (Tweak)
   ============================================================ */
body.tw-compact .section { padding: var(--s-12) 0; }
body.tw-compact .hero__inner { padding-top: var(--s-12); padding-bottom: var(--s-12); }
body.tw-compact .definition__inner,
body.tw-compact .mission__inner { padding-top: var(--s-16); padding-bottom: var(--s-16); }
@media (max-width: 768px) { body.tw-compact .section { padding: var(--s-10) 0; } }

/* ============================================================
   AI accent variant (Tweak)
   ============================================================ */
body.tw-accent-subtle .ai-card { border-top: 1px solid var(--color-border); }
body.tw-accent-subtle .ai-card__chip { background: var(--c-brand-dark-025); color: var(--color-text-primary); }
body.tw-accent-subtle .ai-card__tag { color: var(--color-text-secondary); background: var(--c-brand-dark-025); border-color: var(--color-border); }

/* ============================================================
   Tweaks panel
   ============================================================ */
.tweaks-panel {
  position: fixed; right: var(--s-5); bottom: var(--s-5); z-index: var(--z-toast);
  width: 300px; max-width: calc(100vw - var(--s-8));
  background: var(--color-bg-surface); border: 1px solid var(--color-border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  font-family: var(--font-family-base); display: none; overflow: hidden;
}
.tweaks-panel.is-open { display: block; }
.tweaks-panel__head {
  display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--color-border); background: var(--c-brand-dark-025);
}
.tweaks-panel__head h4 { margin: 0; font-size: var(--fs-body); font-weight: var(--fw-bold); }
.tweaks-panel__head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-action-primary); }
.tweaks-panel__close {
  margin-left: auto; width: 28px; height: 28px; border: none; background: transparent; cursor: pointer;
  border-radius: var(--r-sm); display: grid; place-items: center; color: var(--color-text-secondary);
}
.tweaks-panel__close:hover { background: var(--c-brand-dark-050); color: var(--color-text-primary); }
.tweaks-panel__close svg { width: 16px; height: 16px; }
.tweaks-panel__body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-5); }
.tweak { display: flex; flex-direction: column; gap: var(--s-2); }
.tweak__label { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--color-text-primary); }
.seg { display: flex; gap: 4px; background: var(--c-brand-dark-025); padding: 4px; border-radius: var(--r-pill); }
.seg button {
  flex: 1; border: none; background: transparent; cursor: pointer; font-family: inherit;
  font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--color-text-secondary);
  padding: 7px 8px; border-radius: var(--r-pill); transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.seg button[aria-pressed="true"] { background: var(--color-bg-surface); color: var(--color-action-primary); box-shadow: var(--shadow-sm); }
.tweaks-panel__foot { padding: 0 var(--s-4) var(--s-4); }
.tweaks-panel__reset { font-size: var(--fs-body-sm); color: var(--color-text-link); background: none; border: none; cursor: pointer; font-family: inherit; font-weight: var(--fw-semibold); padding: 0; }

/* ============================================================
   Entrance (progressive, never hides content w/o JS)
   v2 NOTE: in the original page .reveal animated entire text sections.
   v2 keeps the same .reveal markup but neutralises the animation here
   so copy reads instantly. Only illustrations animate — see the
   .reveal-art rule further down in the v2 OVERRIDES block.
   ============================================================ */
.reveal { opacity: 1; }
.js .reveal { opacity: 1; transform: none; }
.js .reveal.is-in { transition: none; }


/* ============================================================
   v2 OVERRIDES — illustration-only entrance + balanced colour
   ------------------------------------------------------------
   Two surgical changes from the original:
   1) Animations now apply to ILLUSTRATIONS only (hero code-card,
      hero photo, the endpoint-table screen). Text never animates —
      copy reads instantly.
   2) THREE deliberate non-green colour moments — kept minimal so
      the page still reads as brand-Animal-ID:
        · hero "Free forever" pill         → yellow (warm, playful)
        · #ai-agents section identity      → info-blue (tech / API)
        · #integrations section identity   → yellow (warm partners)
      Everything else stays brand-green for consistency.
   ============================================================ */

/* --- 1 · Illustration entrance --- */
.reveal-art { opacity: 1; }
.js .reveal-art {
  opacity: 0;
  transform: translateY(22px);
}
.js .reveal-art.is-in {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 1800ms cubic-bezier(.2, .7, .25, 1),
    transform 1800ms cubic-bezier(.2, .7, .25, 1);
}
/* Stagger when multiple cards live side-by-side (slower v2 rhythm) */
.js .reveal-art-group > .reveal-art:nth-child(1) { transition-delay:   0ms; }
.js .reveal-art-group > .reveal-art:nth-child(2) { transition-delay: 320ms; }
.js .reveal-art-group > .reveal-art:nth-child(3) { transition-delay: 640ms; }
.js .reveal-art-group > .reveal-art:nth-child(4) { transition-delay: 960ms; }
.js .reveal-art-group > .reveal-art:nth-child(5) { transition-delay: 1280ms; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal-art           { opacity: 1; transform: none; }
  .js .reveal-art.is-in     { transition: none; }
}

/* --- 2 · Hero: ONE warm note on the Free-forever pill --- */
.hero__pill .tag-free {
  background: var(--c-brand-yellow-500);
  color: var(--c-status-warning-700);
}

/* --- Language switcher (header nav, right of FAQ) ---
   Pure HTML <details>/<summary> dropdown so it works without JS.
   Production must wire the menu items to real i18n routing AND auto-detect
   the browser language on first visit (see DESIGN-QA-PASS.md §i18n). */
.lang-switch                          { position: relative; margin-left: var(--s-2); }
.lang-switch > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 10px;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--color-text-primary);
  border-radius: var(--r-sm);
  border: 1px solid transparent;
}
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch > summary:hover          { color: var(--color-action-primary); border-color: var(--color-border); }
.lang-switch > summary svg            { opacity: 0.6; transition: transform var(--dur-fast) var(--ease-standard); }
.lang-switch[open] > summary          { border-color: var(--color-border); }
.lang-switch[open] > summary svg      { transform: rotate(180deg); }

.lang-switch__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: var(--z-sticky);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  list-style: none;
  padding: var(--s-3) 0;            /* dropdown has its own bg plate — vertical padding only */
  margin: 0;
  min-width: 220px;
  display: flex; flex-direction: column; gap: 0;
}
.lang-switch__menu li {
  margin: 0;
  padding: 0 var(--s-4) 0 var(--s-5);          /* 20px left padding lives on <li>, not on <a> */
}
.lang-switch__menu a {
  position: relative;
  display: inline-flex;                        /* <a> sizes to its CONTENT, not full row width */
  align-items: baseline;
  gap: 10px;
  padding: 10px 0;                             /* vertical only — width = code + gap + label */
  font-size: var(--fs-body-sm);
  color: var(--color-text-primary);
  text-decoration: none;
  border-radius: 0;
  transition: color var(--dur-fast) var(--ease-standard);
}
.lang-switch__menu a strong {
  font-weight: var(--fw-bold);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
  text-align: left;
  transition: color var(--dur-fast) var(--ease-standard);
}
.lang-switch__menu a span {
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  transition: color var(--dur-fast) var(--ease-standard);
}

/* Animated underline — left:0/right:0 of the inline-flex <a>, so the line
   spans EXACTLY the text content of each item (different lengths: EN English
   shorter than UK Українська). Appears left → right like a progress-bar wipe. */
.lang-switch__menu a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 2px;
  background: var(--color-action-primary);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms cubic-bezier(.2, .7, .25, 1);
}
.lang-switch__menu a:hover,
.lang-switch__menu a:focus-visible {
  color: var(--color-text-primary);
}
.lang-switch__menu a:hover strong,
.lang-switch__menu a:hover span,
.lang-switch__menu a:focus-visible strong,
.lang-switch__menu a:focus-visible span {
  color: var(--color-text-primary);
}
.lang-switch__menu a:hover::after,
.lang-switch__menu a:focus-visible::after {
  transform: scaleX(1);
}

/* Current locale — persistent underline + brand colour on the code + label. */
.lang-switch__menu a[aria-current="true"] strong,
.lang-switch__menu a[aria-current="true"] span {
  color: var(--color-action-primary);
}
.lang-switch__menu a[aria-current="true"]::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .lang-switch__menu a::after { transition: none; }
}

/* Mobile: nav collapses (1080px), but lang switcher should still be reachable.
   v2 keeps it inside .nav so it collapses with the rest — production will
   move it into the burger menu / .site-header__actions. Documented in DQA. */

/* --- 2c · Hero: delay the code-card's entrance so the eye lands on the
   LEFT (copy + CTAs) first, then the right (code-card) fades in and
   begins its typewriter effect. Pure CSS delay — typing runs from JS. */
.hero .code-card.reveal-art            { transition-delay: 900ms; }

/* Blinking cursor while the typewriter is running */
.code-card.is-typing pre code::after {
  content: '▋';
  display: inline-block;
  color: var(--code-green);
  margin-left: 2px;
  font-size: 0.95em;
  vertical-align: baseline;
  animation: code-cursor-blink 900ms steps(2) infinite;
}
@keyframes code-cursor-blink {
  0%, 49.99% { opacity: 1; }
  50%, 100%  { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .code-card.is-typing pre code::after { animation: none; opacity: 0; }
}

/* --- 2b · Hero: relocate micro-facts to the visual column ---
   The original page had a dense 3-item benefits paragraph on the LEFT
   below the CTAs (.hero__micro) which made the copy column heavy. v2
   removes that and instead places a calm 3-row trust-list (.hero__facts)
   below the code-card on the RIGHT, where it pairs with the visual.

   IMPORTANT — grid `min-width: auto` quirk:
   Both .hero__copy and .hero__visual are grid items inside .hero__inner
   (display: grid). By default grid items get `min-width: auto`, meaning
   they refuse to shrink below their content's min-content width. The
   <pre> inside .code-card has long unbreakable lines, so .hero__visual
   was being forced wider than its 0.95fr track and the whole card
   stretched off-grid. `min-width: 0` releases that constraint so the
   grid track size wins; <pre>'s overflow-x: auto handles long lines. */
.hero__inner       { align-items: start; }   /* anchor both columns to the top */
.hero__copy,
.hero__visual      { min-width: 0; }
.hero__visual .code-card { max-width: 100%; }

.hero__facts {
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.hero__facts__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-body-sm);
  line-height: 1.4;
  color: var(--color-text-primary);
}
.hero__facts__item strong {
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
}
.hero__facts__check {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--c-brand-green-100);
  color: var(--c-brand-green-600);
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 22px;
}
.hero__facts__check svg { width: 12px; height: 12px; }

/* --- 3 · AI Agents: a single, consistent info-blue identity ---
   Reasoning: this section talks about machine-to-machine integration
   (MCP, OpenAPI). One unified blue accent reads as "tech".
*/
#ai-agents .eyebrow                { color: var(--c-status-info-500); }
#ai-agents .eyebrow::before        { background: var(--c-status-info-500); }
#ai-agents .ai-card                { border-top-color: var(--c-status-info-500); }
#ai-agents .ai-card__chip          {
  background: var(--c-status-info-100);
  color: var(--c-status-info-700);
}
#ai-agents .ai-card__tag           {
  color: var(--c-status-info-700);
  background: var(--c-status-info-100);
  border-color: var(--c-status-info-100);
}
#ai-agents .ai-foot svg            { color: var(--c-status-info-500); }

/* --- 4 · Integrations: a single, consistent yellow identity ---
   Sits between the cool-blue AI section and the green CTA section
   to create a calm cool → warm → primary colour rhythm.
*/
.integrations                      { background: var(--c-cream-100); }
.integrations .eyebrow             { color: var(--c-status-warning-700); }
.integrations .eyebrow::before     { background: var(--c-brand-yellow-500); }


/* --- 6 · Mission section v2 layout — left-aligned text + full-bleed photo ---
   Photo is ABSOLUTELY positioned to the right of the .mission section so it
   bleeds to the top, bottom, AND right edges of the dark gradient surface —
   even when the inner container is constrained by max-width. The copy gets
   right-padding reserving 40 % + gap of the inner box so it never overlaps
   the photo column. On mobile (≤ 900 px) the photo drops back to natural
   flow under the copy with a 4:3 aspect ratio. */
.mission             { position: relative; overflow: hidden; }
.mission__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left:  var(--container-pad);
  padding-right: calc(40% + var(--s-8));   /* reserve space for absolute photo */
  text-align: left;
}
.mission__copy       { min-width: 0; }
.mission .eyebrow,
.mission__sig        { text-align: left; }

/* Lead — large, the emotional statement of the section. */
.mission__lead {
  margin: 0 0 var(--s-6);
  font-size: clamp(1.5rem, 2.8vw, 2.125rem);
  line-height: 1.35;
  font-weight: var(--fw-medium);
  letter-spacing: -0.01em;
  color: var(--c-white);
  text-wrap: pretty;
}
.mission__lead strong {
  font-weight: var(--fw-bold);
  color: var(--c-brand-yellow-500);
}

/* Body — paragraph-sized supporting copy. */
.mission__body {
  margin: 0 0 var(--s-6);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-base);
  color: rgba(255, 255, 255, 0.85);
}

/* Photo — anchored to the top/right/bottom of the .mission section.
   Width 40 % of the section width = 40 % of the viewport when the section
   is full-bleed. No border-radius, no shadow — clean edge-to-edge block. */
.mission__photo {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 40%;
  overflow: hidden;
  border-radius: 0;
  box-shadow: none;
}
.mission__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px) {
  /* On mobile: drop absolute positioning, restore normal flow.
     Copy first, photo below — natural source order is text, then photo.
     Photo bleeds full-width AND to the bottom edge of the .mission section
     (negative left/right margins cancel the inner container-padding;
     inner's padding-bottom is dropped so the photo touches section bottom). */
  .mission             { overflow: visible; }
  .mission__inner {
    padding-right: var(--container-pad);
    padding-bottom: 0;
  }
  .mission__photo {
    position: static;
    width: calc(100% + 2 * var(--container-pad));
    margin: var(--s-8) calc(-1 * var(--container-pad)) 0;
    aspect-ratio: 4 / 3;
  }
}


/* --- 7 · "What is it" section — left-align on mobile only ---
   Default desktop layout stays centered (DS pattern for emphasised definition
   blocks). At <= 768px the section switches to left-aligned to feel like a
   regular content block on phones, where centered long-form copy reads as
   "marketing wall". */
@media (max-width: 768px) {
  .definition__inner       { text-align: left; }
  .definition__inner .eyebrow { justify-content: flex-start; }
  .definition__mark        { margin-left: 0; margin-right: 0; }
  .definition__title       { margin-left: 0; margin-right: 0; max-width: none; }
  .definition__body        { margin-left: 0; margin-right: 0; }
}


/* --- 5 · "What is it" section — DS-standard hierarchy ---
   The original section was one giant blockquote (2rem long text), which
   forced lots of large-font body copy on the reader. v2 splits it into:
     · eyebrow                (small caps label, unchanged)
     · h2 .definition__title  (standard DS H2 size — the actual heading)
     · p  .definition__body   (body-lg — comfortable reading size)
*/
.definition__title {
  font-size: clamp(2rem, 3.6vw, 2.5rem);    /* DS H2 scale */
  line-height: var(--lh-snug);
  letter-spacing: -0.02em;
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin: 0 auto var(--s-5);
  max-width: 22ch;
  text-wrap: balance;
}
.definition__body {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-base);
  color: var(--color-text-secondary);
  margin: 0 auto;
  max-width: 64ch;
  text-wrap: pretty;
}
.definition__body strong {
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
}


/* ============================================================
   v2 NEW SECTION — Built on Animal-ID (Integrations)
   3 partner cards. Single yellow accent identity across all 3 —
   per-block colour balance, not three different colours per card.
   ============================================================ */
.integrations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
@media (max-width: 900px) {
  .integrations-grid { grid-template-columns: 1fr; }
}

.integration-card {
  position: relative;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: var(--s-8) var(--s-6) var(--s-6);
  box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--c-brand-yellow-500);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition:
    transform var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard);
}
.integration-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.integration-card__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.integration-card__logo {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: var(--c-status-warning-100);
  color: var(--c-status-warning-700);
  display: grid;
  place-items: center;
  font-weight: var(--fw-black);
  font-size: var(--fs-body-lg);
  letter-spacing: -0.02em;
  flex: 0 0 44px;
}
.integration-card__title {
  margin: 0;
  font-size: var(--fs-h4);
  letter-spacing: -0.01em;
}
.integration-card__role {
  display: block;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  margin-top: 2px;
}
.integration-card__quote {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  flex: 1;
}
.integration-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-2);
}
.integration-card__metric {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-status-warning-700);
  background: var(--c-status-warning-100);
  padding: 4px 10px;
  border-radius: var(--r-pill);
}
.integration-card__link {
  margin-top: var(--s-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-link);
}
.integration-card__link svg { width: 15px; height: 15px; }
.integration-card__link:hover { text-decoration: underline; }

/* ============================================================
   v2 NANO-WAVES — Canvas-based wave-through-dot-field
   ------------------------------------------------------------
   Reference: shutterstock "abstract slow-motion wave lines dot pattern".
   A grid of brand-green dots covers the viewport. Each dot's opacity
   AND radius follow two interfering sine waves of (x, y, t). The dot
   positions never move — the WAVE moves through them. Canvas is
   fixed in viewport space (not page space), so the field looks calm
   while the page content scrolls over it.
   The animation runs in inline JS at the bottom of the HTML.
   ============================================================ */

/* Alternating section rhythm — odd content blocks stay transparent
   (canvas wave-field shows through); even blocks get a solid white
   plate that covers the canvas. Visual rhythm: dots → white → dots
   → white → dots → white → dots → white → dark → dots.
                              1     2      3     4    5    6     7    8    9     10
*/

/* Odd sections — transparent (canvas wave shows) */
.hero,
.integrations  { background: transparent; }
/* #who, #start and #faq inherit transparent default — no bg set */

/* Even sections — solid white plate (hides canvas) */
.definition,
.api-glance,
.ai-section,
.request       { background: var(--c-white); }

/* Mission — dark green gradient mirroring the PWA dark screens
   (Nose Print flow). Brand-green + warm-yellow radial glows over
   a deep green-black base. Opaque enough to fully hide the canvas. */
.mission {
  background:
    radial-gradient(ellipse 50% 40% at 20% 20%, rgba(78, 157, 87, 0.42) 0%, transparent 62%),
    radial-gradient(ellipse 55% 50% at 80% 78%, rgba(249, 181, 48, 0.32) 0%, transparent 62%),
    linear-gradient(150deg, var(--c-pwa-dark-900) 0%, var(--c-pwa-dark-700) 100%);
  color: var(--c-white);
}
.mission blockquote strong  { color: var(--c-brand-yellow-500); }
.mission__sig               { color: rgba(255, 255, 255, 0.72); }

/* The wave canvas itself — fixed behind every content layer */
#nano-bg {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  /* Behind sections but above body bg. Sections have content at z-index ≥1 */
}

/* Bring main + footer above the canvas. (.site-header already has
   position: sticky + z-index: var(--z-sticky), which is well above 0.) */
main,
.site-footer { position: relative; z-index: 1; }