/* ═══════════════════════════════════════════════════════════════════════════
   AllGaia · allgaia-site.css · v1.4 · Locked 2026-05-17
   ═══════════════════════════════════════════════════════════════════════════
   Production stylesheet. Every template imports this.
   Edit centrally — never duplicate values inline.
   
   Table of contents:
     1. Tokens
     2. Reset & base
     3. Typography
     4. Layout primitives
     5. Navigation
     6. Footer
     7. Section system + bundle palette
     8. Cards (6 families)
     9. Pills, badges, tags
    10. CTAs and buttons
    11. Callouts, notes, blockquotes
    12. Forms
    13. Tables
    14. Lists
    15. Doorway pattern
    16. BFS-chain pattern
    17. Long-form pattern
    18. Document-index pattern
    19. Regulatory-grid pattern
    20. Gate pattern
    21. Presentation pattern
    22. Cookie banner
    23. Utilities
    24. Responsive + reduced motion
   ═══════════════════════════════════════════════════════════════════════════ */


/* ─── 1. TOKENS ──────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Aileron:wght@300;700&family=Open+Sauce+One:wght@500&family=JetBrains+Mono:wght@400&display=swap');

:root {
  /* Palette (CVI page 6) */
  --ag-gaia-teal:     #2AA8A8;
  --ag-gaia-sun:      #E47839;
  --ag-terracotta:    #B86440;
  --ag-deep-tide:     #357575;
  --ag-sage:          #A9B49E;
  --ag-charcoal:      #2B3333;

  /* Derived */
  --ag-teal-soft:     #bee2e2;
  --ag-teal-mid:      #3ca7a8;
  --ag-cream:         #f5f1e8;
  --ag-white:         #ffffff;

  /* Semantic */
  --ag-panel:         var(--ag-cream);
  --ag-border-subtle: rgba(40, 120, 123, 0.18);
  --ag-border-faint:  rgba(40, 120, 123, 0.12);
  --ag-shadow-rest:   0 14px 38px rgba(31, 85, 88, 0.065);
  --ag-shadow-hover:  0 18px 48px rgba(31, 85, 88, 0.10);
  --ag-shadow-menu:   0 4px 16px rgba(43, 51, 51, 0.12);
  --ag-shadow-image:  0 4px 16px rgba(43, 51, 51, 0.08);

  /* Type */
  --ag-font-head:     'Open Sauce One', system-ui, sans-serif;
  --ag-font-body:     'Aileron', system-ui, sans-serif;
  --ag-font-mono:     'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* Motion */
  --ag-ease:          ease;
  --ag-dur-hover:     120ms;
  --ag-dur-button:    160ms;
  --ag-dur-panel:     240ms;
}


/* ─── 2. RESET & BASE ─────────────────────────────────────────────────────── */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }

