/* ============================================================
   LII — Leadership Impact Institute
   components.css  |  v1.0  |  March 2026
   All reusable UI components. Requires global.css.
   12 component families — indexed below.
   ============================================================

   01. NAVIGATION
   02. BUTTONS
   03. HERO
   04. CARDS
   05. CERTIFICATION BADGE
   06. COMPARISON TABLE
   07. PROCESS STEPS
   08. STAT BLOCKS
   09. SECTION VARIANTS (padding overrides)
   10. FOOTER
   11. FORM EMBED
   12. ALERT BANNER

   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   01. NAVIGATION
   Fixed top, navy background. Hamburger below 768px.
   Dropdowns for Certifications and Accreditation.
   ───────────────────────────────────────────────────────────── */

/* Skip-to-content link — visible on focus only */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  background: var(--color-gold);
  color: var(--color-navy);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-small);
  padding: 0.6rem 1.25rem;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  text-decoration: none;
  transition: top var(--transition-fast);
}

.skip-link:focus-visible {
  top: 0;
  outline: 2px solid var(--color-navy);
  outline-offset: -2px;
}

/* Site header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: var(--color-navy);
  box-shadow: var(--shadow-nav);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--content-padding);
  height: 68px;
}

/* Logo — Variant B: LII · Leadership Impact Institute (approved April 2026)
   Desktop: LII mark + separator + Playfair wordmark
   ≤900px:  LII mark only (sep + wordmark hidden)            */

/* Scoped to site-header to avoid inheriting flex on footer
   anchors that also carry the nav-logo class.               */
.site-header .nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
  flex-shrink: 0;
}

.nav-logo-code {
  font-family: var(--font-body); /* Inter 700 */
  font-weight: 700;
  font-size: 1.45rem;
  color: var(--color-gold);
  letter-spacing: -0.02em;
  line-height: 1;
}

.sep {
  display: inline-block;
  margin: 0 0.45rem;
  color: rgba(255, 255, 255, 0.70);
  font-size: 0.95rem;
  line-height: 1;
  transform: translateY(-0.02em);
  user-select: none;
}

.nav-logo-name {
  display: inline-block;
  font-family: var(--font-heading); /* Playfair Display 600 */
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  color: var(--color-white);
  white-space: nowrap;
  line-height: 1.1;
}

@media (max-width: 900px) {
  .nav-logo-name,
  .sep {
    display: none;
  }
}

/* Desktop nav — horizontal links */
.nav-links {
  display: none; /* hidden on mobile */
  align-items: center;
  gap: 0.25rem;
  list-style: none;
}

@media (min-width: 768px) {
  .nav-links {
    display: flex;
  }
}

.nav-links > li {
  position: relative;
}

.nav-links a,
.nav-links button.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: color var(--transition-fast);
  white-space: nowrap;
}

.nav-links a:hover,
.nav-links button.nav-dropdown-toggle:hover {
  color: var(--color-gold);
}

/* Active page indicator */
.nav-links a[aria-current="page"] {
  color: var(--color-gold);
  position: relative;
}

.nav-links a[aria-current="page"]::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0.75rem;
  right: 0.75rem;
  height: 2px;
  background-color: var(--color-gold);
  border-radius: 1px;
}

/* Dropdown chevron */
.nav-chevron {
  width: 10px;
  height: 10px;
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}

.nav-dropdown-toggle[aria-expanded="true"] .nav-chevron {
  transform: rotate(180deg);
}

/* Dropdown panel */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 220px;
  background-color: var(--color-navy);
  border: 1px solid rgba(201, 168, 76, 0.25);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
  list-style: none;
  padding: 0.4rem 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast);
}

.nav-dropdown-toggle[aria-expanded="true"] + .nav-dropdown {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.nav-dropdown a {
  display: block;
  padding: 0.55rem 1.1rem;
  font-size: var(--text-small);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  border-radius: 0;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.nav-dropdown a:hover {
  background-color: rgba(201, 168, 76, 0.1);
  color: var(--color-gold);
}

/* Nav CTA — Apply Now */
.nav-cta {
  margin-left: 0.5rem;
  flex-shrink: 0;
}

/* Hamburger button — mobile only */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: border-color var(--transition-fast);
}

.hamburger:hover {
  border-color: var(--color-gold);
}

.hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 1px;
  transition:
    transform var(--transition-fast),
    opacity var(--transition-fast);
}

