/* =============================================================
   COMPONENTS — Databeauty Tribe v2
   Module 1 ships: buttons · badges · nav · dropdown · footer
   Each later module appends its own component blocks.
   ============================================================= */

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1;
  padding: 14px 28px;
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--ease-base), border-color var(--ease-base),
              color var(--ease-base), transform var(--ease-spring),
              box-shadow var(--ease-base);
  cursor: pointer;
  user-select: none;
}

.btn:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 3px;
}

/* Primary CTA — an always-on "attention" sweep through the brand blues,
   navy → electric → bright electric and back (hexes measured from the
   real logo file). STRICTLY brand colours: navy + electric blue in the
   fill, white text on top. No amber, no off-brand hues. The sweep draws
   the eye before the click, speeds up on hover, and is disabled for
   users who prefer reduced motion. */
.btn--cta {
  background: linear-gradient(90deg,
    #0F2D5C  0%,    /* navy-mid        */
    #1553C0 18%,    /* electric-dim    */
    #1B6EF3 36%,    /* electric        */
    #4D8EFF 50%,    /* electric-bright */
    #1B6EF3 64%,    /* electric        */
    #1553C0 82%,    /* electric-dim    */
    #0F2D5C 100%);  /* navy-mid        */
  background-size: 220% 100%;
  background-position: 0% 50%;
  color: var(--color-text-primary);
  text-shadow: 0 1px 2px rgba(3,13,26,0.45);   /* keeps white text legible across the sweep */
  border-color: transparent;
  box-shadow: var(--shadow-electric);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  animation: cta-brand-sweep 3.5s linear infinite;
  transition: transform var(--ease-spring), box-shadow var(--ease-base);
}
.btn--cta:hover  { transform: translateY(-2px);
                   box-shadow: 0 8px 32px rgba(27,110,243,0.55);
                   animation-duration: 1.6s; }        /* speed up to draw the eye */
.btn--cta:active { transform: translateY(0); }

@keyframes cta-brand-sweep {
  from { background-position:   0% 50%; }
  to   { background-position: 220% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .btn--cta { animation: none; background-position: 40% 50%; }
}

/* Electric fill */
.btn--electric {
  background: var(--gradient-electric);
  color: var(--color-text-primary);
  border-color: var(--color-electric);
  box-shadow: var(--shadow-electric);
}
.btn--electric:hover  { background: var(--color-electric-bright); transform: translateY(-2px);
                        box-shadow: 0 8px 28px rgba(27,110,243,0.4); color: var(--color-text-primary); }
.btn--electric:active { transform: translateY(0); }

/* Ghost / Outline */
.btn--outline {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--btn-outline-border);
}
.btn--outline:hover { background: var(--btn-outline-hover);
                      border-color: var(--btn-outline-border-strong); color: var(--color-text-primary); }

/* Outline electric variant */
.btn--outline-electric {
  background: transparent;
  color: var(--color-electric-bright);
  border-color: rgba(77,142,255,0.4);
}
.btn--outline-electric:hover { background: var(--color-electric-muted);
                               border-color: var(--color-electric-bright);
                               color: var(--color-electric-bright); }

/* Size modifiers */
.btn--sm { font-size: var(--text-sm); padding: 10px 20px; }
.btn--lg { font-size: var(--text-lg); padding: 17px 36px; }

.btn__icon { flex-shrink: 0; transition: transform var(--ease-base); }
.btn:hover .btn__icon { transform: translateX(3px); }

/* ── BADGES ──────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge--electric { background: var(--color-electric-muted); color: var(--color-electric-bright);
                   border-color: rgba(27,110,243,0.25); }
.badge--teal     { background: var(--color-teal-muted);    color: var(--color-teal-light);
                   border-color: rgba(27,110,243,0.25); }
.badge--violet   { background: var(--color-violet-muted);  color: var(--color-violet-light);
                   border-color: rgba(27,110,243,0.25); }
.badge--rose     { background: rgba(17,24,39,0.06);       color: var(--color-text-muted);
                   border-color: rgba(17,24,39,0.12); }   /* neutral/inactive — not another accent color */
.badge--cta      { background: var(--color-cta-muted);     color: var(--color-cta);
                   border-color: rgba(77,142,255,0.25); }

/* ── NAVIGATION + FOOTER ──────────────────────────────────────────
   Phase 3 rewrite: the header (.site-header) and footer (.site-footer)
   now live in public/css/nav.css and public/css/footer.css.
   ────────────────────────────────────────────────────────────────── */

/* ── PAGE HEADER (inner pages) ────────────────────────────────── */
.page-hero {
  /* Same treatment as .hero — see hero.css. */
  /* Same double-count as .hero: the sticky header already takes its own
     space, so nav-height does not belong in this padding. */
  padding-block: clamp(24px, 6vw, 64px) var(--section-py-sm);
  background: var(--gradient-hero);
  border-bottom: 1px solid var(--color-divider);
}
.page-hero__eyebrow { margin-bottom: var(--space-3); }
.page-hero__title   { font-size: var(--text-4xl); color: var(--color-text-primary);
                      margin-bottom: var(--space-4); max-width: 18ch; }
.page-hero__desc    { font-size: var(--text-lg); color: var(--color-text-muted);
                      max-width: 48ch; line-height: var(--leading-relaxed); }

/* ── METRICS GRID ─────────────────────────────────────────────── */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
@media (max-width: 768px) { .metrics-grid { grid-template-columns: repeat(2, 1fr); } }

.metric-item {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: var(--space-10) var(--space-6);
  position: relative;
}
.metric-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0; top: 20%; height: 60%;
  width: 1px;
  background: var(--color-divider);
}
@media (max-width: 768px) {
  .metric-item:nth-child(2)::after { display: none; }
  .metric-item:nth-child(1), .metric-item:nth-child(2) {
    border-bottom: 1px solid var(--color-divider);
  }
}

.metric-item__stat {
  display: flex; align-items: baseline; gap: 2px;
  margin-bottom: var(--space-2);
}
.metric-item__number {
  font-family: var(--font-mono);
  font-size: clamp(2.25rem, 4vw, 3.75rem);
  font-weight: 700;
  color: var(--color-electric-bright);
  line-height: 1;
  transition: color var(--ease-base);
}
.metric-item__suffix {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 2.5vw, 2.5rem);
  font-weight: 700;
  color: var(--color-cta);
  line-height: 1;
}
.metric-item__label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-sky);
  letter-spacing: var(--tracking-wide);
}

/* ── DATA MOSAIC CARDS (hero visual) ─────────────────────────── */
.mosaic-card {
  position: absolute;
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(147,197,253,0.1);
  min-width: 210px;
  box-shadow: var(--shadow-md);
}
.mosaic-card--default  { background: var(--gradient-glass); }
.mosaic-card--electric { background: rgba(27,110,243,0.14); border-color: rgba(27,110,243,0.28); }
.mosaic-card--teal     { background: rgba(27,110,243,0.12); border-color: rgba(27,110,243,0.24); }