body {
  font-family: var(--ag-font-body);
  font-size: 17px;
  font-weight: 500;
  color: var(--ag-charcoal);
  line-height: 1.45;
  background: var(--ag-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 760px) {
  body { font-size: 16px; }
}


/* ─── 3. TYPOGRAPHY ───────────────────────────────────────────────────────── */

/* Headline — locked: Open Sauce Medium 500, -0.077em tracking, 1.06 leading */
.ag-h, h1.ag-h, h2.ag-h {
  font-family: var(--ag-font-head);
  font-weight: 500;
  font-size: clamp(36px, 5vw, 60px);
  letter-spacing: -0.077em;
  line-height: 1.06;
  color: inherit;
  margin: 0 0 36px;
}

.ag-sub {
  font-family: var(--ag-font-head);
  font-weight: 600;
  font-size: clamp(24px, 3vw, 36px);
  letter-spacing: -0.05em;
  line-height: 1.15;
  color: inherit;
  margin: 0 0 24px;
}

.ag-lead {
  font-family: var(--ag-font-body);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.45;
  max-width: 56ch;
  margin: 0 auto;
}

.ag-section--left .ag-lead { margin-left: 0; }

.eyebrow {
  font-family: var(--ag-font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ag-deep-tide);
  display: block;
  margin: 0 0 16px;
}
.on-dark .eyebrow { color: var(--ag-white); opacity: 0.85; }

.caption {
  font-family: var(--ag-font-body);
  font-weight: 300;
  font-style: italic;
  font-size: 13px;
  line-height: 1.4;
  color: inherit;
  opacity: 0.7;
  margin: 12px 0 0;
  max-width: 720px;
}

/* Inline links inside body text */
a.ag-inline, .ag-lead a, .long-form a, .card-body a, .ag-front-card a {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
  color: inherit;
  transition: opacity var(--ag-dur-hover) var(--ag-ease);
}
a.ag-inline:hover, .ag-lead a:hover, .long-form a:hover, .card-body a:hover {
  opacity: 0.7;
}

/* Code */
code {
  font-family: var(--ag-font-mono);
  font-size: 0.9em;
  background: var(--ag-cream);
  color: var(--ag-deep-tide);
  padding: 2px 6px;
  border-radius: 3px;
}
pre {
  font-family: var(--ag-font-mono);
  background: var(--ag-charcoal);
  color: var(--ag-cream);
  padding: 20px 24px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
  overflow-x: auto;
  margin: 32px 0;
}
pre code { background: transparent; color: inherit; padding: 0; }


/* ─── 4. LAYOUT PRIMITIVES ────────────────────────────────────────────────── */

.ag-section {
  padding: clamp(64px, 8vw, 100px) clamp(24px, 8vw, 120px);
  text-align: center;
  position: relative;
}
.ag-section--left { text-align: left; }

.on-dark  { color: var(--ag-white); }
.on-light { color: var(--ag-charcoal); }
.on-light .ag-h, .on-light h1.ag-h, .on-light h2.ag-h { color: var(--ag-deep-tide); }

.inner {
  max-width: 1100px;
  margin: 0 auto;
}


/* ─── 5. NAVIGATION — MENU BUTTON ONLY (no nav bar) ──────────────────────── */

/* Page-top wordmark — sits inside the first section, scrolls away with the page */
.ag-page-logo {
  display: block;
  position: absolute;
  top: clamp(40px, 5vw, 64px);
  left: clamp(24px, 8vw, 120px);
  z-index: 5;
  text-decoration: none;
}
.ag-page-logo svg {
  width: clamp(88px, 7vw, 110px);
  height: auto;
  display: block;
  color: var(--ag-charcoal);
}
/* Page-top wordmark recolours over the hero it sits in */
.ag-section.on-dark .ag-page-logo svg { color: var(--ag-white); }
.ag-section.on-light .ag-page-logo svg { color: var(--ag-deep-tide); }

/* When a section contains the page-logo, push its top padding down so logo
   and headline don't overlap. Modern browsers (97%+) support :has(). */
.ag-section:has(> .ag-page-logo),
.ag-section:has(> .ag-page-logo) > .inner:first-child {
  padding-top: clamp(140px, 14vw, 200px);
}
/* Fallback for older browsers: add class .has-page-logo manually if needed */
.ag-section.has-page-logo {
  padding-top: clamp(140px, 14vw, 200px);
}

/* MENU button — the ONLY sticky element on the page */
.ag-menu-btn {
  position: fixed;
  top: clamp(48px, 6vw, 80px);
  right: clamp(24px, 5vw, 48px);
  z-index: 100;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 2px solid var(--ag-deep-tide);
  color: var(--ag-deep-tide);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  box-shadow: var(--ag-shadow-menu);
  transition: background var(--ag-dur-button) var(--ag-ease), color var(--ag-dur-button) var(--ag-ease);
}
.ag-menu-btn:hover {
  background: var(--ag-deep-tide);
  color: var(--ag-white);
}
.ag-menu-btn svg { width: 24px; height: 18px; display: block; }
@media (max-width: 760px) {
  .ag-menu-btn { width: 56px; height: 56px; top: clamp(48px, 12vw, 64px); right: 16px; }
}

/* When the join banner is present at the top, push the MENU button below it
   so it doesn't overlap the banner text. The banner itself is not sticky,
   but the button sits below it from page load. */
body:has(.ag-join-strip) .ag-menu-btn {
  top: 96px;   /* desktop: 56px banner height + 40px breathing room */
}
@media (max-width: 760px) {
  body:has(.ag-join-strip) .ag-menu-btn {
    top: 112px;  /* mobile: ~80px banner (2 lines wrap) + 32px breathing room */
  }
}

/* MENU panel — narrow panel slides in from right (NOT full-screen) */
.ag-menu-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 480px;
  z-index: 110;
  background: var(--ag-cream);
  box-shadow: -16px 0 48px rgba(43, 51, 51, 0.18);
  overflow-y: auto;
  display: none;
  animation: ag-menu-slide var(--ag-dur-panel) var(--ag-ease);
}
.ag-menu-panel[aria-hidden="false"],
.ag-menu-panel.is-open { display: block; }
@keyframes ag-menu-slide {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Scrim behind the panel — darkens the rest of the page */
.ag-menu-scrim {
  position: fixed;
  inset: 0;
  z-index: 109;
  background: rgba(43, 51, 51, 0.4);
  display: none;
  animation: ag-menu-fade var(--ag-dur-panel) var(--ag-ease);
}
.ag-menu-scrim.is-open { display: block; }
@keyframes ag-menu-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.ag-menu-panel-inner {
  padding: 80px 40px 40px;
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.ag-menu-panel-close {
  position: absolute;
  top: 24px;
  right: 24px;
  background: transparent;
  border: none;
  width: 44px;
  height: 44px;
  font-size: 28px;
  line-height: 1;
  color: var(--ag-charcoal);
  cursor: pointer;
  transition: color var(--ag-dur-hover) var(--ag-ease);
}
.ag-menu-panel-close:hover { color: var(--ag-deep-tide); }

.ag-menu-panel-header { margin-bottom: 48px; }
.ag-menu-panel-logo {
  width: 128px;
  height: auto;
  color: var(--ag-charcoal);
  display: block;
}
.ag-menu-panel-tagline {
  font-family: var(--ag-font-body);
  font-weight: 300;
  font-style: italic;
  font-size: 15px;
  color: var(--ag-charcoal);
  opacity: 0.7;
  max-width: 32ch;
  margin: 12px 0 0;
  line-height: 1.4;
}

.ag-menu-panel-links {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
}
.ag-menu-panel-links li { margin-bottom: 4px; }
.ag-menu-panel-links a {
  font-family: var(--ag-font-head);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ag-charcoal);
  text-decoration: none;
  display: inline-block;
  padding: 6px 0;
  position: relative;
  transition: color var(--ag-dur-hover) var(--ag-ease);
}
.ag-menu-panel-links a:hover { color: var(--ag-deep-tide); }
.ag-menu-panel-links a[aria-current="page"] {
  color: var(--ag-deep-tide);
  padding-left: 16px;
}
.ag-menu-panel-links a[aria-current="page"]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  background: var(--ag-gaia-sun);
}
@media (min-width: 761px) {
  .ag-menu-panel-links a { font-size: 16px; }
}