/* Animated state — open */
.hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (min-width: 768px) {
  .hamburger {
    display: none;
  }
}

/* Mobile nav panel */
.mobile-nav {
  display: none;
  position: fixed;
  top: 68px;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-navy);
  border-top: 1px solid rgba(201, 168, 76, 0.2);
  overflow-y: auto;
  z-index: 999;
  padding: var(--space-sm) 0 var(--space-xl);
}

.mobile-nav.is-open {
  display: block;
}

@media (min-width: 768px) {
  .mobile-nav {
    display: none !important;
  }
}

.mobile-nav ul {
  list-style: none;
}

.mobile-nav a {
  display: block;
  padding: 0.8rem var(--content-padding);
  font-size: 1rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.mobile-nav a:hover {
  color: var(--color-gold);
  background-color: rgba(201, 168, 76, 0.06);
}

.mobile-nav a[aria-current="page"] {
  color: var(--color-gold);
}

.mobile-nav-section-label {
  display: block;
  padding: var(--space-sm) var(--content-padding) 0.4rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-mid-grey);
}

.mobile-nav-sub a {
  padding-left: calc(var(--content-padding) + 1rem);
  font-size: var(--text-small);
  font-weight: 400;
}

.mobile-nav-cta {
  padding: var(--space-sm) var(--content-padding);
  margin-top: var(--space-sm);
}

/* Offset for fixed header */
main {
  padding-top: 68px;
}


/* ─────────────────────────────────────────────────────────────
   02. BUTTONS
   ───────────────────────────────────────────────────────────── */

/* Base button reset and shared styles */
.btn-primary,
.btn-secondary,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
  white-space: nowrap;
  line-height: 1.2;
}

/* Primary — gold background, navy text */
.btn-primary {
  background-color: var(--color-gold);
  color: var(--color-navy);
  border-color: var(--color-navy);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background-color: var(--color-gold-dark);
  border-color: var(--color-navy);
  color: var(--color-navy);
}

/* Secondary — transparent, gold border and text */
.btn-secondary {
  background-color: transparent;
  color: var(--color-gold);
  border-color: var(--color-gold);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background-color: var(--color-gold);
  color: var(--color-navy);
}

/* Ghost — transparent, white border and text (on dark backgrounds) */
.btn-ghost {
  background-color: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.55);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--color-white);
  color: var(--color-white);
}

/* CTA group — flex row with gap, wraps on mobile */
.cta-group {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}


/* ─────────────────────────────────────────────────────────────
   03. HERO
   Navy background with geometric CSS pattern overlay.
   Homepage: min-height 80vh. Inner pages: min-height 50vh.
   ───────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  background-color: var(--color-navy);
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: 50vh; /* inner pages default */
}

/* Homepage hero */
.hero--home {
  min-height: 80vh;
}

/* CSS-only geometric pattern overlay */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      rgba(201, 168, 76, 0.06) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(201, 168, 76, 0.06) 1px,
      transparent 1px
    );
  background-size: 60px 60px;
  pointer-events: none;
}

/* Radial gradient vignette over pattern */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 30% 50%,
    rgba(10, 31, 68, 0) 0%,
    rgba(10, 31, 68, 0.55) 100%
  );
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--content-padding);
  padding-block: var(--space-xl);
}

.hero h1,
.hero .display {
  color: var(--color-white);
  max-width: 18ch;
}

.hero p.lead {
  color: rgba(255, 255, 255, 0.8);
  max-width: 52ch;
  margin-top: var(--space-sm);
}

/* Hero stat row */
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.hero-stat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-small);
  color: rgba(255, 255, 255, 0.7);
}

.hero-stat strong {
  color: var(--color-gold);
  font-weight: 600;
}

.hero-stat-sep {
  display: none;
  color: rgba(201, 168, 76, 0.4);
}

@media (min-width: 768px) {
  .hero-stat-sep {
    display: inline;
  }
}


/* ─────────────────────────────────────────────────────────────
   04. CARDS
   White background with gold left border accent.
   Grid: auto-fill columns, minmax(300px, 1fr).
   ───────────────────────────────────────────────────────────── */