.mosaic-card__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-sky);
  margin-bottom: var(--space-1);
}
.mosaic-card__value {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1;
  color: var(--color-text-primary);
}
.mosaic-card--electric .mosaic-card__value { color: var(--color-electric-bright); }
.mosaic-card--teal     .mosaic-card__value { color: var(--color-teal-light); }
.mosaic-card__unit    { font-size: 0.5em; color: var(--color-text-muted); font-weight: 400; }
.mosaic-card__sublabel { font-family: var(--font-mono); font-size: var(--text-xs);
                         color: var(--color-text-muted); margin-top: var(--space-1); }
.mosaic-card__trend   { color: var(--color-cta); margin-top: var(--space-2); }
.mosaic-card__stars   { color: var(--color-cta); font-size: var(--text-sm); margin-top: var(--space-2); }

/* Float animations */
@keyframes float-a { 0%,100%{transform:translateY(0) rotate(-1.5deg)} 50%{transform:translateY(-10px) rotate(-1.5deg)} }
@keyframes float-b { 0%,100%{transform:translateY(-6px) rotate(1.5deg)} 50%{transform:translateY(6px) rotate(1.5deg)} }
@keyframes float-c { 0%,100%{transform:translateY(0) rotate(-0.5deg)} 50%{transform:translateY(-8px) rotate(-0.5deg)} }

.mosaic-card--top    { animation: float-a 6.5s ease-in-out infinite; }
.mosaic-card--mid    { animation: float-b 7.5s ease-in-out infinite; animation-delay: -2.5s; }
.mosaic-card--bottom { animation: float-c 5.8s ease-in-out infinite; animation-delay: -1.2s; }

/* ── PROGRAM CARDS ────────────────────────────────────────────── */
.programs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
@media (max-width: 1024px) { .programs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .programs-grid { grid-template-columns: 1fr; } }

.program-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex; flex-direction: column;
  gap: var(--space-4);
  transition: border-color var(--ease-base), box-shadow var(--ease-base),
              transform var(--ease-spring), background var(--ease-base);
}
.program-card:hover {
  border-color: rgba(77,142,255,0.35);
  box-shadow: var(--shadow-card);
  transform: translateY(-4px);
  background: linear-gradient(135deg, var(--color-bg-surface), var(--color-bg-elevated));
}
.program-card--featured {
  border-color: rgba(27,110,243,0.3);
  background: linear-gradient(135deg, var(--color-bg-surface) 0%, var(--color-bg-elevated) 100%);
}
.program-card--featured:hover { border-color: rgba(77,142,255,0.55); }

.program-card__header {
  display: flex; align-items: center;
  justify-content: space-between; gap: var(--space-4);
}
.program-card__icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-electric-muted);
  border: 1px solid rgba(27,110,243,0.2);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-electric-bright);
  flex-shrink: 0;
}
.program-card__title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
}
.program-card__desc {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  max-width: 42ch;
  flex: 1;
}
.program-card__meta {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-4);
  background: rgba(147,197,253,0.04);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-divider);
}
.program-card__stat {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
}
.program-card__stat strong { color: var(--color-electric-bright); }
.program-card__stat em     { color: var(--color-sky); font-style: italic; }

.program-card__link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-electric-bright);
  text-decoration: none;
  transition: color var(--ease-fast), gap var(--ease-fast);
  display: inline-flex; align-items: center; gap: var(--space-1);
  margin-top: auto;
}
.program-card__link:hover { color: var(--color-text-primary); gap: var(--space-2); }

/* ── EVENT CARDS ──────────────────────────────────────────────── */
.events-grid { display: flex; flex-direction: column; gap: var(--space-4); }

.event-card {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: var(--space-5);
  align-items: center;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  transition: border-color var(--ease-base), box-shadow var(--ease-base);
}
.event-card:hover { border-color: rgba(77,142,255,0.3); box-shadow: var(--shadow-sm); }
.event-card--past { opacity: 0.75; }

.event-card__date-block {
  display: flex; flex-direction: column; align-items: center;
  padding: var(--space-3);
  background: var(--color-electric-muted);
  border: 1px solid rgba(27,110,243,0.2);
  border-radius: var(--radius-md);
  min-width: 60px; text-align: center;
}
.event-card__date-block--muted { background: rgba(147,197,253,0.06); border-color: var(--color-divider); }
.event-card__month { font-family: var(--font-mono); font-size: var(--text-xs);
                     font-weight: 500; letter-spacing: var(--tracking-wider);
                     color: var(--color-electric-bright); text-transform: uppercase; }
.event-card__date-block--muted .event-card__month { color: var(--color-text-muted); }
.event-card__day   { font-family: var(--font-mono); font-size: var(--text-2xl);
                     font-weight: 700; color: var(--color-text-primary); line-height: 1; }

.event-card__body  { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.event-card__title { font-family: var(--font-body); font-size: var(--text-base);
                     font-weight: 600; color: var(--color-text-primary);
                     white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-card__meta  { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.event-card__time, .event-card__format, .event-card__attendees {
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-text-muted); white-space: nowrap;
}
.event-card__action { flex-shrink: 0; }
.event-card__no-recording { font-family: var(--font-mono); font-size: var(--text-xs);
                            color: var(--color-text-muted); }

@media (max-width: 640px) {
  .event-card { grid-template-columns: 60px 1fr; }
  .event-card__action { grid-column: 1 / -1; }
}

/* ── REVIEW CARDS (Testimonials) ──────────────────────────────── */
.reviews-grid {
  columns: 3;
  column-gap: var(--space-5);
}
@media (max-width: 1024px) { .reviews-grid { columns: 2; } }
@media (max-width: 600px)  { .reviews-grid { columns: 1; } }

.review-card {
  break-inside: avoid;          /* prevents card splitting across columns */
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  margin-bottom: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: border-color var(--ease-slow), box-shadow var(--ease-slow),
              transform var(--ease-spring);
}
.review-card:hover {
  border-color: rgba(77,142,255,0.3);
  box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 0 20px rgba(27,110,243,0.08);
  transform: translateY(-3px);
}

/* Header row: stars + verified badge */
.review-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

/* Star rating */
.review-card__rating {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.review-card__stars {
  display: flex;
  gap: 2px;
  color: var(--color-cta);          /* amber — matches your CTA palette */
}
.review-card__stars svg {
  width: 15px; height: 15px;
  fill: currentColor;
  filter: drop-shadow(0 0 3px rgba(77,142,255,0.4));
}
.review-card__score {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-primary);
}

/* Verified badge */
.review-card__verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: var(--color-teal-muted);
  border: 1px solid rgba(27,110,243,0.25);
  color: var(--color-teal-light);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(27,110,243,0.1);
}
.review-card__verified svg {
  width: 10px; height: 10px;
  flex-shrink: 0;
}

/* Quote text */
.review-card__quote {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  color: rgba(255,255,255,0.88);
  line-height: var(--leading-relaxed);
  max-width: none;
  flex: 1;
}

/* Author row */
.review-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
  margin-top: auto;
}
.review-card__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--gradient-electric);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-primary);
  flex-shrink: 0;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
}
.review-card__name {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.3;
}
.review-card__location {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-electric-bright);
  margin-top: 2px;
}


/* ── WHAT WE DO GRID (8 pillars) ─────────────────────────────── */
.wwd-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
@media (max-width: 1024px) { .wwd-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .wwd-grid { grid-template-columns: 1fr; } }