.ag-menu-panel-cta {
  display: block;
  background: var(--ag-gaia-sun);
  color: var(--ag-white) !important;
  padding: 16px 32px;
  border-radius: 4px;
  font-family: var(--ag-font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-align: center;
  margin-bottom: 32px;
  transition: background var(--ag-dur-button) var(--ag-ease);
}
.ag-menu-panel-cta:hover { background: var(--ag-terracotta); }

.ag-menu-panel-foot {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--ag-border-subtle);
  font-family: var(--ag-font-body);
  font-weight: 300;
  font-size: 13px;
  color: var(--ag-charcoal);
  opacity: 0.7;
}
.ag-menu-panel-foot a {
  color: inherit;
  text-decoration: none;
  transition: color var(--ag-dur-hover) var(--ag-ease);
}
.ag-menu-panel-foot a:hover { color: var(--ag-deep-tide); }

/* Body when menu is open — lock scroll */
body.ag-menu-open { overflow: hidden; }


/* ─── 6. FOOTER ───────────────────────────────────────────────────────────── */

.footer {
  padding: clamp(56px, 7vw, 88px) clamp(24px, 8vw, 120px);
  color: var(--ag-white);
}

/* Bundle variants for footer */
.footer--org {
  background: radial-gradient(ellipse at 15% 20%, var(--ag-deep-tide) 0%, var(--ag-teal-mid) 75%);
}
.footer--com {
  background-color: var(--ag-teal-mid);
  background-image:
    radial-gradient(ellipse at 90% 10%, var(--ag-teal-soft) 0%, transparent 55%),
    radial-gradient(ellipse at 10% 85%, var(--ag-teal-soft) 0%, transparent 50%);
}

.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
  font-family: var(--ag-font-body);
  font-weight: 300;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
}