.card {
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  border-left: 4px solid var(--color-gold);
  padding: var(--space-md) var(--space-md) var(--space-md) calc(var(--space-md) - 2px);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
  display: flex;
  flex-direction: column;
}

.card:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-3px);
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background-color: rgba(201, 168, 76, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-sm);
  flex-shrink: 0;
}

.card h3 {
  margin-bottom: var(--space-xs);
}

.card p {
  font-size: var(--text-small);
  color: var(--color-mid-grey);
  line-height: 1.65;
  flex: 1;
}

/* Push inline buttons to the bottom of cards that use flex-column layout */
.card > .btn-primary,
.card > .btn-secondary,
.card > .btn-ghost {
  margin-top: auto;
  align-self: flex-start;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--space-sm);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-gold);
  transition: gap var(--transition-fast);
}

.card-link:hover {
  gap: 0.65rem;
}

/* Card grid */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 640px) {
  .card-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

/* Feature card — used for three-path entry routing */
.feature-card {
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-md);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
  display: flex;
  flex-direction: column;
}

.feature-card:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-3px);
}

.feature-card h3 {
  margin-top: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.feature-card p {
  font-size: var(--text-small);
  color: var(--color-mid-grey);
  flex: 1;
}

.feature-card .card-footer {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
}

/* Level cards — six certification levels */
.level-card {
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  border-top: 3px solid var(--color-gold);
  padding: var(--space-md);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
  display: flex;
  flex-direction: column;
}

.level-card:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-3px);
}

/* CXL Pinnacle special styling */
.level-card--pinnacle {
  background: linear-gradient(135deg, #0A1F44 0%, #1A0A2E 100%);
  border-color: var(--color-gold);
  border-top-width: 3px;
}

.level-card--pinnacle h3,
.level-card--pinnacle .level-name {
  color: var(--color-gold-light);
}

.level-card--pinnacle p {
  color: rgba(255, 255, 255, 0.75);
}

.level-meta {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: auto;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.level-card--pinnacle .level-meta {
  border-color: rgba(201, 168, 76, 0.3);
}

.level-tag {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  background-color: rgba(201, 168, 76, 0.12);
  color: var(--color-gold);
}

.level-name {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-gold);
  margin-bottom: 0.25rem;
}


/* ─────────────────────────────────────────────────────────────
   05. CERTIFICATION BADGE
   Circle, navy background, gold JetBrains Mono text.
   Sizes: sm (48px), md (80px), lg (120px).
   ───────────────────────────────────────────────────────────── */

.cert-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--color-navy);
  color: var(--color-gold);
  font-family: var(--font-mono);
  font-weight: 500;
  border: 2px solid var(--color-gold);
  flex-shrink: 0;
}

/* Small — 48px */
.cert-badge--sm {
  width: 48px;
  height: 48px;
  font-size: 0.65rem;
  letter-spacing: 0.04em;
}

/* Medium — 80px */
.cert-badge--md {
  width: 80px;
  height: 80px;
  font-size: 1rem;
  letter-spacing: 0.05em;
}

/* Large — 120px */
.cert-badge--lg {
  width: 120px;
  height: 120px;
  font-size: 1.5rem;
  letter-spacing: 0.06em;
}

/* Gold/white inversion — for dark-background use */
.cert-badge--inverse {
  background-color: var(--color-gold);
  color: var(--color-navy);
  border-color: var(--color-navy);
}


/* ─────────────────────────────────────────────────────────────
   06. COMPARISON TABLE
   Full width, border-collapse.
   LII column has gold left border and light gold background.
   Mobile: horizontal scroll wrapper.
   ───────────────────────────────────────────────────────────── */

/* Scroll container for mobile */
.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.comparison-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: var(--text-small);
  background-color: var(--color-white);
}

/* Column widths */
.comparison-table th:first-child,
.comparison-table td:first-child {
  width: 26%;
}

/* Header row */
.comparison-table thead tr {
  background-color: var(--color-navy);
}

.comparison-table thead th {
  padding: 1rem 1.25rem;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  text-align: left;
  border-bottom: 2px solid rgba(201, 168, 76, 0.3);
}

/* LII column header — gold accent */
.comparison-table thead th.lii-col {
  color: var(--color-gold);
  border-bottom-color: var(--color-gold);
  border-left: 3px solid var(--color-gold);
  background-color: rgba(201, 168, 76, 0.08);
}

