/* GENERATED, DO NOT EDIT. Produced by scripts/fetch-template.mjs from
   Website Template 1.0.0 (cytognosis/branding@website-template-v1.0.0): template.css.
   Loads after tokens.generated.css. Edit the Template upstream. */
/* ─────────────────────────────────────────────────────────
   Cytognosis Website Template, Section System v1.0.0
   Built from Claude Design project 11d44c2c (Cytognosis Design
   System v11.3.1; tokens are unchanged since v11.3.0).

   Load order required on the page:
     1. tokens/colors.css
     2. tokens/fonts.css
     3. tokens/spacing.css
     4. tokens/typography.css
     5. tokens/motion.css
     6. tokens/shadows.css
     7. tokens/base.css
     8. tokens/theme-dark.css
     9. profiles/profiles.css
    10. template.css  (this file)
   (tokens.css is files 1 to 9 flattened in that order; with it, load
   only template.css after it.)

   Selectors on <html> (or on any region):
     data-profile="foundation | clinical | research"   type + emphasis
     data-theme="light | dark"                          light is the default
   Set both together on a region that differs from the page. A dark
   region inside a light page is supported; a light region inside a
   dark page is not (see tokens/theme-dark.css).

   Sections: header, footer, hero, feature-row, card-grid, stat-block,
   timeline, comparison-table, evidence-cards, axis-tabs, cta-band,
   quote-band, status-band, form, plus the figure panels. Every color,
   space, radius, shadow, duration and font below resolves through a
   var(--cg-*), var(--pf-*) or var(--tpl-*) token. There is no raw hex in
   this file (scripts/lint_hex.py enforces it). Reskinning a site means
   changing tokens or attributes, never this file.

   Identity triad (violet, azure, indigo) is reserved for CTAs and
   emphasis. Magenta never appears as an identity color: it is an
   attention accent elsewhere in the system, and only the Research
   profile may use it, for anomaly states.
   ───────────────────────────────────────────────────────── */

/* ════════════════════════════════════════════════════════
   0. Template aliases
   Three layers, so any combination of profile and theme resolves
   without depending on source order:
     0a  layout + type aliases, re-declared wherever a profile or
         theme attribute appears (profiles.css supplies --f-* and
         --emphasis; fallbacks keep a page without a profile working)
     0b  light theme (default), the semantic surface/text/border set
     0c  light profile adjustments (dark ones live in theme-dark.css)
   ════════════════════════════════════════════════════════ */
:root,
[data-profile],
[data-theme] {
  --tpl-max: var(--grid-max, 1280px);
  --tpl-max-narrow: var(--grid-max-narrow, 960px);
  --tpl-gutter: var(--grid-gutter, 24px);

  --tpl-display: var(--f-display, var(--font-display));
  --tpl-body: var(--f-body, var(--font-body));
  --tpl-accent: var(--f-accent, var(--font-accent));
  --tpl-code: var(--f-code, var(--font-code));

  --tpl-emphasis-fill: var(--emphasis, var(--cg-violet));
}

/* 0b. light (default) */
:root:not([data-theme="dark"]),
[data-theme="light"] {
  color-scheme: light;

  --tpl-bg: var(--cg-lp-bg-soft);            /* warm paper */
  --tpl-bg-soft: var(--cg-lp-bg);
  --tpl-bg-section: var(--cg-lp-bg-section);
  --tpl-surface: var(--cg-lp-surface);
  --tpl-card: var(--cg-lp-surface);
  --tpl-tint: var(--cg-violet-50);
  --tpl-border: var(--border-1);
  --tpl-border-soft: var(--border-2);
  --tpl-text: var(--cg-lp-text);
  --tpl-text-2: var(--fg-2);
  --tpl-muted: var(--cg-neutral-500);        /* AA on paper and on white; fg-3 is 4.4:1 */
  --tpl-emphasis: var(--cg-violet-700);      /* text-safe step of the emphasis hue */
  --tpl-emph-soft: var(--cg-violet-300);     /* rules, borders, large tints */
  --tpl-on-emphasis: var(--cg-day-50);       /* text on a filled emphasis control */
  --tpl-focus: var(--cg-azure-700);          /* 3:1 on paper; azure-300 is 1.7:1 */
  --tpl-ok: var(--cg-teal-700);
  --tpl-info: var(--cg-azure-700);
  --tpl-partial: var(--cg-indigo-600);
  --tpl-attention: var(--cg-coral-800);       /* AA text step; coral is for attention and form errors only */
  --tpl-field-border: var(--cg-neutral-500);  /* form control boundary, 3:1 on white and paper */
  /* AA-safe signature: the DS gradient's three hues at the 600/700 steps,
     so white text clears 4.5:1 along the whole gradient */
  --tpl-cta-gradient: linear-gradient(135deg, var(--cg-azure-700) 0%, var(--cg-violet-700) 50%, var(--cg-indigo-600) 100%);
}

/* 0c. light profile adjustments (same specificity as 0b, declared after it) */
[data-profile="clinical"]:not([data-theme="dark"]) {
  --tpl-text-2: var(--pf-clinical-text-secondary);
  --tpl-muted: var(--pf-clinical-text-muted);
  --tpl-cta-gradient: var(--cg-violet-700);   /* a calm solid fill */
}
[data-profile="research"]:not([data-theme="dark"]) {
  --tpl-emphasis: var(--cg-indigo-600);
  --tpl-emph-soft: var(--cg-indigo-300);
  --tpl-tint: var(--cg-indigo-50);
  --tpl-cta-gradient: linear-gradient(135deg, var(--cg-indigo-700) 0%, var(--cg-azure-700) 100%);
}