.footer-row a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  transition: opacity var(--ag-dur-hover) var(--ag-ease);
}
.footer-row a:hover {
  opacity: 1;
  color: var(--ag-white);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer-wordmark {
  width: 80px;
  height: auto;
  display: block;
  color: var(--ag-white);
  opacity: 0.85;
  margin-top: 32px;
}


/* ─── 7. SECTION SYSTEM + BUNDLE PALETTE ──────────────────────────────────── */

.ag-bg-grad-01 {
  background-color: var(--ag-teal-mid);
  background-image:
    radial-gradient(ellipse at 90% 10%, var(--ag-teal-soft) 0%, transparent 55%),
    radial-gradient(ellipse at 10% 85%, var(--ag-teal-soft) 0%, transparent 50%);
}
.ag-bg-grad-02 {
  background-color: var(--ag-teal-soft);
  background-image:
    radial-gradient(ellipse at 5% 5%, var(--ag-gaia-sun) 0%, transparent 50%),
    radial-gradient(ellipse at 95% 95%, var(--ag-teal-mid) 0%, transparent 55%);
}
.ag-bg-grad-03 {
  background: radial-gradient(ellipse at 15% 20%, var(--ag-deep-tide) 0%, var(--ag-teal-mid) 75%);
}
.ag-bg-terracotta { background: var(--ag-terracotta); }
.ag-bg-gaia-sun   { background: var(--ag-gaia-sun); }
.ag-bg-sage       { background: var(--ag-sage); }
.ag-bg-cream      { background: var(--ag-cream); }
.ag-bg-white      { background: var(--ag-white); }


/* ─── 8. CARDS ────────────────────────────────────────────────────────────── */

/* 8.1 ag-front-card — doorway card */
.ag-front-card {
  background: var(--ag-cream);
  border: 1px solid var(--ag-border-subtle);
  border-radius: 22px;
  padding: 40px;
  color: var(--ag-charcoal);
  box-shadow: var(--ag-shadow-rest);
  display: flex;
  flex-direction: column;
  text-align: left;
  transition: box-shadow var(--ag-dur-button) var(--ag-ease),
              border-color var(--ag-dur-button) var(--ag-ease);
}
/* Calm clickable affordance — applies when the card is wrapped in <a> */
a.ag-front-card {
  text-decoration: none;
  cursor: pointer;
}
a.ag-front-card:hover {
  box-shadow: var(--ag-shadow-hover);
  border-color: var(--ag-deep-tide);
}
a.ag-front-card:hover strong {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.ag-front-card strong {
  font-family: var(--ag-font-head);
  font-weight: 600;
  font-size: clamp(28px, 3vw, 36px);
  color: var(--ag-deep-tide);
  letter-spacing: -0.077em;
  line-height: 1.06;
  margin-bottom: 16px;
  display: block;
}
.ag-front-card span {
  font-family: var(--ag-font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.45;
  display: block;
}

.ag-door-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 32px);
  margin-top: 56px;
}
@media (max-width: 880px) {
  .ag-door-grid { grid-template-columns: 1fr; }
}

/* 8.2 ag-simple-card — section card */
.ag-simple-card {
  border-radius: 28px;
  padding: clamp(64px, 8vw, 120px) clamp(32px, 6vw, 80px);
  max-width: 1100px;
  margin: 80px auto;
}
.ag-simple-card.on-dark { color: var(--ag-white); }
.ag-simple-card.on-light { color: var(--ag-charcoal); }

/* 8.3 doc-card — document card (block anchor) */
.doc-card {
  display: block;
  background: var(--ag-cream);
  border: 1px solid var(--ag-border-faint);
  border-radius: 22px;
  padding: 24px;
  text-decoration: none;
  color: var(--ag-charcoal);
  cursor: pointer;
  transition: box-shadow var(--ag-dur-button) var(--ag-ease),
              border-color var(--ag-dur-button) var(--ag-ease);
}
.doc-card:hover {
  box-shadow: var(--ag-shadow-hover);
  border-color: var(--ag-deep-tide);
}
.doc-card:hover h3 {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.doc-card .doc-eyebrow {
  font-family: var(--ag-font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ag-deep-tide);
  opacity: 0.7;
  display: block;
  margin-bottom: 12px;
}
.doc-card h3 {
  font-family: var(--ag-font-head);
  font-weight: 600;
  font-size: 22px;
  color: var(--ag-deep-tide);
  letter-spacing: -0.077em;
  margin: 0 0 12px;
}
.doc-card p {
  font-family: var(--ag-font-body);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.45;
  margin: 0 0 16px;
}
.doc-card .doc-meta {
  font-family: var(--ag-font-body);
  font-weight: 500;
  font-size: 12px;
  color: var(--ag-charcoal);
  opacity: 0.6;
}

.doc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 960px) { .doc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .doc-grid { grid-template-columns: 1fr; } }

/* 8.4 bfs-card / chain-card */
.bfs-card {
  background: var(--ag-cream);
  border: 1px solid var(--ag-border-faint);
  border-radius: 22px;
  padding: 32px 28px;
  text-align: left;
}
.on-dark .bfs-card {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--ag-white);
}
.chain-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ag-deep-tide);
  color: var(--ag-white);
  font-family: var(--ag-font-head);
  font-weight: 500;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.chain-label {
  font-family: var(--ag-font-head);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.05em;
  color: var(--ag-deep-tide);
  margin: 0 0 12px;
}
.on-dark .chain-label { color: var(--ag-white); }

.chain-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 760px) { .chain-grid { grid-template-columns: 1fr; } }

.chain-nav {
  display: flex;
  justify-content: space-between;
  padding: clamp(40px, 6vw, 80px) clamp(24px, 8vw, 120px);
  background: var(--ag-cream);
  border-top: 1px solid var(--ag-border-subtle);
}
.chain-prev, .chain-next {
  font-family: var(--ag-font-body);
  font-weight: 700;
  font-size: 15px;
  color: var(--ag-deep-tide);
  text-decoration: none;
}
.chain-prev:hover, .chain-next:hover { opacity: 0.7; }

/* 8.5 feature-card / generic */
.feature-card,
.partners-cta-card,
.support-card,
.solution-card,
.proof-card {
  background: var(--ag-cream);
  border-radius: 22px;
  padding: 32px;
  text-align: left;
}
.on-dark .feature-card,
.on-dark .partners-cta-card,
.on-dark .support-card,
.on-dark .solution-card {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ag-white);
}
.card-num {
  font-family: var(--ag-font-head);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--ag-deep-tide);
  opacity: 0.6;
  display: block;
  margin-bottom: 16px;
}
.on-dark .card-num { color: var(--ag-white); }
.card-title {
  font-family: var(--ag-font-head);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.05em;
  color: var(--ag-deep-tide);
  margin: 0 0 12px;
}
.on-dark .card-title { color: var(--ag-white); }
.card-body {
  font-family: var(--ag-font-body);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.45;
}