.wwd-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: border-color var(--ease-base), transform var(--ease-spring);
}
.wwd-card:hover { border-color: rgba(77,142,255,0.3); transform: translateY(-3px); }
.wwd-card__num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-cta);
  letter-spacing: var(--tracking-widest);
  display: block;
  margin-bottom: var(--space-3);
}
.wwd-card__title {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}
.wwd-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  max-width: 34ch;
}

/* ── PARTNER STRIP ────────────────────────────────────────────── */
.partner-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  flex-wrap: wrap;
  padding: var(--space-8) 0;
}
.partner-strip__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.partner-strip__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-sky);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  text-decoration: none;
  transition: border-color var(--ease-base), color var(--ease-base);
}
.partner-strip__logo:hover { border-color: rgba(77,142,255,0.35); color: var(--color-text-primary); }

/* ── SPOTLIGHT FEATURE CARD ───────────────────────────────────── */
.spotlight-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-8);
  align-items: center;
  background: linear-gradient(135deg, var(--color-bg-surface), rgba(77,142,255,0.05));
  border: 1px solid rgba(77,142,255,0.25);
  border-radius: var(--radius-2xl);
  padding: var(--space-3xl);
}
@media (max-width: 640px) { .spotlight-card { grid-template-columns: 1fr; text-align: center; } }

.spotlight-card__avatar {
  width: 110px; height: 110px;
  border-radius: 50%;
  background: var(--gradient-cta);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-text-primary);
  flex-shrink: 0;
  box-shadow: var(--shadow-cta);
  margin-inline: auto;
}
.spotlight-card__week {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-cta);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.spotlight-card__name {
  font-size: var(--text-2xl);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}
.spotlight-card__role {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-sky);
  margin-bottom: var(--space-4);
}
.spotlight-card__achievement {
  font-size: var(--text-base);
  color: rgba(255,255,255,0.8);
  line-height: var(--leading-relaxed);
  max-width: 56ch;
  margin-bottom: var(--space-4);
}
.spotlight-card__quote {
  border-left: 3px solid var(--color-cta);
  padding-left: var(--space-4);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 48ch;
}
@media (max-width: 640px) {
  .spotlight-card__quote { border-left: none; padding-left: 0; }
}

/* ── JOIN CTA BANNER ──────────────────────────────────────────── */
.join-banner {
  text-align: center;
  padding: var(--space-4xl) var(--space-6);
  background: linear-gradient(135deg, rgba(27,110,243,0.1), rgba(77,142,255,0.06));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
}
.join-banner__title {
  font-size: var(--text-3xl);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}
.join-banner__title em { font-style: italic; color: var(--color-sky); }
.join-banner__desc {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 44ch;
  margin: 0 auto var(--space-8);
}
.join-banner__actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}

/* ── HOME RESPONSIVE OVERRIDES ────────────────────────────────── */
@media (max-width: 800px) {
  /* About preview + any two-column inline grid collapses on mobile */
  section[aria-label="About Databeauty Tribe"] .container > div {
    grid-template-columns: 1fr !important;
  }
}

/* ── FORMS (registration + contact) ───────────────────────────── */
.form-grid { display: flex; flex-direction: column; gap: var(--space-5); max-width: 560px; }
.form-group { display: flex; flex-direction: column; gap: var(--space-2); }
.form-label {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--color-sky);
}
.form-input, .form-select, .form-textarea {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-family: var(--font-body); font-size: var(--text-base);
  color: var(--color-text-primary);
  transition: border-color var(--ease-fast);
  outline: none; width: 100%;
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--color-text-muted); }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--color-electric-bright); }
.form-textarea { resize: vertical; min-height: 130px; }
.form-select option { background: var(--color-bg-elevated); }

/* ── PRICING CARD (training fees) ─────────────────────────────── */
.price-card {
  background: linear-gradient(135deg, var(--color-bg-surface), rgba(77,142,255,0.05));
  border: 1px solid rgba(77,142,255,0.25);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  text-align: center;
}
.price-card__amount {
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-cta);
  line-height: 1;
}
.price-card__alt {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}
.price-card__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-sky);
  margin-top: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-1);
}

/* ── CURRICULUM LIST ──────────────────────────────────────────── */
.curriculum { counter-reset: mod; display: flex; flex-direction: column; gap: var(--space-3); }
.curriculum li {
  display: flex; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  counter-increment: mod;
  font-size: var(--text-sm); color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}
.curriculum li::before {
  content: counter(mod, decimal-leading-zero);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700;
  color: var(--color-electric-bright); flex-shrink: 0; margin-top: 2px;
}

/* ── PAYMENT OPTION CARDS ─────────────────────────────────────── */
/* Single column: bank transfer is the only payment route, so the card
   spans the full width rather than sitting in half an empty grid. */
.pay-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  max-width: var(--container-copy);
  margin-inline: auto;
}

/* ── PROOF OF PAYMENT (WhatsApp) ──────────────────────────────── */
.pay-proof {
  margin-top: var(--space-3xl);
  padding: var(--space-8);
  text-align: center;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}
.pay-proof__step {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-electric-bright);
  margin-bottom: var(--space-2);
}
.pay-proof__title {
  font-size: var(--text-xl);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}
.pay-proof__copy {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  max-width: 46ch;
  margin: 0 auto var(--space-6);
}
/* Official WhatsApp green — the familiar cue people look for */
.pay-proof__wa {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 14px 28px;
  border-radius: var(--radius-full);
  background: #25D366;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transition: background var(--ease-fast), transform var(--ease-fast);
}
.pay-proof__wa:hover { background: #1EBE57; transform: translateY(-2px); color: #fff; }
.pay-proof__wa:focus-visible { outline: 3px solid var(--color-border-focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .pay-proof__wa { transition: background var(--ease-fast); }
  .pay-proof__wa:hover { transform: none; }
}

.pay-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.pay-card--highlight { border-color: rgba(77,142,255,0.3); }
.pay-card__title { font-size: var(--text-lg); font-weight: 700; color: var(--color-text-primary); }
.pay-card__row {
  display: flex; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-divider);
  font-size: var(--text-sm);
}
.pay-card__row dt { color: var(--color-text-muted); }
.pay-card__row dd { color: var(--color-text-primary); font-family: var(--font-mono); text-align: right; }

/* ── SESSION ROWS (BTM past sessions, meetups) ────────────────── */
.session-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-5) var(--space-6);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.session-row__topic { font-weight: 600; color: var(--color-text-primary); font-size: var(--text-base); }
.session-row__meta  { font-family: var(--font-mono); font-size: var(--text-xs);
                      color: var(--color-text-muted); margin-top: var(--space-1); }

/* ── SPEAKER PILLS ────────────────────────────────────────────── */
.speakers-list { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.speaker-pill {
  padding: 6px 14px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-sky);
}

/* ── UPCOMING SESSION BANNER ──────────────────────────────────── */
.upcoming-session {
  background: linear-gradient(135deg, rgba(27,110,243,0.08), rgba(77,142,255,0.04));
  border: 1px solid rgba(27,110,243,0.25);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-8);
  display: flex; align-items: center;
  justify-content: space-between; gap: var(--space-6); flex-wrap: wrap;
}
.upcoming-session__label { font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-electric-bright); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; margin-bottom: var(--space-2); }
.upcoming-session__title { font-size: var(--text-xl); color: var(--color-text-primary); font-weight: 600; }
.upcoming-session__date  { font-family: var(--font-mono); font-size: var(--text-sm);
  color: var(--color-sky); margin-top: var(--space-1); }