/* ── global wiring: the page, headings, links, focus ── */
body {
  background: var(--tpl-bg);
  color: var(--tpl-text);
  font-family: var(--tpl-body);
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--tpl-display);
  color: var(--tpl-text);
}
:focus-visible { outline-color: var(--tpl-focus); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ════════════════════════════════════════════════════════
   1. Shared layout + utility
   ════════════════════════════════════════════════════════ */
.container {
  max-width: var(--tpl-max);
  margin-inline: auto;
  padding-inline: var(--space-lg, 24px);
}

.container--narrow {
  max-width: var(--tpl-max-narrow);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm, 8px);
  font-family: var(--tpl-code);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tpl-emphasis);
  margin-bottom: var(--space-lg, 24px);
}
.eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--tpl-emph-soft);
  flex-shrink: 0;
}

.serif-accent {
  font-family: var(--tpl-accent);
  font-style: italic;
  font-weight: 400;
}

.text-gradient {
  background: var(--tpl-cta-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Buttons: shared 44px floor across the whole system ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm, 8px);
  min-height: var(--touch-min, 44px);
  padding: 0 var(--space-xl, 32px);
  border-radius: var(--radius-md, 8px);
  font-family: var(--tpl-body);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.btn:focus-visible {
  outline: 3px solid var(--tpl-focus);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  .btn:hover { transform: var(--hover-lift); }
}

/* Variants are .btn.btn--x (two classes) so they out-rank the global
   a / a:hover / [data-theme="dark"] a link colors in base.css. */
.btn.btn--primary {
  background: var(--tpl-cta-gradient);
  color: var(--tpl-on-emphasis);
}
.btn.btn--primary:hover {
  color: var(--tpl-on-emphasis);
  box-shadow: var(--shadow-glow-violet-sm);
}

.btn.btn--secondary {
  background: transparent;
  color: var(--tpl-emphasis);
  border-color: var(--tpl-emph-soft);
}
.btn.btn--secondary:hover {
  color: var(--tpl-emphasis);
  border-color: var(--tpl-emphasis);
  background: var(--tpl-tint);
}

.btn.btn--light {
  background: var(--cg-day-50);
  color: var(--cg-neutral-900);
}
.btn.btn--light:hover { color: var(--cg-neutral-900); box-shadow: var(--shadow-lg); }

.btn.btn--outline-dark {
  background: transparent;
  color: var(--cg-day-50);
  border-color: var(--cg-day-400);
}
.btn.btn--outline-dark:hover {
  color: var(--cg-day-50);
  border-color: var(--cg-day-50);
  background: var(--cg-neutral-700);
}

/* ════════════════════════════════════════════════════════
   2. HEADER
   ════════════════════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: var(--nav-height, 72px);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--tpl-border);
}
/* The frosted bar lives on a pseudo-element. A backdrop-filter on .site-header itself
   would make the header the containing block of the fixed mobile drawer, which then
   sits translated 100% to the right of the header, adds a second screen of horizontal
   scroll, and loses its full-height inset (v0.2.1 defect, found by the 360 px check). */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--tpl-bg) 88%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--space-lg, 24px);
}

.site-header__logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 8px);
  min-height: var(--touch-min, 44px);
  font-family: var(--tpl-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--tpl-text);
  text-decoration: none;
}
.site-header__logo img,
.site-header__logo svg {
  height: 30px;
  width: auto;
  display: block;
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-2xl, 48px);
}

.site-header__links {
  display: flex;
  align-items: center;
  gap: var(--space-xl, 32px);
  list-style: none;
}
.site-header__links a {
  display: inline-flex;
  align-items: center;
  min-width: var(--touch-min, 44px);
  min-height: var(--touch-min, 44px);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--tpl-text-2);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.site-header__links a:hover { color: var(--tpl-emphasis); }

.site-header__cta {
  flex-shrink: 0;
}

.site-header__toggle {
  display: none;
  width: var(--touch-min, 44px);
  height: var(--touch-min, 44px);
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md, 8px);
  background: transparent;
  border: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}
.site-header__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--tpl-text);
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.site-header__toggle:focus-visible {
  outline: 3px solid var(--tpl-focus);
  outline-offset: 2px;
}
.site-header[data-open="true"] .site-header__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header[data-open="true"] .site-header__toggle span:nth-child(2) { opacity: 0; }
.site-header[data-open="true"] .site-header__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .site-header__nav {
    position: fixed;
    inset: var(--nav-height, 72px) 0 0 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    background: var(--tpl-bg);
    padding: var(--space-xl, 32px) var(--space-lg, 24px);
    transform: translateX(100%);
    visibility: hidden; /* a closed drawer takes no focus and is not read out */
    transition: transform var(--dur-slow) var(--ease-in-out), visibility 0s linear var(--dur-slow);
    overflow-y: auto;
  }
  .site-header[data-open="true"] .site-header__nav {
    transform: translateX(0);
    visibility: visible;
    transition-delay: 0s;
  }
  .site-header__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .site-header__links a {
    min-height: var(--touch-min, 44px);
    padding: var(--space-sm, 8px) 0;
    border-bottom: 1px solid var(--tpl-border-soft);
    font-size: 1.05rem;
  }
  .site-header__cta {
    margin-top: var(--space-lg, 24px);
  }
  .site-header__cta .btn { width: 100%; }
  .site-header__toggle { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header__nav,
  .site-header__toggle span {
    transition: none;
  }
}

/* ════════════════════════════════════════════════════════
   3. HERO
   ════════════════════════════════════════════════════════ */
.hero {
  padding: var(--space-4xl, 80px) 0 var(--space-3xl, 64px);
  background: var(--tpl-bg);
  position: relative;
  overflow: hidden;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl, 48px);
  align-items: center;
}

.hero__title {
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-lg, 24px);
  color: var(--tpl-text);
}