/* 8.6 gate-card */
.gate-card {
  background: var(--ag-cream);
  border: 1.5px solid var(--ag-deep-tide);
  border-radius: 22px;
  padding: 48px;
  max-width: 480px;
  margin: 0 auto;
  text-align: left;
  color: var(--ag-charcoal);
}
.gate-card h2 {
  font-family: var(--ag-font-head);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: -0.077em;
  color: var(--ag-deep-tide);
  margin: 16px 0 16px;
}
.gate-card p {
  font-family: var(--ag-font-body);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.45;
  margin: 0 0 24px;
}
.gate-input {
  width: 100%;
  height: 48px;
  background: var(--ag-white);
  border: 1.5px solid #D4D4CC;
  border-radius: 4px;
  padding: 0 16px;
  font-family: var(--ag-font-body);
  font-weight: 300;
  font-size: 16px;
  color: var(--ag-charcoal);
  margin-bottom: 16px;
}
.gate-input:focus {
  outline: 3px solid rgba(53, 117, 117, 0.15);
  border-color: var(--ag-deep-tide);
}
.gate-help {
  font-family: var(--ag-font-body);
  font-weight: 300;
  font-size: 13px;
  color: var(--ag-charcoal);
  opacity: 0.7;
  margin-top: 24px;
}
.gate-error {
  font-family: var(--ag-font-body);
  font-weight: 300;
  font-size: 13px;
  color: var(--ag-terracotta);
  margin-top: 16px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ─── 9. PILLS, BADGES, TAGS ──────────────────────────────────────────────── */

.ag-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-family: var(--ag-font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ag-status-pill--amber { background: rgba(228, 120, 57, 0.15); color: var(--ag-gaia-sun); }
.ag-status-pill--green { background: rgba(169, 180, 158, 0.30); color: var(--ag-deep-tide); }
.ag-status-pill--red   { background: rgba(184, 100, 64, 0.15); color: var(--ag-terracotta); }

.nav-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--ag-cream);
  border: 1px solid var(--ag-border-subtle);
  font-family: var(--ag-font-body);
  font-weight: 300;
  font-size: 13px;
  color: var(--ag-deep-tide);
  text-decoration: none;
  transition: background var(--ag-dur-button) var(--ag-ease), color var(--ag-dur-button) var(--ag-ease);
}
.nav-pill:hover, .nav-pill--active {
  background: var(--ag-deep-tide);
  color: var(--ag-white);
}

/* Static / quiet-link variant — same visual as nav-pill, no dramatic hover flip.
   Used in two phases:
   1. Now: as <span> for category labels whose destinations don't exist yet.
   2. Future: as <a href> linking to the destination once it exists.
   Either way, no background-flip-to-DeepTide on hover (which makes text white
   on Cream — invisible). Instead: subtle border darkening only. */
.nav-pill--static {
  cursor: default;
}
.nav-pill--static:hover {
  background: var(--ag-cream);
  color: var(--ag-deep-tide);
  border-color: var(--ag-deep-tide);
}
/* When the static pill becomes a real link (a[href]), upgrade the cursor
   to pointer but keep the calm hover. The conversion is simply:
   <span class="nav-pill nav-pill--static"> → <a class="nav-pill nav-pill--static" href="..."> */
a.nav-pill--static {
  cursor: pointer;
}
a.nav-pill--static:hover {
  background: var(--ag-cream);
  color: var(--ag-deep-tide);
  border-color: var(--ag-deep-tide);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.decision-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--ag-deep-tide);
  color: var(--ag-white);
  font-family: var(--ag-font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}


/* ─── 10. CTAS AND BUTTONS ────────────────────────────────────────────────── */

/* Base button reset */
.btn-primary,
.btn-secondary,
.btn-tertiary,
.btn-ghost,
.btn-submit,
.cta-primary,
.cta-secondary,
.hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ag-font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  border-radius: 4px;
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ag-dur-button) var(--ag-ease), color var(--ag-dur-button) var(--ag-ease);
}

.btn-primary, .btn-submit, .cta-primary {
  background: var(--ag-deep-tide);
  color: var(--ag-white);
  padding: 14px 32px;
}
.btn-primary:hover, .btn-submit:hover, .cta-primary:hover {
  background: var(--ag-gaia-teal);
}

.cta-primary { padding: 16px 36px; }

.btn-secondary, .cta-secondary {
  background: var(--ag-white);
  border-color: var(--ag-deep-tide);
  color: var(--ag-deep-tide);
  padding: 14px 32px;
}
.btn-secondary:hover, .cta-secondary:hover {
  background: var(--ag-deep-tide);
  color: var(--ag-white);
}
.cta-secondary { padding: 16px 36px; }