/* ── FAQ ACCORDION ────────────────────────────────────────────── */
.faq-list { display: flex; flex-direction: column; gap: var(--space-3); }
.faq-item {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.faq-item summary {
  padding: var(--space-5) var(--space-6);
  font-weight: 600; color: var(--color-text-primary);
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-family: var(--font-mono); font-size: var(--text-lg);
  color: var(--color-electric-bright); flex-shrink: 0;
  transition: transform var(--ease-base);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p {
  padding: 0 var(--space-6) var(--space-5);
  font-size: var(--text-sm); color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

/* ── FAQ CATEGORY TABS (Phase 8) ──────────────────────────────── */
.faq-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}
.faq-tab {
  padding: 10px 20px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: color var(--ease-fast), background var(--ease-fast), border-color var(--ease-fast);
}
.faq-tab:hover { color: var(--color-text-primary); border-color: var(--color-electric-bright); }
.faq-tab.is-active {
  background: var(--color-electric-muted);
  color: var(--color-electric-bright);
  border-color: rgba(27, 110, 243, 0.3);
}
.faq-tab:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }

.faq-panel { max-width: var(--container-copy); margin-inline: auto; }
.faq-panel[hidden] { display: none; }

/* ── MODULE 3 RESPONSIVE OVERRIDES ────────────────────────────── */
@media (max-width: 800px) {
  section[aria-label="Current challenge"] .container > div,
  section[aria-label="Program overview"] .container > div,
  section[aria-label="Registration form"] .container > div,
  section[aria-label="Current book"] .container > div,
  section[aria-label="Training programs"] .container > div,
  section[aria-label="Partnership information"] .container > div:first-of-type {
    grid-template-columns: 1fr !important;
  }
  /* Sticky sidebars become normal flow on mobile */
  section[aria-label="Program overview"] .container > div > div:last-child,
  section[aria-label="Current book"] .container > div > div:last-child {
    position: static !important;
  }
}

/* ── BLOG · CATEGORY FILTER ───────────────────────────────────── */
.blog-filters {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-bottom: var(--space-2xl);
}
.blog-filter {
  padding: 7px 16px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: transparent;
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--ease-fast), border-color var(--ease-fast), background var(--ease-fast);
  white-space: nowrap;
}
.blog-filter:hover { color: var(--color-text-primary); border-color: rgba(255,255,255,0.3); }
.blog-filter--active {
  color: var(--color-electric-bright);
  border-color: rgba(77,142,255,0.4);
  background: var(--color-electric-muted);
}

/* ── BLOG · COMING SOON ───────────────────────────────────────── */
/* One centred card standing in for the listing. Deliberately not the
   empty post grid: a row of blank tiles reads as broken, a single card
   reads as a decision. */
.blog-soon {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
}
.blog-soon__badge {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  /* Not --color-accent: that is one fixed blue, and at this size it falls
     to 4.1:1 on the dark card. This token is theme aware and lifts to
     #4D8EFF in dark zones, which is what every other eyebrow uses. */
  color: var(--color-electric-bright);
  margin-bottom: var(--space-3);
}
.blog-soon__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-3);
}
.blog-soon__body {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
}
.blog-soon__actions {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  justify-content: center;
  margin-bottom: var(--space-6);
}
.blog-soon__note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

/* ── BLOG · FEATURED ARTICLE ─────────────────────────────────────
   The one real post while the blog is still comingSoon (see
   routes/blog.js). Built from .post-card's surface treatment, but not
   itself a link: it carries two separate actions (read the post,
   subscribe to the publication), so the card can't be one big <a>. */
.featured-post {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  max-width: var(--container-copy);
  margin-inline: auto;
}
.featured-post__eyebrow { margin-bottom: var(--space-4); }
.featured-post__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-4);
}
.featured-post__excerpt {
  /* max() guarantees a real 16px floor — var(--text-base) alone dips
     under that on narrow screens. Same fix as .legal-doc li above. */
  font-size: max(1rem, var(--text-base));
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
}
.featured-post__actions { margin-bottom: var(--space-5); }
.featured-post__invite {
  font-size: 1rem;
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}
.featured-post__invite a {
  color: var(--color-electric-bright);
  font-weight: 600;
  text-decoration: underline;
}
.featured-post__invite a:hover { color: var(--color-sky); }
.featured-post__invite a:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── BLOG · POST CARDS ────────────────────────────────────────── */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 1024px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .post-grid { grid-template-columns: 1fr; } }

.post-card {
  display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  text-decoration: none;
  transition: border-color var(--ease-base), transform var(--ease-spring);
}
.post-card:hover { border-color: rgba(77,142,255,0.35); transform: translateY(-3px); }
.post-card__meta {
  display: flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.post-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl); font-weight: 700;
  color: var(--color-text-primary); line-height: var(--leading-snug);
}
.post-card:hover .post-card__title { color: var(--color-sky); }
.post-card__excerpt {
  font-size: var(--text-sm); color: var(--color-text-muted);
  line-height: var(--leading-relaxed); flex: 1;
}
.post-card__read {
  font-size: var(--text-sm); font-weight: 600;
  color: var(--color-electric-bright);
}

/* ── BLOG · ARTICLE TYPOGRAPHY ────────────────────────────────── */
.article {
  max-width: var(--container-copy);
  margin-inline: auto;
}
.article h1 { font-size: var(--text-3xl); margin-bottom: var(--space-6); }
.article h2 {
  font-size: var(--text-xl);
  margin: var(--space-2xl) 0 var(--space-4);
  color: var(--color-text-primary);
}
.article h3 { font-size: var(--text-lg); margin: var(--space-xl) 0 var(--space-3); }
.article p  {
  font-size: var(--text-base); color: var(--color-text-muted);
  line-height: var(--leading-prose); margin-bottom: var(--space-5);
}
.article a:not(.btn)  { color: var(--color-electric-bright); text-decoration: underline; }
.article a:not(.btn):hover { color: var(--color-text-primary); }
.article ul, .article ol { margin: 0 0 var(--space-5) var(--space-6); }
.article ul { list-style: disc; }
.article ol { list-style: decimal; }
.article li {
  font-size: var(--text-base); color: var(--color-text-muted);
  line-height: var(--leading-relaxed); margin-bottom: var(--space-2);
}
.article blockquote {
  border-left: 3px solid var(--color-cta);
  padding-left: var(--space-5);
  font-style: italic;
  color: var(--color-text-muted);
  margin: var(--space-6) 0;
}
.article pre {
  background: var(--color-navy-darker);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  overflow-x: auto;
  margin-bottom: var(--space-5);
}
.article code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--color-sky);
}
.article :not(pre) > code {
  background: rgba(147,197,253,0.08);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}
.article img { border-radius: var(--radius-lg); margin-bottom: var(--space-5); }
.article hr  { border: none; border-top: 1px solid var(--color-divider); margin: var(--space-2xl) 0; }

/* Tables in prose. The legal pages use them to list cookies and the
   companies that receive data; a narrow screen scrolls the table itself
   rather than the whole page. */