.hero__subhead {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--tpl-text-2);
  line-height: 1.65;
  max-width: 56ch;
  margin-bottom: var(--space-xl, 32px);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md, 16px);
  margin-bottom: var(--space-xl, 32px);
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg, 24px);
}
.hero__trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 8px);
  font-size: 0.8rem;
  color: var(--tpl-muted);
}

.hero__media {
  position: relative;
  border-radius: var(--radius-xl, 16px);
  overflow: hidden;
  background: var(--tpl-bg-section);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__media img,
.hero__media svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__media-caption {
  position: absolute;
  left: var(--space-lg, 24px);
  bottom: var(--space-lg, 24px);
  background: color-mix(in srgb, var(--tpl-surface) 78%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--tpl-border);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-md, 16px);
  max-width: 240px;
  box-shadow: var(--shadow-lg);
}
.hero__media-caption-label {
  font-family: var(--tpl-code);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tpl-emphasis);
  margin-bottom: var(--space-xs, 4px);
}
.hero__media-caption-text {
  font-size: 0.8rem;
  color: var(--tpl-text-2);
  line-height: 1.5;
}

/* Ambient hero motion: opt-in only, off by default and fully static
   whenever reduced motion is requested. */
.hero[data-parallax="on"] .hero__media {
  animation: hero-float 6s var(--ease-in-out) infinite;
}
@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero[data-parallax="on"] .hero__media { animation: none; }
}

@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
  }
}

/* ════════════════════════════════════════════════════════
   4. FEATURE ROW (alternating text / media)
   ════════════════════════════════════════════════════════ */
.feature-row {
  padding: var(--space-3xl, 64px) 0;
}
.feature-row + .feature-row {
  border-top: 1px solid var(--tpl-border-soft);
}
.feature-row--tinted {
  background: var(--tpl-bg-section);
}

.feature-row__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl, 48px);
  align-items: center;
}

.feature-row__media {
  border-radius: var(--radius-xl, 16px);
  overflow: hidden;
  background: var(--tpl-bg-section);
  aspect-ratio: 4 / 3;
}
.feature-row__media img,
.feature-row__media svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-row__title {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: var(--space-md, 16px);
  color: var(--tpl-text);
}

.feature-row__body {
  font-size: 1rem;
  color: var(--tpl-text-2);
  line-height: 1.65;
  margin-bottom: var(--space-lg, 24px);
  max-width: 52ch;
}

.feature-row__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs, 4px);
}
.feature-row__list-item {
  display: flex;
  gap: var(--space-md, 16px);
  padding: var(--space-md, 16px) 0;
  border-bottom: 1px solid var(--tpl-border-soft);
}
.feature-row__list-item:last-child { border-bottom: none; }
.feature-row__list-num {
  font-family: var(--tpl-code);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--tpl-emphasis);
  flex-shrink: 0;
  padding-top: 0.15em;
}
.feature-row__list-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--tpl-text);
  margin-bottom: var(--space-xs, 4px);
}
.feature-row__list-body {
  font-size: 0.9rem;
  color: var(--tpl-text-2);
  line-height: 1.6;
}

@media (min-width: 900px) {
  .feature-row__grid {
    grid-template-columns: 1fr 1fr;
  }
  .feature-row--reverse .feature-row__grid {
    direction: rtl;
  }
  .feature-row--reverse .feature-row__grid > * {
    direction: ltr;
  }
}

/* ════════════════════════════════════════════════════════
   5. CARD GRID
   ════════════════════════════════════════════════════════ */
.card-grid-section {
  padding: var(--space-3xl, 64px) 0;
}

.section-head {
  max-width: 640px;
  margin-bottom: var(--space-2xl, 48px);
}
.section-head__title {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: var(--space-md, 16px);
  color: var(--tpl-text);
}
.section-head__sub {
  font-size: 1.05rem;
  color: var(--tpl-text-2);
  line-height: 1.65;
}

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg, 24px);
}

.cg-card {
  background: var(--tpl-card);
  border: 1px solid var(--tpl-border);
  border-radius: var(--radius-xl, 16px);
  padding: var(--space-xl, 32px) var(--space-lg, 24px);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
@media (prefers-reduced-motion: no-preference) {
  .cg-card:hover {
    transform: var(--hover-lift);
    box-shadow: var(--shadow-lg);
  }
}

.cg-card__icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md, 8px);
  background: var(--tpl-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-lg, 24px);
  color: var(--tpl-emphasis);
}
.cg-card__title {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-sm, 8px);
  color: var(--tpl-text);
}
.cg-card__body {
  font-size: 0.9rem;
  color: var(--tpl-text-2);
  line-height: 1.6;
}

@media (min-width: 640px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
  .card-grid--4up { grid-template-columns: repeat(4, 1fr); }
}

/* ════════════════════════════════════════════════════════
   6. STAT BLOCK
   ════════════════════════════════════════════════════════ */
.stat-block {
  padding: var(--space-3xl, 64px) 0;
  background: var(--tpl-bg-section);
}

.stat-block__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl, 32px);
}