.btn-tertiary, .btn-ghost {
  background: transparent;
  color: var(--ag-deep-tide);
  padding: 8px 0;
  border-radius: 0;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}
.btn-tertiary:hover, .btn-ghost:hover { opacity: 0.7; }

.hero-cta {
  background: var(--ag-white);
  color: var(--ag-deep-tide);
  padding: 16px 36px;
}
.hero-cta:hover { background: var(--ag-cream); }

.btn-primary:disabled, .btn-submit:disabled {
  background: rgba(43, 51, 51, 0.2);
  color: rgba(255, 255, 255, 0.7);
  cursor: not-allowed;
}

.btn-row,
.cta-row,
.ag-cta-row,
.ag-door-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
}
.ag-section--left .btn-row,
.ag-section--left .cta-row,
.ag-section--left .ag-cta-row { justify-content: flex-start; }

/* CTA strip */
.cta-band {
  background-color: var(--ag-teal-soft);
  background-image:
    radial-gradient(ellipse at 5% 5%, var(--ag-gaia-sun) 0%, transparent 50%),
    radial-gradient(ellipse at 95% 95%, var(--ag-teal-mid) 0%, transparent 55%);
  padding: 32px clamp(24px, 8vw, 120px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: var(--ag-charcoal);
}
.cta-band p {
  font-family: var(--ag-font-head);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.05em;
  color: var(--ag-deep-tide);
  margin: 0;
}
@media (max-width: 760px) {
  .cta-band { flex-direction: column; align-items: flex-start; }
}

/* Inline arrow link */
.text-cta, .inline-cta {
  font-family: var(--ag-font-body);
  font-weight: 700;
  font-size: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
  transition: opacity var(--ag-dur-hover) var(--ag-ease);
  display: inline-block;
  margin-top: 16px;
}
.text-cta:hover, .inline-cta:hover { opacity: 0.7; }

/* Nav join CTA already styled in section 5 */


/* ─── 11. CALLOUTS, NOTES, BLOCKQUOTES ────────────────────────────────────── */

.callout {
  background: var(--ag-cream);
  border-left: 3px solid var(--ag-deep-tide);
  padding: 20px 24px;
  border-radius: 0 4px 4px 0;
  max-width: 720px;
  margin: 32px 0;
}
.callout strong {
  font-family: var(--ag-font-head);
  font-weight: 500;
  font-size: 16px;
  color: var(--ag-deep-tide);
  display: block;
  margin-bottom: 8px;
}
.callout p {
  font-family: var(--ag-font-body);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ag-charcoal);
  margin: 0;
}

.note {
  font-family: var(--ag-font-body);
  font-weight: 300;
  font-style: italic;
  font-size: 14px;
  color: var(--ag-charcoal);
  opacity: 0.7;
  max-width: 56ch;
  margin: 16px 0;
}
.note::before {
  content: 'Note. ';
  font-weight: 700;
  font-style: normal;
}

.alert {
  background: var(--ag-cream);
  border-left: 3px solid var(--ag-terracotta);
  padding: 20px 24px;
  border-radius: 0 4px 4px 0;
  max-width: 720px;
  margin: 32px 0;
}
.alert strong {
  font-family: var(--ag-font-head);
  font-weight: 500;
  font-size: 15px;
  color: var(--ag-terracotta);
  display: block;
  margin-bottom: 4px;
}
.alert p {
  font-family: var(--ag-font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ag-charcoal);
  margin: 0;
}

blockquote {
  margin: 32px 0;
  padding-left: 24px;
  border-left: 3px solid var(--ag-gaia-sun);
}
blockquote p {
  font-family: var(--ag-font-body);
  font-weight: 500;
  font-style: italic;
  font-size: 17px;
  color: inherit;
  margin: 0;
}
blockquote cite {
  font-family: var(--ag-font-body);
  font-weight: 700;
  font-size: 13px;
  font-style: normal;
  color: inherit;
  display: block;
  margin-top: 12px;
}

.pullquote {
  position: relative;
  max-width: 720px;
  margin: 64px auto;
  text-align: center;
  padding: 0 32px;
}
.pullquote::before {
  content: '"';
  position: absolute;
  top: -32px;
  left: 0;
  font-family: var(--ag-font-head);
  font-size: 84px;
  color: var(--ag-gaia-sun);
  opacity: 0.4;
  line-height: 1;
}
.pullquote p {
  font-family: var(--ag-font-head);
  font-weight: 500;
  font-size: clamp(28px, 3.5vw, 44px);
  letter-spacing: -0.077em;
  line-height: 1.15;
  color: var(--ag-deep-tide);
  margin: 0;
}
.on-dark .pullquote p { color: var(--ag-white); }
.pullquote cite {
  font-family: var(--ag-font-body);
  font-weight: 700;
  font-size: 13px;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ag-deep-tide);
  opacity: 0.7;
  display: block;
  margin-top: 24px;
}
.on-dark .pullquote cite { color: var(--ag-white); opacity: 0.85; }