/* Body cells */
.comparison-table tbody td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  line-height: 1.6;
  color: var(--color-mid-grey);
}

/* Dimension / label column */
.comparison-table tbody td:first-child {
  font-weight: 600;
  color: var(--color-text-dark);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Alternating row backgrounds */
.comparison-table tbody tr:nth-child(odd) td {
  background-color: var(--color-off-white);
}

.comparison-table tbody tr:nth-child(even) td {
  background-color: var(--color-white);
}

/* LII column body — always gold-tinted */
.comparison-table tbody td.lii-col {
  border-left: 3px solid var(--color-gold);
  background-color: rgba(201, 168, 76, 0.06) !important;
  color: var(--color-navy);
  font-weight: 600;
}

.comparison-table tbody tr:last-child td {
  border-bottom: none;
}


/* ─────────────────────────────────────────────────────────────
   07. PROCESS STEPS
   Numbered steps with gold circle counter and
   vertical connector line on desktop.
   ───────────────────────────────────────────────────────────── */

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

@media (min-width: 768px) {
  .process-steps--horizontal {
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
  }
}

.process-step {
  display: flex;
  gap: var(--space-md);
  position: relative;
}

/* Vertical connector line between steps */
.process-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 48px;
  left: 23px;
  width: 2px;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(201, 168, 76, 0.4),
    rgba(201, 168, 76, 0.1)
  );
}

/* Step number bubble */
.step-number {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-gold);
  color: var(--color-navy);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.section-dark .step-number {
  box-shadow: 0 0 0 4px rgba(201, 168, 76, 0.2);
}

.step-body {
  padding-bottom: var(--space-lg);
  flex: 1;
}

.step-body h3 {
  margin-bottom: 0.4rem;
}

.step-body p {
  font-size: var(--text-small);
  line-height: 1.65;
}

/* Horizontal layout — desktop, 5-column pathway */
@media (min-width: 768px) {
  .process-steps--horizontal .process-step {
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    gap: var(--space-sm);
  }

  /* Horizontal connector line */
  .process-steps--horizontal .process-step:not(:last-child)::after {
    top: 23px;
    left: calc(50% + 28px);
    right: calc(-50% + 28px);
    bottom: auto;
    width: auto;
    height: 2px;
  }

  .process-steps--horizontal .step-body {
    padding-bottom: 0;
  }
}


/* ─────────────────────────────────────────────────────────────
   08. STAT BLOCKS
   Large gold number, navy label.
   2-col mobile, 4-col desktop.
   ───────────────────────────────────────────────────────────── */

.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .stat-grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .stat-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.stat-block {
  text-align: center;
  padding: var(--space-sm);
}

.stat-number {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--color-gold);
  line-height: 1.1;
  display: block;
}

.stat-label {
  display: block;
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-navy);
  margin-top: 0.4rem;
  line-height: 1.4;
}

.section-dark .stat-label {
  color: rgba(255, 255, 255, 0.75);
}


/* ─────────────────────────────────────────────────────────────
   09. SECTION VARIANTS — vertical padding overrides
   All sections apply var(--space-2xl) as defined in global.css.
   Modifier classes here allow section-specific overrides.
   ───────────────────────────────────────────────────────────── */

.section--compact {
  padding-block: var(--space-xl);
}

.section--flush {
  padding-block: 0;
}

/* Section header block — centred, with gold rule above */
.section-header {
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: var(--space-lg);
}

.section-header .gold-rule {
  margin-inline: auto;
  margin-bottom: var(--space-sm);
}

.section-header p {
  margin-top: var(--space-xs);
  color: var(--color-mid-grey);
}

.section-dark .section-header p {
  color: rgba(255, 255, 255, 0.7);
}

/* Left-aligned section header */
.section-header--left {
  text-align: left;
  margin-inline: 0;
}

.section-header--left .gold-rule {
  margin-inline: 0;
}


/* ─────────────────────────────────────────────────────────────
   10. FOOTER
   Navy background. footer-inner / footer-nav-grid canonical
   pattern. 4-col desktop, 2-col tablet, 1-col mobile.
   Gold headings. footer-trust strip. footer-bottom legal bar.
   ───────────────────────────────────────────────────────────── */

.site-footer {
  background-color: var(--color-navy);
  color: rgba(255, 255, 255, 0.75);
  padding-top: var(--space-xl);
}