.stat-item {
  text-align: left;
  padding: var(--space-lg, 24px) 0 0;
  border-top: 2px solid var(--tpl-emph-soft);
}
.stat-item__value {
  font-family: var(--tpl-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: var(--space-sm, 8px);
  color: var(--tpl-emphasis);
}
.stat-item__label {
  font-size: 0.9rem;
  color: var(--tpl-text-2);
  line-height: 1.5;
  max-width: 30ch;
}

@media (min-width: 640px) {
  .stat-block__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .stat-block__grid.stat-block__grid--3 { grid-template-columns: repeat(3, 1fr); }
  .stat-block__grid.stat-block__grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ════════════════════════════════════════════════════════
   7. TIMELINE (staged roadmap)
   ════════════════════════════════════════════════════════ */
.timeline {
  padding: var(--space-3xl, 64px) 0;
}

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

.timeline__stage {
  position: relative;
  padding: 0 0 var(--space-2xl, 48px) var(--space-2xl, 48px);
  border-left: 2px solid var(--tpl-border);
}
.timeline__stage:last-child {
  padding-bottom: 0;
}

.timeline__marker {
  position: absolute;
  left: -9px;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--tpl-bg);
  border: 2px solid var(--tpl-emph-soft);
}
.timeline__stage[data-status="done"] .timeline__marker {
  background: var(--tpl-emphasis-fill);
  border-color: var(--tpl-emphasis-fill);
}
.timeline__stage[data-status="active"] .timeline__marker {
  background: var(--cg-azure);
  border-color: var(--cg-azure);
  box-shadow: var(--shadow-glow-azure-sm);
}

.timeline__stage-label {
  font-family: var(--tpl-code);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tpl-muted);
  margin-bottom: var(--space-xs, 4px);
}
.timeline__stage-title {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--tpl-text);
  margin-bottom: var(--space-sm, 8px);
}
.timeline__stage-body {
  font-size: 0.9rem;
  color: var(--tpl-text-2);
  line-height: 1.6;
  max-width: 60ch;
}

@media (min-width: 900px) {
  .timeline__track {
    flex-direction: row;
    gap: var(--space-lg, 24px);
  }
  .timeline__stage {
    flex: 1;
    padding: var(--space-2xl, 48px) 0 0 0;
    border-left: none;
    border-top: 2px solid var(--tpl-border);
  }
  .timeline__marker {
    left: -9px;
    top: -9px;
  }
}

/* ════════════════════════════════════════════════════════
   8. FOOTER
   ════════════════════════════════════════════════════════ */
.site-footer {
  background: var(--cg-deep);
  color: var(--cg-day-50);
  padding: var(--space-3xl, 64px) 0 var(--space-xl, 32px);
}

.site-footer__top {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl, 48px);
  padding-bottom: var(--space-xl, 32px);
  border-bottom: 1px solid var(--cg-neutral-700);
  margin-bottom: var(--space-lg, 24px);
}

.site-footer__brand {
  max-width: 320px;
}
.site-footer__logo {
  height: 28px;
  margin-bottom: var(--space-md, 16px);
}
.site-footer__tagline {
  font-family: var(--tpl-accent);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--cg-day-300);
  line-height: 1.55;
}

.site-footer__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl, 32px);
}
.site-footer__col h3 {
  font-family: var(--tpl-code);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cg-day-400);
  margin-bottom: var(--space-md, 16px);
}
.site-footer__col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 8px);
}
.site-footer__col a {
  display: inline-flex;
  align-items: center;
  min-width: var(--touch-min, 44px);
  min-height: var(--touch-min, 44px);
  font-size: 0.85rem;
  color: var(--cg-day-200);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.site-footer__col a:hover { color: var(--cg-violet-200); }

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 8px);
}
.site-footer__compliance,
.site-footer__meta {
  font-family: var(--tpl-code);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--cg-day-400);
}

@media (min-width: 640px) {
  .site-footer__cols { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .site-footer__top { flex-direction: row; justify-content: space-between; }
  .site-footer__cols { flex: 1; max-width: 640px; margin-left: auto; }
  .site-footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ════════════════════════════════════════════════════════
   9. Global reveal utility (opt-in, reduced-motion safe)
   Sections may add data-reveal="up" to fade/rise content in;
   this is inert until a page's own light JS toggles .is-visible
   (typically via IntersectionObserver). With no script present,
   [data-reveal] content renders fully visible by default: motion
   is progressive enhancement, never a requirement to read content.
   ════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
  [data-reveal].js-armed {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--dur-slow) var(--ease-out),
                transform var(--dur-slow) var(--ease-out);
  }
  [data-reveal].js-armed.is-visible {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal].js-armed {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ════════════════════════════════════════════════════════
   10. VIZ FIGURES (maze-to-map, disease-as-trajectory)
   Dark inset panels for the two ported animated figures.
   Colors inside each panel come from the 300/400-shade tier
   of the identity triad plus the two sanctioned non-identity
   accents (teal, coral) and the accent-only gold, chosen for
   AA+ contrast against --cg-neutral-900. Never magenta.
   ════════════════════════════════════════════════════════ */
.viz-figure {
  padding: var(--space-3xl, 64px) 0;
}
.viz-figure__head {
  max-width: 640px;
  margin-bottom: var(--space-2xl, 48px);
}
.viz-figure__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl, 48px);
}
@media (min-width: 1024px) {
  .viz-figure__grid { grid-template-columns: repeat(2, 1fr); }
}

.viz-panel {
  background: var(--cg-neutral-900);
  border: 1px solid var(--cg-neutral-700);
  border-radius: var(--radius-xl, 16px);
  padding: var(--space-xl, 32px) var(--space-lg, 24px);
  box-shadow: var(--shadow-lg);
}
.viz-panel__label {
  font-family: var(--tpl-code);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cg-day-300);
  margin-bottom: var(--space-md, 16px);
}
.viz-panel svg {
  width: 100%;
  height: auto;
  display: block;
}
.viz-panel__caption {
  margin-top: var(--space-md, 16px);
  font-size: 0.85rem;
  color: var(--cg-day-300);
  line-height: 1.6;
}

/* ── domain gradient rule, thin top-of-panel accent bar ──
   Uses --cg-gradient-tech (violet -> indigo) for platform/technology
   figures and --cg-gradient-health (azure -> teal) for figures whose
   dominant subject is human biology, per the semantic-color spec. ── */
.viz-panel__rule {
  height: 3px;
  border-radius: var(--radius-pill, 9999px);
  margin-bottom: var(--space-md, 16px);
}
.viz-panel__rule--tech {
  background: var(--cg-gradient-tech);
}
.viz-panel__rule--health {
  background: var(--cg-gradient-health);
}