.article table {
  width: 100%; border-collapse: collapse;
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
}
.article th, .article td {
  text-align: left; vertical-align: top;
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-divider);
  line-height: var(--leading-relaxed);
}
.article th { color: var(--color-text-primary); font-weight: 700; }
.article td { color: var(--color-text-muted); }

/* ── LEGAL PAGES ──────────────────────────────────────────────── */
.legal-doc { max-width: 72ch; }
/* --text-base bottoms out at 15px on a narrow screen, under the 16px
   floor the project sets for body text. Dense legal prose is the last
   place to shave a pixel, so these pages hold a true 16px minimum.
   The same clamp affects blog prose, which is a wider decision. */
.legal-doc p,
.legal-doc li { font-size: max(1rem, var(--text-base)); }
/* A table wider than the column scrolls inside its own box, so the page
   body never scrolls sideways on a phone. */
.legal-doc table { display: block; overflow-x: auto; white-space: nowrap; }
.legal-doc td, .legal-doc th { white-space: normal; min-width: 12ch; }

/* Every decision still owed by the business. Deliberately loud: these
   must be impossible to miss while reading, and impossible to publish
   by accident. */
.legal-todo {
  display: inline-block;
  background: rgba(220, 38, 38, 0.12);
  border: 1px solid rgba(220, 38, 38, 0.45);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-2);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
}

.article-header { margin-bottom: var(--space-2xl); }
.article-header__meta {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
}

/* ── ABOUT · STORY ARC ────────────────────────────────────────── */
.arc-block {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-3xl);
  margin-bottom: var(--space-6);
}
.arc-block__step {
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-cta); letter-spacing: var(--tracking-widest);
  text-transform: uppercase; margin-bottom: var(--space-3);
}
.arc-block__title { font-size: var(--text-2xl); color: var(--color-text-primary); margin-bottom: var(--space-4); }
.arc-block__body  { font-size: var(--text-base); color: var(--color-text-muted);
                    line-height: var(--leading-prose); max-width: 62ch; }

/* ── ABOUT · VALUES GRID ──────────────────────────────────────── */
.values-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4);
}
@media (max-width: 640px) { .values-grid { grid-template-columns: 1fr; } }
.value-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.value-card__title { font-size: var(--text-base); font-weight: 700;
                     color: var(--color-text-primary); margin-bottom: var(--space-2); }
.value-card__desc  { font-size: var(--text-sm); color: var(--color-text-muted);
                     line-height: var(--leading-relaxed); max-width: 40ch; }

/* ── ABOUT · FOUNDER CARD ─────────────────────────────────────── */
.founder-card {
  display: grid; grid-template-columns: 140px 1fr; gap: var(--space-8);
  align-items: center;
  background: linear-gradient(135deg, var(--color-bg-surface), rgba(77,142,255,0.04));
  border: 1px solid rgba(77,142,255,0.25);
  border-radius: var(--radius-2xl);
  padding: var(--space-3xl);
}
@media (max-width: 640px) { .founder-card { grid-template-columns: 1fr; text-align: center; } }
.founder-card__avatar {
  width: 120px; height: 120px; border-radius: 50%;
  background: var(--gradient-cta);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700;
  color: var(--color-text-primary);
  box-shadow: var(--shadow-cta);
  margin-inline: auto;
}

/* ── COMMUNITY · FAME GRID ────────────────────────────────────── */
.fame-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4);
}
@media (max-width: 700px) { .fame-grid { grid-template-columns: 1fr; } }
.fame-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-8);
  display: flex; flex-direction: column; gap: var(--space-3);
  transition: border-color var(--ease-base), transform var(--ease-spring);
}
.fame-card:hover { transform: translateY(-3px); border-color: rgba(77,142,255,0.3); }
.fame-card--career    { border-color: rgba(77,142,255,0.22); }
.fame-card--community { border-color: rgba(27,110,243,0.22); }
.fame-card__badge     { font-family: var(--font-mono); font-size: var(--text-xs);
                        color: var(--color-cta); letter-spacing: var(--tracking-wide); }
.fame-card__name      { font-family: var(--font-mono); font-size: var(--text-sm);
                        color: var(--color-text-muted); }
.fame-card__milestone { font-family: var(--font-display); font-size: var(--text-xl);
                        font-weight: 700; color: var(--color-text-primary);
                        line-height: var(--leading-snug); }
.fame-card__detail    { font-size: var(--text-sm); color: var(--color-text-muted);
                        line-height: var(--leading-relaxed); max-width: 48ch; }

/* ── COMMUNITY · GALLERY ──────────────────────────────────────── */
.gallery-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px; gap: var(--space-4);
}
@media (max-width: 768px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .gallery-grid { grid-template-columns: 1fr; } }
.gallery-grid__item {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-family: var(--font-mono); font-size: var(--text-xs);
  overflow: hidden; position: relative;
}
.gallery-grid__item:first-child { grid-column: span 2; }
@media (max-width: 480px) { .gallery-grid__item:first-child { grid-column: span 1; } }
.gallery-grid__item img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}

/* A single photo: one full-width tile shaped by the picture itself.
   The 200px row height and the span-2 first child both exist to make a
   mosaic of many tiles line up, and neither helps when there is only
   one — they would crop it. Doubled class so the narrow-screen column
   rules above cannot win on source order. */
.gallery-grid.gallery-grid--single {
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
}
.gallery-grid--single .gallery-grid__item {
  display: block;
  margin: 0;
}
.gallery-grid--single .gallery-grid__item:first-child { grid-column: auto; }
.gallery-grid--single .gallery-grid__item img {
  position: static;
  height: auto;
}

/* ── RESOURCES · CATEGORY CARDS ───────────────────────────────── */
.resource-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5);
}
@media (max-width: 900px) { .resource-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .resource-grid { grid-template-columns: 1fr; } }
.resource-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex; flex-direction: column; gap: var(--space-3);
  transition: border-color var(--ease-base), transform var(--ease-spring);
}
.resource-card:hover { border-color: rgba(77,142,255,0.3); transform: translateY(-3px); }
.resource-card__title { font-size: var(--text-lg); font-weight: 700; color: var(--color-text-primary); }
.resource-card__desc  { font-size: var(--text-sm); color: var(--color-text-muted);
                        line-height: var(--leading-relaxed); flex: 1; max-width: 38ch; }
.resource-card__status {
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-cta); letter-spacing: var(--tracking-wide);
}

/* ── MODULE 5 RESPONSIVE OVERRIDES ────────────────────────────── */
@media (max-width: 800px) {
  .contact-layout, .join-layout, .vision-mission-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── TESTIMONIAL CAROUSEL ─────────────────────────────────────── */
.tcarousel { max-width: 780px; margin-inline: auto; }

/* Track: horizontal scroll-snap — native swipe on mobile */
.tcarousel__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: var(--space-5);
  padding-block: var(--space-2);
  /* Hide scrollbar without disabling scroll */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tcarousel__track::-webkit-scrollbar { display: none; }
.tcarousel__track:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 4px;
  border-radius: var(--radius-lg);
}