.footer-tagline {
  font-size: var(--text-small);
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.6;
  max-width: 30ch;
}


/* ─────────────────────────────────────────────────────────────
   11. FORM EMBED
   Tally.so iframe wrapper. Navy/gold loading placeholder.
   Min-height 400px, border-radius 4px.
   ───────────────────────────────────────────────────────────── */

.form-embed {
  position: relative;
  width: 100%;
  min-height: 400px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background-color: var(--color-white);
}

/* Loading placeholder — shown before iframe loads */
.form-embed-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  background-color: var(--color-off-white);
  color: var(--color-mid-grey);
  font-size: var(--text-small);
  padding: var(--space-md);
  text-align: center;
}

.form-embed-placeholder-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius-sm);
  background-color: var(--color-navy);
  color: var(--color-gold);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-small);
}

.form-embed iframe {
  display: block;
  width: 100%;
  min-height: 400px;
  border: none;
}

/* Tabbed forms — apply.html */
.form-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: var(--space-md);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.form-tab-btn {
  flex-shrink: 0;
  padding: 0.75rem 1.25rem;
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-mid-grey);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}

.form-tab-btn:hover {
  color: var(--color-navy);
}

.form-tab-btn[aria-selected="true"],
.form-tab-btn.is-active {
  color: var(--color-navy);
  border-bottom-color: var(--color-gold);
}

.form-tab-panel {
  display: none;
}

.form-tab-panel.is-active {
  display: block;
}


/* ─────────────────────────────────────────────────────────────
   12. ALERT BANNER
   Gold background, navy text. Dismissible via JS.
   For beta and launch notices.
   ───────────────────────────────────────────────────────────── */

.alert-banner {
  background-color: var(--color-gold);
  color: var(--color-navy);
  padding: 0.65rem var(--content-padding);
  position: relative;
}

.alert-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  max-width: var(--max-width);
  margin-inline: auto;
}

.alert-banner p {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.4;
  margin: 0;
}

.alert-banner a {
  color: var(--color-navy);
  text-decoration: underline;
  font-weight: 700;
  transition: opacity var(--transition-fast);
}

.alert-banner a:hover {
  opacity: 0.75;
}

/* Dismiss button */
.alert-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.3rem;
  color: var(--color-navy);
  opacity: 0.6;
  border-radius: var(--radius-sm);
  transition: opacity var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.alert-dismiss:hover {
  opacity: 1;
}

.alert-banner[hidden] {
  display: none;
}


/* ─────────────────────────────────────────────────────────────
   SUPPLEMENTARY — Membership tier cards, contact route cards,
   readiness panels (YOU'RE READY IF / CONSIDER WAITING)
   ───────────────────────────────────────────────────────────── */

/* Membership tier row */
.tier-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

@media (min-width: 768px) {
  .tier-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.tier-card {
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-md) var(--space-sm);
  text-align: center;
  border-top: 3px solid var(--color-gold);
}

.tier-code {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--color-gold);
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: 0.25rem;
}

.tier-name {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-navy);
  display: block;
  margin-bottom: 0.25rem;
}

.tier-note {
  font-size: var(--text-xs);
  color: var(--color-mid-grey);
}

/* Readiness panels — cert level pages */
.readiness-grid {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .readiness-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.readiness-panel {
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.readiness-panel--yes {
  background-color: rgba(201, 168, 76, 0.08);
  border: 1px solid rgba(201, 168, 76, 0.3);
}

.readiness-panel--wait {
  background-color: rgba(107, 114, 128, 0.06);
  border: 1px solid var(--color-border);
}

.readiness-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
  display: block;
}

.readiness-panel--yes .readiness-label { color: var(--color-gold-dark); }
.readiness-panel--wait .readiness-label { color: var(--color-mid-grey); }

.readiness-panel ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.readiness-panel li {
  display: flex;
  gap: 0.6rem;
  font-size: var(--text-small);
  line-height: 1.5;
  align-items: flex-start;
}

.readiness-panel li::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-top: 0.5rem;
}

.readiness-panel--yes li::before { background-color: var(--color-gold); }
.readiness-panel--wait li::before { background-color: var(--color-mid-grey); }

/* Contact route cards */
.contact-card {
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-md);
  border-top: 3px solid var(--color-gold);
}