/* ── wide variant: lets a figure whose native aspect ratio is much
   wider (or much richer, like the adaptive-panel rail) than a single
   grid cell span the full width of .viz-figure__grid at the 2-column
   breakpoint. No effect below that breakpoint, where the grid is
   already a single column. ── */
@media (min-width: 1024px) {
  .viz-panel--wide { grid-column: 1 / -1; }
}

/* ════════════════════════════════════════════════════════
   11. ADAPTIVE PANEL (T0-T3 worked-example rail)
   Ported from the reference template's Pillars.jsx
   AdaptivePanelExample. In the reference this sat inline on a
   globally-dark page and inherited that page's dark background;
   here the whole component IS a dark panel (paired with
   .viz-panel in markup, same as every other figure in this
   template), so it reads correctly dropped into a light page.
   Prefixed cg-adaptive-* / cg-* throughout to stay clear of the
   reference's unprefixed .adaptive-*/.marker-chips/.readouts/
   .hypotheses names. Health domain: --accent defaults to azure
   (set by viz/adaptive-panel.js) since the subject is a
   continuous biology sensor panel.
   ════════════════════════════════════════════════════════ */
.cg-adaptive { --accent: var(--cg-azure-400); }
.cg-adaptive-intro { max-width: 68ch; margin-bottom: var(--space-xl, 32px); }
.cg-adaptive-kicker { color: var(--cg-day-100); font-size: 0.95rem; line-height: 1.65; }

.cg-adaptive-rail { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg, 24px); }
.cg-adaptive-rail-line {
  position: absolute; top: 26px; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--cg-azure-500), var(--cg-violet-500) 50%, var(--cg-teal-500));
  border-radius: var(--radius-pill, 9999px); opacity: 0.35;
}

.cg-adaptive-stage {
  position: relative;
  padding: var(--space-lg, 24px) var(--space-md, 16px) var(--space-md, 16px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg, 12px);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 8px);
}
.cg-adaptive-stage-head { display: flex; gap: var(--space-sm, 8px); align-items: flex-start; }
.cg-adaptive-ix {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--cg-neutral-950); border: 2px solid var(--accent, var(--cg-azure-400));
  display: grid; place-items: center;
  font-family: var(--tpl-display); font-weight: 700; font-size: 0.85rem;
  color: var(--accent, var(--cg-azure-300)); letter-spacing: -0.02em; flex-shrink: 0;
}
.cg-adaptive-tag {
  display: inline-block; font-family: var(--tpl-code); font-size: 0.62rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent, var(--cg-azure-300));
  margin-bottom: var(--space-xs, 4px);
}
.cg-adaptive-title { font-size: 0.92rem; font-weight: 600; color: var(--cg-day-50); letter-spacing: -0.01em; line-height: 1.3; }
.cg-adaptive-body { font-size: 0.82rem; line-height: 1.6; color: var(--cg-day-300); }

.cg-marker-chips { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.cg-marker-chips li {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 7px 10px; background: rgba(139, 63, 199, 0.1); border: 1px solid rgba(139, 63, 199, 0.22);
  border-radius: var(--radius-sm, 6px); font-family: var(--tpl-code); font-size: 0.72rem;
}
.cg-m-name { color: var(--cg-day-50); font-weight: 600; letter-spacing: 0.02em; }
.cg-m-note { color: var(--cg-day-300); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; }

.cg-readouts { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.cg-readouts li {
  display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center;
  padding: 7px 10px; border-radius: var(--radius-sm, 6px); font-family: var(--tpl-code); font-size: 0.72rem;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08);
}
.cg-r-name { color: var(--cg-day-50); font-weight: 600; }
.cg-r-delta { color: var(--cg-day-200); font-variant-numeric: tabular-nums; }
.cg-r-arrow { font-size: 0.65rem; }
.cg-readouts .cg-trend-up { border-color: rgba(224, 48, 158, 0.35); background: rgba(224, 48, 158, 0.1); }
.cg-readouts .cg-trend-up .cg-r-delta, .cg-readouts .cg-trend-up .cg-r-arrow { color: var(--cg-magenta-300); }
.cg-readouts .cg-trend-down { border-color: rgba(242, 99, 85, 0.35); background: rgba(242, 99, 85, 0.1); }
.cg-readouts .cg-trend-down .cg-r-delta, .cg-readouts .cg-trend-down .cg-r-arrow { color: var(--cg-coral-300); }
.cg-readouts .cg-trend-flat .cg-r-delta, .cg-readouts .cg-trend-flat .cg-r-arrow { color: var(--cg-day-300); }

.cg-hypotheses { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.cg-hypotheses li { display: grid; grid-template-columns: 1fr 64px 30px; gap: 8px; align-items: center; font-family: var(--tpl-code); font-size: 0.7rem; }
.cg-h-label { color: var(--cg-day-100); font-size: 0.68rem; line-height: 1.3; }
.cg-h-bar { height: 6px; border-radius: var(--radius-pill, 9999px); background: rgba(255, 255, 255, 0.08); overflow: hidden; display: block; }
.cg-h-bar i { display: block; height: 100%; background: var(--cg-gradient-health); border-radius: var(--radius-pill, 9999px); }
.cg-h-p { color: var(--cg-day-200); text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.cg-hyp-lead .cg-h-p { color: var(--cg-teal-300); }
.cg-hyp-lead .cg-h-label { color: var(--cg-day-50); font-weight: 600; }

.cg-adaptive-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
.cg-diff-col { padding: 8px 10px; border-radius: var(--radius-sm, 6px); font-family: var(--tpl-code); font-size: 0.68rem; line-height: 1.5; }
.cg-diff-h { display: block; font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 6px; font-weight: 600; }
.cg-diff-add { background: rgba(20, 163, 163, 0.1); border: 1px solid rgba(20, 163, 163, 0.28); }
.cg-diff-add .cg-diff-h { color: var(--cg-teal-300); }
.cg-diff-add li { color: var(--cg-day-50); padding: 2px 0; }
.cg-diff-drop { background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.08); }
.cg-diff-drop .cg-diff-h { color: var(--cg-day-300); }
.cg-diff-drop li { color: var(--cg-day-300); padding: 2px 0; text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.25); }

.cg-adaptive-foot {
  display: flex; align-items: center; gap: 10px; margin-top: var(--space-lg, 24px);
  padding: 14px 18px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent, var(--cg-azure-400)) 10%, transparent), transparent);
  border-left: 3px solid var(--accent, var(--cg-azure-400)); border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
  font-family: var(--tpl-accent); font-style: italic; font-size: 0.9rem; color: var(--cg-day-100); line-height: 1.55;
}