.tcarousel__card {
  flex: 0 0 100%;
  scroll-snap-align: center;
  background: var(--color-bg-surface);
  border: 1px solid rgba(147,197,253,0.16);
  border-radius: var(--radius-2xl);
  padding: var(--space-3xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.tcarousel__stars {
  display: flex;
  gap: var(--space-1);
  color: var(--color-cta);
}
.tcarousel__stars svg {
  width: 20px; height: 20px;
  fill: currentColor;
  filter: drop-shadow(0 0 4px rgba(77,142,255,0.4));
}

/* The quote — italic serif, generously sized like the reference */
.tcarousel__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--color-text-primary);
  line-height: var(--leading-relaxed);
  border: none;
  padding: 0;
  margin: 0;
}

.tcarousel__divider {
  height: 1px;
  background: var(--color-divider);
}

.tcarousel__author {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.tcarousel__photo {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(147,197,253,0.2);
  flex-shrink: 0;
}
.tcarousel__photo--initials {
  background: var(--gradient-electric);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text-primary);
  filter: none;
}
.tcarousel__name {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text-primary);
}
.tcarousel__role {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}
.tcarousel__verified { margin-left: auto; }
@media (max-width: 560px) { .tcarousel__verified { display: none; } }

/* Controls row: prev · dots · next */
.tcarousel__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.tcarousel__btn {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-primary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color var(--ease-fast), background var(--ease-fast), transform var(--ease-spring);
  flex-shrink: 0;
}
.tcarousel__btn:hover {
  border-color: var(--color-electric-bright);
  background: var(--color-electric-muted);
  transform: scale(1.06);
}
.tcarousel__btn:disabled {
  opacity: 0.3;
  cursor: default;
  transform: none;
}

.tcarousel__dots {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.tcarousel__dot {
  width: 8px; height: 8px;
  border-radius: var(--radius-full);
  background: rgba(147,197,253,0.25);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: width var(--ease-base), background var(--ease-base);
}
.tcarousel__dot.is-active {
  width: 26px;
  background: var(--color-cta);
}

/* ── FOUNDER FEATURE CARD (v2 — photo + quote + data strip) ───── */
.founder-feature {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-3xl);
  align-items: start;
  background: linear-gradient(135deg, var(--color-bg-surface), rgba(77,142,255,0.045));
  border: 1px solid rgba(77,142,255,0.25);
  border-radius: var(--radius-2xl);
  padding: var(--space-3xl);
  position: relative;
  overflow: hidden;
}
/* Subtle constellation echo in the corner — ties to the hero identity */
.founder-feature::after {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(27,110,243,0.12) 0%, transparent 70%);
  pointer-events: none;
}
@media (max-width: 800px) {
  .founder-feature { grid-template-columns: 1fr; text-align: center; }
}

/* Portrait: full colour, electric ring, initials fallback.
   The grayscale filter was removed at the brand's request. The other
   grayscale portraits on the site (speaker rail, testimonial photos)
   are untouched, so if the house style is meant to be consistent they
   would need the same change. */
.founder-feature__portrait {
  width: 220px; height: 220px;
  border-radius: var(--radius-xl);
  object-fit: cover;
  border: 2px solid rgba(77,142,255,0.45);
  box-shadow: 0 0 0 6px rgba(77,142,255,0.08), var(--shadow-md);
  margin-inline: auto;
}
.founder-feature__portrait--initials {
  background: var(--gradient-cta);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 700;
  color: var(--color-text-primary);
  filter: none;
}

.founder-feature__name {
  font-size: var(--text-2xl);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}
.founder-feature__role {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-cta);
  margin-bottom: var(--space-5);
}
.founder-feature__bio {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  max-width: 56ch;
  margin-bottom: var(--space-6);
}
@media (max-width: 800px) { .founder-feature__bio { margin-inline: auto; } }

/* Founder quote — italic serif with amber bar */
.founder-feature__quote {
  border-left: 3px solid var(--color-cta);
  padding-left: var(--space-5);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--color-text-primary);
  line-height: var(--leading-relaxed);
  max-width: 48ch;
  margin-bottom: var(--space-8);
}
@media (max-width: 800px) {
  .founder-feature__quote { border-left: none; padding-left: 0; margin-inline: auto; }
}

/* Data strip — founder's journey as a dataset */
.founder-feature__stats {
  display: flex;
  gap: 0;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-6);
  background: var(--color-bg-elevated);
}
.founder-feature__stat {
  flex: 1;
  padding: var(--space-4) var(--space-5);
  text-align: center;
}
.founder-feature__stat:not(:last-child) {
  border-right: 1px solid var(--color-divider);
}
.founder-feature__stat-value {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-electric-bright);
  display: block;
  line-height: 1.2;
}
.founder-feature__stat-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
@media (max-width: 560px) {
  .founder-feature__stats { flex-direction: column; }
  .founder-feature__stat:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid var(--color-divider);
  }
}

.founder-feature__actions {
  display: flex; gap: var(--space-3); flex-wrap: wrap;
}
@media (max-width: 800px) { .founder-feature__actions { justify-content: center; } }

/* ── FOOTER NEWSLETTER ────────────────────────────────────────── */
.footer-newsletter {
  display: flex;
  gap: var(--space-2);
}
.footer-newsletter__input {
  flex: 1;
  min-width: 0;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 9px 16px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  outline: none;
  transition: border-color var(--ease-fast);
}
.footer-newsletter__input::placeholder { color: var(--color-text-muted); }
.footer-newsletter__input:focus { border-color: var(--color-electric-bright); }

/* ── NEWSLETTER TOAST ─────────────────────────────────────────── */
.nl-toast {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-modal);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-lg);
  animation: toast-in 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.nl-toast--ok {
  background: var(--color-teal-muted);
  border: 1px solid rgba(27,110,243,0.4);
  color: var(--color-teal-light);
}
.nl-toast--invalid {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.9);
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── COOKIE CONSENT BANNER ────────────────────────────────────── */
/* Built by public/js/cookie-consent.js on first visit, or reopened from
   the footer's "Cookie Preferences" link. Sits in the dark-zone selector
   list above so .btn--outline / .btn--electric read correctly on it. */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-modal);
  background: var(--color-navy-darker);
  border-top: 1px solid rgba(147,197,253,0.16);
  box-shadow: var(--shadow-lg);
  padding: var(--space-5) var(--container-px);
  transform: translateY(100%);
  transition: transform var(--ease-spring);
}
.cookie-banner.is-visible { transform: translateY(0); }

.cookie-banner__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.cookie-banner__text {
  flex: 1 1 420px;
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: rgba(255,255,255,0.85);
}
.cookie-banner__text a { color: var(--color-sky); text-decoration: underline; }
.cookie-banner__text a:hover { color: #fff; }

.cookie-banner__actions {
  display: flex;
  gap: var(--space-3);
  flex-shrink: 0;
}
.cookie-banner__actions .btn { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .cookie-banner { transition: none; }
}

/* Reserves space at the foot of the page for as long as the banner is
   showing, so it never sits on top of a page's own last button — see
   the confirm screens in views/programs/duplicate-confirm.ejs, whose
   Accept/Decline row can otherwise land in the same band. Height is
   measured and set by cookie-consent.js, since it varies with how many
   lines the banner text wraps to. */
body.cookie-banner-visible {
  padding-bottom: var(--cookie-banner-h, 0px);
  transition: padding-bottom var(--ease-spring);
}

/* ── BTM FLYER FEATURE CARD ───────────────────────────────────── */
.flyer-feature {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: var(--space-8);
  align-items: center;
  background: linear-gradient(135deg, rgba(27,110,243,0.08), rgba(77,142,255,0.03));
  border: 1px solid rgba(27,110,243,0.25);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  overflow: hidden;
}
@media (max-width: 860px) {
  .flyer-feature { grid-template-columns: 1fr; }
}

.flyer-feature__image {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(147,197,253,0.18);
  box-shadow: var(--shadow-lg);
  display: block;
  transition: transform var(--ease-spring);
}
.flyer-feature__image:hover { transform: scale(1.02); }

/* No flyer yet → branded placeholder that still looks intentional */
.flyer-feature__placeholder {
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(147,197,253,0.18);
  background:
    radial-gradient(circle at 30% 30%, rgba(27,110,243,0.25), transparent 60%),
    var(--color-bg-elevated);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--space-3);
}
.flyer-feature__placeholder svg { color: var(--color-electric-bright); }
.flyer-feature__placeholder span {
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-sky); letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