.contact-card .contact-email {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-mid-grey);
  margin-top: 0.5rem;
  margin-bottom: var(--space-sm);
  word-break: break-all;
}

/* Digital Passport credential mockup */
.passport-mockup {
  background: linear-gradient(135deg, var(--color-navy) 0%, #132B5E 100%);
  border: 1px solid rgba(201, 168, 76, 0.4);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  max-width: 420px;
  margin-inline: auto;
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}

.passport-mockup::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(201, 168, 76, 0.07);
}

.passport-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background-color: rgba(52, 168, 83, 0.15);
  border: 1px solid rgba(52, 168, 83, 0.4);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4CAF50;
  margin-bottom: var(--space-sm);
}

.passport-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #4CAF50;
  animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

.passport-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-gold);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.2rem;
}

.passport-value {
  color: var(--color-white);
  font-weight: 700;
}

.passport-subvalue {
  color: var(--color-white);
  font-size: 0.72rem;
  margin-top: 0.15rem;
}

.passport-id {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-white);
  margin-bottom: 0.25rem;
}

.passport-holder {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: var(--space-xs);
}

.passport-verify-url {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-gold);
  margin-top: var(--space-sm);
}

/* QR placeholder */
.qr-placeholder {
  width: 80px;
  height: 80px;
  background-color: var(--color-white);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.qr-placeholder svg {
  width: 60px;
  height: 60px;
  opacity: 0.8;
}

/* Partner tier cards */
.partner-tier-card {
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-md);
  border-top: 3px solid var(--color-gold);
  display: flex;
  flex-direction: column;
}

.partner-tier-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.25rem;
}

.partner-tier-rights {
  list-style: none;
  margin-top: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.partner-tier-rights li {
  display: flex;
  gap: 0.5rem;
  font-size: var(--text-small);
  align-items: flex-start;
}

.partner-tier-rights li::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-gold);
  margin-top: 0.5rem;
}

/* Assessment domain cards */
.domain-card {
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  border-left: 4px solid var(--color-gold);
  box-shadow: var(--shadow-card);
}

.domain-number {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: rgba(201, 168, 76, 0.25);
  line-height: 1;
  margin-bottom: 0.25rem;
}

/* Article cards — insights */
.article-card {
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-md);
  border-top: 3px solid var(--color-gold);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.article-card:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-3px);
}

.article-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-xs);
  color: var(--color-mid-grey);
  margin-bottom: var(--space-xs);
  flex-wrap: wrap;
}

.article-category {
  font-weight: 600;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.article-card h3 {
  margin-bottom: var(--space-xs);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
}

.article-excerpt {
  font-size: var(--text-small);
  color: var(--color-mid-grey);
  line-height: 1.65;
  flex: 1;
}


.footer-inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--content-padding);
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

@media (min-width: 1200px) {
  .footer-inner {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-2xl, 4rem);
  }

  .footer-inner .footer-brand {
    flex: 0 0 220px;
  }

  .footer-inner nav {
    flex: 1;
  }
}

.footer-nav-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

@media (min-width: 1200px) {
  .footer-nav-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.footer-nav-heading {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-sm);
}

.footer-nav-grid ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-nav-grid ul a {
  font-size: var(--text-small);
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-nav-grid ul a:hover,
.footer-nav-grid ul a:focus-visible {
  color: var(--color-gold-light);
}

.footer-nav-grid ul a[aria-current="page"] {
  color: var(--color-gold);
  font-weight: 500;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-block: var(--space-md);
  text-align: center;
}

.footer-bottom p {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.4);
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-bottom a:hover,
.footer-bottom a:focus-visible {
  color: var(--color-gold-light);
}

/* Trust / standards strip */
.footer-trust {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-block: var(--space-sm);
}

.footer-trust-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem var(--space-lg);
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--content-padding);
  justify-content: center;
}

.footer-trust-inner span {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.04em;
}

.footer-trust-inner span[aria-hidden="true"] {
  color: rgba(255, 255, 255, 0.2);
}


/* Footer logo image */
.footer-brand a {
  display: inline-block;
  margin-bottom: var(--space-sm);
  line-height: 0; /* remove inline-block gap */
}

.footer-brand a img {
  width: 150px;
  height: auto;
  display: block;
}