@media (max-width: 1100px) { .cg-adaptive-rail { grid-template-columns: 1fr 1fr; } .cg-adaptive-rail-line { display: none; } }
@media (max-width: 640px) { .cg-adaptive-rail { grid-template-columns: 1fr; } }

/* ── parallax toggle control (demo only, but token-driven so it can
   ship in production pages that want a user-facing motion switch) ── */
.viz-parallax-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm, 8px);
  margin-bottom: var(--space-lg, 24px);
}
.viz-parallax-toggle__note {
  font-size: 0.8rem;
  color: var(--tpl-text-2);
  max-width: 46ch;
}
@media (max-width: 599px) {
  .viz-parallax-toggle { display: flex; flex-direction: column; align-items: flex-start; }
  .viz-parallax-toggle .btn { white-space: nowrap; }
}

/* ════════════════════════════════════════════════════════
   12. COMPARISON TABLE (loop table)
   Rows are properties, columns are products or categories, each
   cell is yes / partial / no. The state is a token-colored glyph
   AND a visible word, never color alone. The scroll region keeps
   the page itself free of horizontal scroll at 360px.
   ════════════════════════════════════════════════════════ */
.cmp { padding: var(--space-3xl, 64px) 0; }
.cmp__scroll {
  overflow-x: auto;
  background: var(--tpl-card);
  border: 1px solid var(--tpl-border);
  border-radius: var(--radius-xl, 16px);
}
.cmp__table {
  width: 100%;
  min-width: 640px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.95rem;
}
.cmp__table th,
.cmp__table td {
  padding: var(--space-md, 16px);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--tpl-border-soft);
}
.cmp__table thead th {
  font-family: var(--tpl-display);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--tpl-text);
  background: var(--tpl-bg-soft);
  border-bottom: 1px solid var(--tpl-border);
}
.cmp__table tbody tr:last-child th,
.cmp__table tbody tr:last-child td { border-bottom: none; }
.cmp__table tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 190px;
  font-weight: 600;
  color: var(--tpl-text);
  background: var(--tpl-card);
  box-shadow: 1px 0 0 var(--tpl-border-soft);
}
.cmp__table thead th:first-child { position: sticky; left: 0; z-index: 2; box-shadow: 1px 0 0 var(--tpl-border-soft); }
.cmp__note {
  display: block;
  margin-top: var(--space-xs, 4px);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--tpl-muted);
}
.cmp__table .cmp__ours { background: var(--tpl-tint); }
.cmp__table thead .cmp__ours {
  box-shadow: inset 0 3px 0 var(--tpl-emphasis);
  color: var(--tpl-emphasis);
}

.cmp__cell {
  --cell-c: var(--tpl-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm, 8px);
  font-weight: 500;
  color: var(--tpl-text);
}
.cmp__cell::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid var(--cell-c);
  font-size: 11px;
  line-height: 14px;
  text-align: center;
  font-weight: 700;
}
.cmp__cell[data-value="yes"] { --cell-c: var(--tpl-ok); }
.cmp__cell[data-value="yes"]::before {
  content: "\2713";
  background: var(--cell-c);
  color: var(--tpl-on-emphasis);
}
.cmp__cell[data-value="partial"] { --cell-c: var(--tpl-partial); }
.cmp__cell[data-value="partial"]::before {
  background: linear-gradient(90deg, var(--cell-c) 50%, transparent 50%);
}
.cmp__cell[data-value="no"]::before {
  background: linear-gradient(var(--cell-c), var(--cell-c)) center / 8px 2px no-repeat;
}
.cmp__foot {
  margin-top: var(--space-md, 16px);
  font-family: var(--tpl-code);
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--tpl-muted);
  max-width: 80ch;
}

/* ════════════════════════════════════════════════════════
   13. EVIDENCE CARDS
   One short quotation per card in the accent serif, a citation
   line, an optional link.
   ════════════════════════════════════════════════════════ */
.evidence { padding: var(--space-3xl, 64px) 0; }
.evidence__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg, 24px);
  list-style: none;
  padding: 0;
}
.evidence-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md, 16px);
  height: 100%;
  margin: 0;
  padding: var(--space-lg, 24px);
  background: var(--tpl-card);
  border: 1px solid var(--tpl-border);
  border-top: 3px solid var(--tpl-emph-soft);
  border-radius: var(--radius-xl, 16px);
}
.evidence-card__quote {
  font-family: var(--tpl-accent);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.45;
  color: var(--tpl-text);
}
.evidence-card__foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-xs, 4px); }
.evidence-card__cite {
  font-family: var(--tpl-code);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  line-height: 1.5;
  color: var(--tpl-muted);
}
a.evidence-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: var(--touch-min, 44px);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--tpl-emphasis);
}
a.evidence-card__link:hover { color: var(--tpl-text); }
@media (min-width: 640px) { .evidence__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .evidence__grid { grid-template-columns: repeat(3, 1fr); } }