.flyer-feature__label {
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-electric-bright);
  letter-spacing: var(--tracking-widest); text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.flyer-feature__topic {
  font-size: var(--text-2xl); color: var(--color-text-primary);
  line-height: var(--leading-snug); margin-bottom: var(--space-4);
}
.flyer-feature__meta {
  display: flex; flex-direction: column; gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.flyer-feature__meta span {
  font-family: var(--font-mono); font-size: var(--text-sm);
  color: var(--color-sky);
}
.flyer-feature__meta span strong { color: var(--color-text-primary); font-weight: 600; }

/* Past session flyer thumbnails */
.session-row__flyer {
  width: 88px; height: 60px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  flex-shrink: 0;
}
.session-row--with-media {
  display: flex; align-items: center; gap: var(--space-5);
  justify-content: flex-start;
}
.session-row--with-media .session-row__body { flex: 1; min-width: 0; }
.session-row--with-media .session-row__action { flex-shrink: 0; }

/* ── SPEAKER RAIL (Past Speakers — Behind the Metrics) ────────── */
.srail { position: relative; }

.srail__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: var(--space-5);
  padding-block: var(--space-2) var(--space-4);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.srail__track::-webkit-scrollbar { display: none; }
.srail__track:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 4px;
  border-radius: var(--radius-lg);
}

/* Each card: fixed width so several sit in view — a "rail", not one-at-a-time */
.srail__card {
  flex: 0 0 240px;
  scroll-snap-align: start;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  transition: border-color var(--ease-base), transform var(--ease-spring);
}
.srail__card:hover {
  border-color: rgba(77,142,255,0.35);
  transform: translateY(-4px);
}
@media (max-width: 560px) { .srail__card { flex-basis: 210px; } }

/* Portrait — full colour, electric ring.
   Shared by the Business Challenge judges and the Behind the Metrics
   speakers, so both now show in colour. Grayscale was removed with the
   founder's, leaving only .tcarousel__photo still filtered. */
.srail__photo {
  width: 84px; height: 84px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(77,142,255,0.35);
  box-shadow: 0 0 0 5px rgba(27,110,243,0.08);
}
.srail__photo--initials {
  background: var(--gradient-electric);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text-primary);
  filter: none;
}

.srail__name {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.3;
}
.srail__role {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
  max-width: 22ch;
}
.srail__role strong { color: var(--color-sky); font-weight: 600; }

/* Session tag — the Databeauty-specific touch: speaker as a data record */
.srail__session {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-wide);
  color: var(--color-electric-bright);
  background: var(--color-electric-muted);
  border: 1px solid rgba(27,110,243,0.2);
  border-radius: var(--radius-full);
  padding: 3px 10px;
  margin-top: var(--space-1);
}

/* Controls — reuse the same visual language as the testimonial carousel */
.srail__controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* ── PARTNER LOGO BADGE (About · partnership card) ────────────── */
.partner-logo-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.partner-logo {
  width: 64px; height: 64px;
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  padding: var(--space-2);
  object-fit: contain;
  flex-shrink: 0;
}
.partner-logo--fallback {
  display: flex; align-items: center; justify-content: center;
  background: var(--gradient-electric);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text-primary);
}

/* ── CHALLENGE TIMELINE (Business Challenge — dates as data) ──── */
.challenge-timeline {
  display: flex;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-elevated);
  margin: var(--space-6) 0;
}
.challenge-timeline__stat {
  flex: 1;
  padding: var(--space-4) var(--space-5);
  text-align: center;
  border-right: 1px solid var(--color-divider);
}
.challenge-timeline__stat:last-child { border-right: none; }
/* Labels take the highest-contrast text colour for easy reading:
   --color-text-primary is white on the dark panel and near-black
   (#111827) in light mode, where a literal white would disappear. */
.challenge-timeline__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--space-2);
}
.challenge-timeline__value {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-electric-bright);
  display: block;
}
/* The urgency cell — days remaining. Brand blue only (no amber): the
   tint plus the larger, white value is what draws the eye. */
.challenge-timeline__stat--urgent {
  background: var(--color-electric-muted);
}
/* No label override here — the urgent cell is distinguished by its tint
   and the larger value, so its label matches the others. */
.challenge-timeline__stat--urgent .challenge-timeline__value {
  color: var(--color-text-primary);
  font-size: var(--text-xl);
}

@media (max-width: 700px) {
  .challenge-timeline { flex-direction: column; }
  .challenge-timeline__stat { border-right: none; border-bottom: 1px solid var(--color-divider); }
  .challenge-timeline__stat:last-child { border-bottom: none; }
}

/* ── REQUIREMENTS CHECKLIST (Business Challenge — eligibility) ──
   Deliberately distinct from the numbered Guidelines list —
   compact check-grid, not full-width numbered rows. */
.requirements-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
@media (max-width: 700px) { .requirements-grid { grid-template-columns: 1fr; } }

.requirement-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.requirement-item__icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--color-electric-muted);
  border: 1px solid rgba(27,110,243,0.3);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-electric-bright);
  flex-shrink: 0;
  margin-top: 1px;
}
.requirement-item__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ── GAIN CARDS (Business Challenge — What You'll Gain) ─────────
   New component — deliberately amber-accented so it reads as
   "reward" at a glance, distinct from Requirements' blue checks. */
.gains-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 900px) { .gains-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gains-grid { grid-template-columns: 1fr; } }

.gain-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3);
  transition: border-color var(--ease-base), transform var(--ease-spring);
}
.gain-card:hover { border-color: rgba(77,142,255,0.3); transform: translateY(-3px); }
.gain-card__icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-cta-muted);
  border: 1px solid rgba(77,142,255,0.2);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-cta);
  flex-shrink: 0;
}
.gain-card__title {
  font-size: var(--text-base); font-weight: 700; color: var(--color-text-primary);
}
.gain-card__desc {
  font-size: var(--text-sm); color: var(--color-text-muted);
  line-height: var(--leading-relaxed); max-width: 34ch;
}

/* ── FOOTER SOCIAL ROW (Connect column) ───────────────────────────
   Modern treatment: each platform reads like a small data record —
   icon badge + platform name + mono-font handle — rather than a
   row of plain corner icons. Monochrome electric-blue throughout,
   per the site's strict brand-color rule (no per-platform colors). */