/* ─── 12. FORMS ───────────────────────────────────────────────────────────── */

.kec-form {
  max-width: 480px;
  margin: 0 auto;
  text-align: left;
}
.ag-section--left .kec-form { margin-left: 0; }

.kec-form label {
  font-family: var(--ag-font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ag-charcoal);
  display: block;
  margin-bottom: 8px;
}
.kec-form label .req {
  color: var(--ag-gaia-sun);
  margin-left: 2px;
}

.kec-input,
.kec-form input[type="text"],
.kec-form input[type="email"],
.kec-form input[type="password"],
.kec-form input[type="tel"],
.kec-form select,
.kec-form textarea {
  width: 100%;
  height: 48px;
  background: var(--ag-white);
  border: 1.5px solid #D4D4CC;
  border-radius: 4px;
  padding: 0 16px;
  font-family: var(--ag-font-body);
  font-weight: 300;
  font-size: 16px;
  color: var(--ag-charcoal);
  margin-bottom: 24px;
  transition: border-color var(--ag-dur-hover) var(--ag-ease), outline-color var(--ag-dur-hover) var(--ag-ease);
}
.kec-form textarea {
  min-height: 120px;
  padding: 12px 16px;
  resize: vertical;
}
.kec-form input:focus,
.kec-form select:focus,
.kec-form textarea:focus {
  outline: 3px solid rgba(53, 117, 117, 0.15);
  border-color: var(--ag-deep-tide);
}
.kec-form input.has-error,
.kec-form textarea.has-error {
  border-color: var(--ag-terracotta);
}
.field-error {
  font-family: var(--ag-font-body);
  font-weight: 300;
  font-size: 13px;
  color: var(--ag-terracotta);
  margin: -16px 0 24px;
}

.kec-form input[type="checkbox"],
.kec-form input[type="radio"] {
  width: 20px;
  height: 20px;
  margin: 0 8px 0 0;
  accent-color: var(--ag-deep-tide);
}


/* ─── 13. TABLES ──────────────────────────────────────────────────────────── */

table.reg-grid,
table.ag-table {
  width: 100%;
  max-width: 1100px;
  margin: 48px auto;
  border-collapse: collapse;
}
table.reg-grid thead,
table.ag-table thead {
  background: var(--ag-deep-tide);
  color: var(--ag-white);
}
table.reg-grid th,
table.ag-table th {
  font-family: var(--ag-font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  padding: 14px 20px;
}
table.reg-grid td,
table.ag-table td {
  background: var(--ag-white);
  font-family: var(--ag-font-body);
  font-weight: 300;
  font-size: 15px;
  color: var(--ag-charcoal);
  padding: 14px 20px;
  border-bottom: 1px solid #E8E5DE;
}
table.reg-grid td strong {
  font-family: var(--ag-font-head);
  font-weight: 500;
  color: var(--ag-deep-tide);
}
table.reg-grid td.num,
table.ag-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}


/* ─── 14. LISTS ───────────────────────────────────────────────────────────── */

.long-form ul,
.ag-lead ul {
  list-style: none;
  padding-left: 24px;
  margin: 16px 0;
}
.long-form ul li,
.ag-lead ul li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 12px;
}
.long-form ul li::before,
.ag-lead ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 4px;
  height: 4px;
  background: var(--ag-gaia-sun);
}

.long-form ol {
  padding-left: 32px;
  margin: 16px 0;
}
.long-form ol li {
  margin-bottom: 12px;
  padding-left: 8px;
}
.long-form ol li::marker {
  font-family: var(--ag-font-head);
  font-weight: 500;
  color: var(--ag-deep-tide);
}

.long-form dl { margin: 24px 0; }
.long-form dt {
  font-family: var(--ag-font-body);
  font-weight: 700;
  font-size: 15px;
  color: var(--ag-deep-tide);
  margin-top: 20px;
}
.long-form dd {
  font-family: var(--ag-font-body);
  font-weight: 300;
  font-size: 15px;
  color: var(--ag-charcoal);
  margin: 4px 0 0;
}


/* ─── 15. DOORWAY PATTERN ────────────────────────────────────────────────── */

.ag-simple-page {
  padding: calc(112px + 32px) clamp(24px, 5vw, 48px) 80px;
}
body.ag-door-page .ag-simple-page {
  padding-top: calc(112px + 56px);
}
.ag-simple-page .section.ag-simple-card {
  background: radial-gradient(ellipse at 15% 20%, var(--ag-deep-tide) 0%, var(--ag-teal-mid) 75%);
  color: var(--ag-white);
}
.ag-simple-page .section.ag-simple-card .page-title {
  font-family: var(--ag-font-head);
  font-weight: 500;
  font-size: clamp(40px, 6vw, 72px);
  letter-spacing: -0.077em;
  line-height: 1.06;
  margin: 0 0 32px;
  color: var(--ag-white);
}
.ag-simple-page .section.ag-simple-card .lead {
  font-family: var(--ag-font-body);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.45;
  max-width: 56ch;
  margin: 0 0 32px;
  color: rgba(255, 255, 255, 0.92);
}
.ag-door-note {
  font-family: var(--ag-font-body);
  font-weight: 300;
  font-style: italic;
  font-size: 14px;
  opacity: 0.8;
  margin-top: 32px;
  max-width: 56ch;
}