/* ════════════════════════════════════════════════════════
   14. AXIS TABS
   Four tabs, eight tiles per panel. The first panel is plain
   markup and is visible with no script. Without script, the other
   tabs are links to their panels (:target), so nothing is lost;
   with script they become a keyboard tablist (arrow keys, Home, End).
   ════════════════════════════════════════════════════════ */
.axes { padding: var(--space-3xl, 64px) 0; }
.axes__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs, 4px);
  margin-bottom: var(--space-xl, 32px);
  padding: var(--space-xs, 4px);
  background: var(--tpl-bg-section);
  border: 1px solid var(--tpl-border);
  border-radius: var(--radius-xl, 16px);
}
a.axis-tab {
  flex: 1 1 140px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--touch-min, 44px);
  padding: var(--space-sm, 8px) var(--space-md, 16px);
  border-radius: var(--radius-lg, 12px);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.25;
  color: var(--tpl-text-2);
  text-decoration: none;
}
a.axis-tab:hover { color: var(--tpl-text); background: var(--tpl-bg-soft); }
a.axis-tab[aria-selected="true"] {
  color: var(--tpl-text);
  background: var(--tpl-card);
  box-shadow: var(--shadow-sm), inset 0 -3px 0 var(--tpl-emphasis);
}
.axis-tab__meta {
  font-family: var(--tpl-code);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tpl-muted);
}
.axis-panel { display: block; }
.axis-panel[hidden] { display: none; }
.axis-panel[hidden]:target { display: block; }
.axes__panels:has(.axis-panel:target) > .axis-panel:not(:target) { display: none; }
.axis-panel__lede {
  max-width: 62ch;
  margin-bottom: var(--space-lg, 24px);
  color: var(--tpl-text-2);
  line-height: 1.65;
}
.axis-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md, 16px);
  list-style: none;
  padding: 0;
}
.axis-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 8px);
  padding: var(--space-lg, 24px) var(--space-md, 16px) var(--space-md, 16px);
  background: var(--tpl-card);
  border: 1px solid var(--tpl-border);
  border-radius: var(--radius-lg, 12px);
}
.axis-tile__title { font-size: 1rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.axis-tile__tag { font-size: 0.875rem; line-height: 1.55; color: var(--tpl-text-2); }
.axis-tile__badge {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm, 8px);
  padding-top: var(--space-xs, 4px);
  font-family: var(--tpl-code);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tpl-ok);
}
.axis-tile__badge::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--tpl-ok);
}
.axis-tile__vote {
  margin-top: auto;
  align-self: flex-start;
  min-height: var(--touch-min, 44px);
  padding: 0 var(--space-md, 16px);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tpl-emphasis);
  background: transparent;
  border: 1.5px solid var(--tpl-emph-soft);
  border-radius: var(--radius-pill, 9999px);
  cursor: pointer;
}
.axis-tile__vote[hidden] { display: none; }
.axis-tile__vote:hover { border-color: var(--tpl-emphasis); background: var(--tpl-tint); }
.axis-tile__vote[aria-pressed="true"] {
  color: var(--tpl-on-emphasis);
  background: var(--tpl-emphasis);
  border-color: var(--tpl-emphasis);
}
.axis-tile__vote:focus-visible { outline: 3px solid var(--tpl-focus); outline-offset: 2px; }
.axis-panel__more { margin-top: var(--space-lg, 24px); font-size: 0.95rem; }
.axis-panel__figure { margin-top: var(--space-xl, 32px); }
.axis-panel__figure:empty { display: none; }
@media (min-width: 640px) { .axis-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .axis-tiles { grid-template-columns: repeat(4, 1fr); } }

/* ════════════════════════════════════════════════════════
   15. CTA BAND (a dark region: set data-theme="dark" on it)
   ════════════════════════════════════════════════════════ */
.cta-band {
  padding: var(--space-4xl, 80px) 0;
  color: var(--tpl-text);
  background: linear-gradient(135deg, var(--cg-indigo-900) 0%, var(--cg-neutral-950) 100%);
}
.cta-band__inner { display: grid; grid-template-columns: 1fr; gap: var(--space-xl, 32px); align-items: center; }
.cta-band__title {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-md, 16px);
  color: var(--tpl-text);
}
.cta-band__body { color: var(--tpl-text-2); font-size: 1.05rem; line-height: 1.65; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-md, 16px); }
.cta-band__fine { grid-column: 1 / -1; font-size: 0.85rem; color: var(--tpl-muted); }
@media (min-width: 900px) {
  .cta-band__inner { grid-template-columns: 1.4fr 1fr; }
  .cta-band__actions { justify-content: flex-end; }
}

/* ════════════════════════════════════════════════════════
   16. QUOTE BAND
   ════════════════════════════════════════════════════════ */
.quote-band { padding: var(--space-4xl, 80px) 0; background: var(--tpl-tint); }
.quote-band__figure { max-width: 860px; margin: 0 auto; }
.quote-band__quote {
  max-width: 34ch;
  font-family: var(--tpl-accent);
  font-style: italic;
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.3;
  color: var(--tpl-text);
}
.quote-band__quote::before {
  content: "\201C";
  display: block;
  height: 0.5em;
  font-size: 4rem;
  line-height: 1;
  color: var(--tpl-emph-soft);
}
.quote-band__attr {
  margin-top: var(--space-lg, 24px);
  font-family: var(--tpl-code);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tpl-muted);
}

/* ════════════════════════════════════════════════════════
   17. STATUS BAND ("where things stand")
   A labeled list with a date. Each label has its own glyph shape
   (filled, ring, half, dashed) so state never depends on color.
   ════════════════════════════════════════════════════════ */