.footer-social {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.footer-social__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background var(--ease-fast), border-color var(--ease-fast);
  border: 1px solid transparent;
}
.footer-social__row:hover {
  background: rgba(27,110,243,0.06);
  border-color: rgba(27,110,243,0.18);
}
.footer-social__icon {
  width: 34px; height: 34px;
  border-radius: var(--radius-md);
  background: var(--color-electric-muted);
  border: 1px solid rgba(27,110,243,0.2);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-electric-bright);
  flex-shrink: 0;
}
.footer-social__icon svg { width: 16px; height: 16px; }
.footer-social__name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.3;
}
.footer-social__handle {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-sky);
  line-height: 1.3;
}

/* =============================================================
   LIGHT THEME — component theming tokens + dark-zone overrides
   The site is light by default (tokens.css). Nav, hero and footer
   stay dark for brand identity, so their text/accent tokens are
   re-scoped back to the light-on-dark values here. Because every
   component reads these semantic tokens, no per-rule edits are
   needed to keep the dark zones readable.
   ============================================================= */
:root {
  --btn-outline-border:        rgba(17,24,39,0.28);
  --btn-outline-border-strong: rgba(17,24,39,0.55);
  --btn-outline-hover:         rgba(17,24,39,0.05);
}

.site-header, .hero, .page-hero, .site-footer, .article pre, .cookie-banner {
  --color-text-primary:    #ffffff;
  --color-text-muted:      rgba(255,255,255,0.62);
  --color-sky:             #93C5FD;
  --color-electric-bright: #4D8EFF;
  --color-cta:             #4D8EFF;
  --color-border:          rgba(255,255,255,0.14);
  --color-divider:         rgba(255,255,255,0.09);
  --color-bg-surface:      rgba(255,255,255,0.04);
  --color-bg-elevated:     rgba(255,255,255,0.06);
  --btn-outline-border:        rgba(255,255,255,0.32);
  --btn-outline-border-strong: rgba(255,255,255,0.70);
  --btn-outline-hover:         rgba(255,255,255,0.08);
}

/* Colour-filled buttons always carry white text, in any zone. */
.btn--cta, .btn--electric { --color-text-primary: #ffffff; }

/* =============================================================
   CHALLENGE STATUS PILL — shown in place of a "Register" button
   once the challenge has started (see lib/dates.js statusLabel).
   Non-interactive, theme-aware, strictly brand blue.
   Text uses --color-text-primary (white on dark, near-black on the
   light theme's pale tint) to match the timeline labels.
   ============================================================= */
.event-card__status,
.bc-cta__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-2);
  padding: 10px 18px;
  border-radius: var(--radius-full);
  background: var(--color-electric-muted);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1.3;
  cursor: default;
}
.bc-cta__status { font-size: var(--text-sm); padding: 14px 28px; }

/* ── Collapsed grids must be allowed to shrink ────────────────────
   A grid item's min-width defaults to auto, meaning "never narrower
   than my content". When the two-column layouts above collapse to one
   column, the track then sizes to the widest thing inside it and grows
   past the grid: the Book Club column measured 405px inside a 358px
   container, and the whole page scrolled sideways on a phone.

   These layouts are single-column at this width, so nothing in them
   needs its intrinsic width honoured.
   ------------------------------------------------------------- */
@media (max-width: 800px) {
  .container > [style*="grid-template-columns"] > *,
  .contact-layout > *,
  .join-layout > *,
  .vision-mission-grid > * {
    min-width: 0;
  }
}

/* ── FLOATING EVENT CARDS ────────────────────────────────────────
   The Upcoming Events section is the one place on the home page
   showing something with a date attached, so it earns emphasis.
   Three layers do the work, documented in docs/FLOATING-CARDS.md:

     1. Rest elevation  — a real shadow so the card sits above the
                          page rather than being drawn on it.
     2. Idle drift      — a slow 6s rise and fall, staggered per card
                          so they never move in lockstep. Amplitude is
                          12px. Past roughly this it stops reading as
                          depth and starts looking like a wobble.
     3. Hover lift      — a larger, faster response to the pointer,
                          which is what tells someone it is clickable.

   Everything animates transform and box-shadow only. Both are
   composited by the GPU, so this costs no layout work per frame and
   does not reflow the page while it runs.
   ------------------------------------------------------------- */
.events-grid .event-card {
  /* Own stacking context so the shadow never lands under a sibling */
  position: relative;
  z-index: 0;
  box-shadow:
    0 10px 24px -12px rgba(0, 0, 0, 0.55),
    0 2px 6px -2px rgba(0, 0, 0, 0.35);
  transition:
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 260ms ease;
  animation: card-float 6s ease-in-out infinite;
  will-change: transform;
}

/* Stagger so the row breathes instead of pulsing as one block */
.events-grid .event-card:nth-child(2) { animation-delay: -2s; }
.events-grid .event-card:nth-child(3) { animation-delay: -4s; }

@keyframes card-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* Hover and keyboard focus both lift; the idle drift pauses so the
   two transforms cannot fight each other mid-animation. */
.events-grid .event-card:hover,
.events-grid .event-card:focus-within {
  animation-play-state: paused;
  transform: translateY(-18px);
  z-index: 1;
  border-color: rgba(77, 142, 255, 0.45);
  box-shadow:
    0 22px 44px -16px rgba(0, 0, 0, 0.65),
    0 4px 12px -4px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(77, 142, 255, 0.18);
}

/* Motion is decoration here. Removing it keeps every bit of the
   elevation and the hover response, which is what actually carries
   the meaning — only the idle drift stops. */
@media (prefers-reduced-motion: reduce) {
  .events-grid .event-card { animation: none; }
  .events-grid .event-card:hover,
  .events-grid .event-card:focus-within { transform: none; }
}

/* ── PARTNERS PAGE ───────────────────────────────────────────────
   One card per organisation, driven by data/partners.json. Sized so
   a single partner does not look stranded on a wide screen and a
   future list of six still reads as a set.
   ------------------------------------------------------------- */
.partner-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
.partner-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
}
.partner-card__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.partner-card__logo {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  object-fit: contain;
  background: #fff;          /* logos are drawn for light backgrounds */
  padding: var(--space-2);
}
.partner-card__logo--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-elevated);
  color: var(--color-electric-bright);
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  padding: 0;
}
.partner-card__name {
  font-size: var(--text-2xl);
  color: var(--color-text-primary);
  line-height: 1.2;
  margin-bottom: var(--space-1);
}
.partner-card__tagline {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-electric-bright);
}
.partner-card__body {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  max-width: 72ch;
}
.partner-card__faq { margin-top: var(--space-6); }
.partner-card__faq-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.partner-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.partner-empty {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  font-style: italic;
}

/* Closing "work with us" band */
.partner-cta {
  text-align: center;
  max-width: 60ch;
  margin-inline: auto;
}
.partner-cta__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}
.partner-cta__body {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
}

/* One-line certification note left on the training page */
.training-partner-note {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  text-align: center;
}
.training-partner-note strong { color: var(--color-text-primary); }
.training-partner-note a {
  color: var(--color-electric-bright);
  text-decoration: underline;
  margin-left: var(--space-2);
}

@media (min-width: 720px) {
  .partner-card__head {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: var(--space-6);
  }
}