/* ─── 16. BFS-CHAIN PATTERN ──────────────────────────────────────────────── */

/* Most of BFS uses .bfs-card / .chain-* defined in section 8.4 */
/* Page-level only needs nav offset, which all pages already get */


/* ─── 17. LONG-FORM PATTERN ──────────────────────────────────────────────── */

.long-form {
  max-width: 720px;
  margin: 0 auto;
}
.ag-section--left .long-form { margin: 0; }
.long-form h2 {
  font-family: var(--ag-font-head);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 36px);
  letter-spacing: -0.05em;
  line-height: 1.15;
  color: var(--ag-deep-tide);
  margin: 56px 0 16px;
}
.long-form h3 {
  font-family: var(--ag-font-body);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ag-deep-tide);
  margin: 40px 0 12px;
}
.long-form p {
  font-family: var(--ag-font-body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.45;
  max-width: 64ch;
  margin: 0 0 16px;
}
.long-form strong { font-weight: 700; }
.long-form em { font-style: italic; }

.long-form-toc {
  background: var(--ag-cream);
  border-radius: 22px;
  padding: 32px;
  max-width: 480px;
  margin-bottom: 32px;
}
.long-form-toc .eyebrow { margin-bottom: 12px; }
.long-form-toc ol {
  padding-left: 24px;
  margin: 0;
}
.long-form-toc li {
  font-family: var(--ag-font-body);
  font-weight: 300;
  font-size: 15px;
  margin-bottom: 8px;
}
.long-form-toc a {
  color: var(--ag-deep-tide);
  text-decoration: none;
}
.long-form-toc a:hover { text-decoration: underline; text-underline-offset: 4px; }


/* ─── 18. DOCUMENT-INDEX PATTERN ─────────────────────────────────────────── */

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 1100px;
  margin: 0 auto 48px;
}


/* ─── 19. REGULATORY-GRID PATTERN ────────────────────────────────────────── */

/* Most styling lives in section 13 (.reg-grid). Mobile rows-to-cards: */
@media (max-width: 760px) {
  table.reg-grid thead { display: none; }
  table.reg-grid tr {
    display: block;
    background: var(--ag-white);
    border: 1px solid var(--ag-border-faint);
    border-radius: 22px;
    padding: 20px;
    margin-bottom: 16px;
  }
  table.reg-grid td {
    display: block;
    padding: 8px 0;
    border: 0;
  }
  table.reg-grid td::before {
    content: attr(data-label);
    font-family: var(--ag-font-body);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ag-deep-tide);
    opacity: 0.7;
    display: block;
    margin-bottom: 4px;
  }
}


/* ─── 20. GATE PATTERN ───────────────────────────────────────────────────── */

.gate-page .ag-section {
  min-height: calc(100vh - 112px);
  display: flex;
  align-items: center;
}


/* ─── 21. PRESENTATION PATTERN ───────────────────────────────────────────── */

.presentation { scroll-snap-type: y mandatory; }
.presentation-slide {
  min-height: 90vh;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.presentation-slide.ag-section--left {
  align-items: flex-start;
  text-align: left;
}


/* ─── 22. COOKIE BANNER ──────────────────────────────────────────────────── */

.ag-cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--ag-cream);
  border-top: 2px solid var(--ag-deep-tide);
  padding: 20px clamp(24px, 5vw, 48px);
}
.ag-cookie-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  max-width: 1100px;
  margin: 0 auto;
}
.ag-cookie-text {
  font-family: var(--ag-font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ag-charcoal);
  max-width: 56ch;
  margin: 0;
}
.ag-cookie-buttons { display: flex; gap: 12px; }


/* ─── 23. UTILITIES ──────────────────────────────────────────────────────── */

.ag-join-strip {
  background: var(--ag-gaia-sun);
  color: var(--ag-white);
  padding: 12px clamp(20px, 5vw, 48px);
  font-family: var(--ag-font-body);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.ag-join-strip a {
  color: var(--ag-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ag-join-strip button {
  background: transparent;
  border: none;
  color: var(--ag-white);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}

/* No fixed nav — main has no top offset. Page-top wordmark sits inside the first section. */
main { padding-top: 0; }

.sr-only-focusable {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  clip: auto;
  padding: 12px 20px;
  background: var(--ag-deep-tide);
  color: var(--ag-white);
}


/* ─── 24. RESPONSIVE + REDUCED MOTION ────────────────────────────────────── */

/* (No nav-bar media queries needed — there is no nav bar.
   The MENU button + panel handle their own responsive sizing inline.) */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}