.status { padding: var(--space-3xl, 64px) 0; background: var(--tpl-bg-section); }
.status__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md, 16px);
  margin-bottom: var(--space-xl, 32px);
}
.status__head .section-head { margin-bottom: 0; }
.status__asof { font-family: var(--tpl-code); font-size: 0.8rem; color: var(--tpl-muted); }
.status__list { border-top: 1px solid var(--tpl-border); }
.status__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm, 8px);
  padding: var(--space-lg, 24px) 0;
  border-bottom: 1px solid var(--tpl-border);
}
.status__label {
  --st-c: var(--tpl-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm, 8px);
  font-family: var(--tpl-code);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tpl-text);
}
.status__label::before {
  content: "";
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid var(--st-c);
}
.status__item[data-status="built"] .status__label { --st-c: var(--tpl-ok); }
.status__item[data-status="built"] .status__label::before { background: var(--st-c); }
.status__item[data-status="active"] .status__label { --st-c: var(--tpl-info); }
.status__item[data-status="next"] .status__label { --st-c: var(--tpl-partial); }
.status__item[data-status="next"] .status__label::before { background: linear-gradient(90deg, var(--st-c) 50%, transparent 50%); }
.status__item[data-status="not-yet"] .status__label::before { border-style: dashed; }
.status__text { max-width: 64ch; color: var(--tpl-text); line-height: 1.65; }
@media (min-width: 640px) {
  .status__item { grid-template-columns: 200px 1fr; gap: var(--space-lg, 24px); }
}

/* ════════════════════════════════════════════════════════
   18. FORM (early access)
   Real labels, autocomplete tokens, visible focus, 44px controls,
   form-control borders at 3:1, an error line and a success state.
   data-state="success" on .ea-form shows the success block.
   ════════════════════════════════════════════════════════ */
.ea-form { padding: var(--space-3xl, 64px) 0; }
.ea-form__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-2xl, 48px); align-items: start; }
.ea-form__intro p { color: var(--tpl-text-2); line-height: 1.65; margin-bottom: var(--space-md, 16px); }
.ea-form__panel {
  padding: var(--space-xl, 32px) var(--space-lg, 24px);
  background: var(--tpl-card);
  border: 1px solid var(--tpl-border);
  border-radius: var(--radius-xl, 16px);
}
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-lg, 24px); }
.field__label { font-size: 0.95rem; font-weight: 600; color: var(--tpl-text); }
.field__hint { font-weight: 400; font-size: 0.85rem; color: var(--tpl-muted); }
.field__control {
  width: 100%;
  min-height: var(--touch-min, 44px);
  padding: 10px 14px;
  font: inherit;
  color: var(--tpl-text);
  background: var(--tpl-bg);
  border: 1.5px solid var(--tpl-field-border);
  border-radius: var(--radius-md, 8px);
}
textarea.field__control { min-height: 112px; resize: vertical; line-height: 1.5; }
.field__control:focus-visible {
  outline: 3px solid var(--tpl-focus);
  outline-offset: 2px;
  border-color: var(--tpl-emphasis);
}
.field__control[aria-invalid="true"] { border-color: var(--tpl-attention); }
.field__error {
  display: flex;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tpl-attention);
}
.field__error[hidden] { display: none; }
.field__error::before { content: "!"; font-weight: 700; }
.ea-form__actions { display: flex; flex-direction: column; gap: var(--space-md, 16px); }
.ea-form__actions .btn { align-self: flex-start; }
.ea-form__fine { font-size: 0.85rem; line-height: 1.55; color: var(--tpl-muted); }
.ea-form__success { display: none; }
.ea-form[data-state="success"] .ea-form__formwrap { display: none; }
.ea-form[data-state="success"] .ea-form__success { display: block; }
.ea-form__success:focus-visible { outline: 3px solid var(--tpl-focus); outline-offset: 4px; }
.ea-form__success-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-md, 16px);
  border-radius: 50%;
  background: var(--tpl-ok);
  color: var(--tpl-on-emphasis);
  font-size: 1.25rem;
  font-weight: 700;
}
.ea-form__success-title { font-size: 1.4rem; letter-spacing: -0.01em; margin-bottom: var(--space-sm, 8px); }
.ea-form__success p { color: var(--tpl-text-2); line-height: 1.65; }
@media (min-width: 900px) { .ea-form__grid { grid-template-columns: 1fr 1.1fr; } }

/* ════════════════════════════════════════════════════════
   19. YAR FIGURE PANELS (viz/yar-*.js)
   The five Yar figures sit in the same dark inset .viz-panel as
   every other figure; this modifier narrows them to a legible
   width (their viewBoxes are about 400 units wide, drawn for a
   360px phone) and centers them. Figure colors are the 300/400
   shades, so they read on the panel's ink in either theme.
   ════════════════════════════════════════════════════════ */
.viz-panel--yar { padding: var(--space-lg, 24px) var(--space-md, 16px); }
.viz-panel--yar .viz-panel__rule { margin-bottom: var(--space-md, 16px); }
.viz-panel--yar svg {
  max-width: 520px;
  margin-inline: auto;
}
.viz-panel--yar .viz-panel__caption { max-width: 60ch; margin-inline: auto; }
@media (min-width: 640px) { .viz-panel--yar { padding: var(--space-xl, 32px) var(--space-lg, 24px); } }
.yar-fig-row { display: grid; grid-template-columns: 1fr; gap: var(--space-xl, 32px); align-items: center; }
.yar-fig-row__copy p { color: var(--tpl-text-2); line-height: 1.65; margin-bottom: var(--space-md, 16px); }
@media (min-width: 900px) { .yar-fig-row { grid-template-columns: 1fr 1fr; gap: var(--space-2xl, 48px); } }