/* ==========================================================================
   FemNEST — Stylesheet
   --------------------------------------------------------------------------
   How to edit (see README.md for the full guide):
   - Brand colors live in :root below. Change a value once, it updates
     everywhere. The "derived tones" group are tints/shades of the same
     five brand colors (used for gradients, glows, hover states) — not
     new colors.
   - Fonts: --font-heading / --font-body point at the real brand fonts
     per FemNEST_Brand_Guidelines.pdf. Bitter (headings) is self-hosted
     from assets/fonts/ via the @font-face rules just below :root —
     Poppins (body) is a temporary stand-in for the brand's specified
     Open Sauce, loaded via Google Fonts, until real Open Sauce files
     are supplied. See README.md "Fonts" for the full picture, including
     why Coolvetica (the brand's display/accent font) isn't in use yet.
   - Motion: scroll-reveal animation is handled in js/main.js and honors
     prefers-reduced-motion (see the media query at the very bottom of
     this file) — nothing to touch here for that.
   ========================================================================== */

:root {
  /* Brand colors — confirmed, do not change without sign-off */
  --color-blue: #295df6;      /* primary */
  --color-orange: #ec6a2c;    /* accent / CTA */
  --color-lavender: #f2cdfc;  /* soft background */
  --color-green: #deea9e;     /* base background / soft highlight */
  --color-cream: #eee7ce;     /* text-on-blue / accent tint */

  /* Derived tones — tints/shades of the five colors above, used for
     gradients, glows and depth. Not new brand colors. */
  --color-blue-deep: #1c3fb0;
  --color-orange-deep: #c94f18;
  --color-ink: #201f2b;
  --color-ink-soft: #4a4856;
  --color-white: #ffffff;
  --color-border: rgba(32, 31, 43, 0.12);

  --gradient-cta: linear-gradient(135deg, var(--color-orange) 0%, var(--color-orange-deep) 100%);
  --gradient-brand: linear-gradient(120deg, var(--color-blue) 0%, var(--color-orange) 100%);
  --gradient-hero-wash: radial-gradient(circle at 15% 20%, rgba(41, 93, 246, 0.16), transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(236, 106, 44, 0.16), transparent 40%),
    radial-gradient(circle at 50% 90%, rgba(222, 234, 158, 0.35), transparent 50%);

  /* Brand fonts, per FemNEST_Brand_Guidelines.pdf:
     - Bitter (serif) = "Primary Headline" — editorial headlines, pulled
       quotes, section titles. Self-hosted (SIL Open Font License) via
       the @font-face rules below.
     - Open Sauce = "Body & UI" — body copy, nav, forms, metadata. Font
       files not supplied yet; Poppins stands in for it (the same
       stand-in the brand guide itself uses on its one-pager), loaded
       from Google Fonts. Swap for real Open Sauce files once available.
     Coolvetica Rg ("Display/Accent" — stat callouts, bold moments) is
     NOT used here: the supplied .otf files are under Typodermic's free
     DESKTOP license, which explicitly excludes "websites and webfonts"
     — that needs a separate paid webfont license from Typodermic. See
     README.md "Fonts" before adding it anywhere on the site. */
  --font-heading: 'Bitter', Georgia, serif;
  --font-body: 'Poppins', system-ui, -apple-system, sans-serif;

  --radius: 20px;
  --radius-sm: 12px;
  --shadow-soft: 0 12px 32px rgba(32, 31, 43, 0.08);
  --shadow-lift: 0 24px 48px rgba(32, 31, 43, 0.16);
  --shadow-glow-orange: 0 14px 32px rgba(236, 106, 44, 0.35);
  --max-width: 1160px;
}

/* ---- Self-hosted brand font: Bitter (SIL OFL — see assets/fonts/OFL.txt) ---- */
@font-face {
  font-family: 'Bitter';
  src: url('../assets/fonts/Bitter-VariableFont_wght.ttf') format('truetype-variations'),
       url('../assets/fonts/Bitter-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bitter';
  src: url('../assets/fonts/Bitter-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('../assets/fonts/Bitter-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ---- Reset ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  position: relative;
  margin: 0;
  background: var(--color-green);
  color: var(--color-ink);
  font-family: var(--font-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* Subtle grain texture over the whole page — the "lifestyle brand" tactile
   touch that keeps big flat color fields from feeling sterile. Pure CSS,
   no image request. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--color-blue);
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  color: var(--color-ink);
}

h1 { font-size: clamp(2.4rem, 6vw, 4rem); color: var(--color-blue); }
h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 2.5vw, 1.5rem); }

p { margin: 0 0 1em; }

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

/* Visually-hide content but keep it for screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  background: var(--color-ink);
  color: var(--color-white);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  z-index: 1001;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 12px;
}

/* ---- Highlight / marker text treatment ----
   background-image (not an ::after) so box-decoration-break can clone the
   highlight across each wrapped line — safe on narrow mobile widths where
   the phrase wraps to two or more lines. */
.highlight {
  background-image: linear-gradient(120deg, rgba(236, 106, 44, 0.4), rgba(236, 106, 44, 0.4));
  background-repeat: no-repeat;
  /* Sized in em (not %) so the marker band is always ~40% of this
     text's own font-size, regardless of the surrounding paragraph's
     line-height — a percentage size/position here resolves against an
     inline element's line box, which some browsers compute from
     font metrics rather than the declared line-height, making it
     shrink to a thin strikethrough-looking sliver in a tall-line-height
     paragraph like .voice-pill. Em units sidestep that entirely. */
  background-size: 100% 0.4em;
  background-position: 0 bottom;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 0.05em;
}

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

/* ---- Header / Nav ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(222, 234, 158, 0.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--color-border);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.nav__brand:hover {
  transform: scale(1.03);
}

.nav__brand img {
  height: 28px;
  width: auto;
}

.nav__toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.nav__toggle-bar {
  display: block;
  width: 26px;
  height: 3px;
  margin: 5px 0;
  background: var(--color-ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__links a:not(.btn) {
  position: relative;
  color: var(--color-ink);
  text-decoration: none;
  font-weight: 600;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  padding-bottom: 4px;
}

.nav__links a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--color-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.nav__links a:not(.btn):hover,
.nav__links a:not(.btn):focus-visible {
  color: var(--color-orange);
}

.nav__links a:not(.btn):hover::after,
.nav__links a:not(.btn):focus-visible::after,
.nav__links a.is-current::after {
  transform: scaleX(1);
}

.nav__links a.is-current {
  color: var(--color-blue);
}

.nav__links a.is-current::after {
  background: var(--color-blue);
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, background 0.2s ease;
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-3px) scale(1.02);
}

.btn:active {
  transform: translateY(-1px) scale(0.99);
}

.btn-primary {
  background: var(--gradient-cta);
  color: var(--color-white);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  color: var(--color-white);
}

.btn-secondary {
  background: var(--color-white);
  color: var(--color-blue);
  border-color: var(--color-blue);
}

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

.btn-block {
  width: 100%;
}

/* ---- Blob decorations (pure CSS, brand-colored, no images) ---- */
.blob-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
}

.blob--blue { background: var(--color-blue); }
.blob--orange { background: var(--color-orange); }
.blob--green { background: var(--color-green); }
.blob--lavender { background: var(--color-lavender); }

/* ---- Wave motif accents ----
   The squiggle traced out of the wordmark's own wave (see
   assets/icons/wave-motif-*.png and wave-mark-*.png), reused as a crisp
   decorative line — the graphic counterpart to the soft blurred blobs
   above. Keep it to brand blue/orange only. */
.hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 24px;
}

.hero__wave-flourish {
  display: block;
  width: 140px;
  max-width: 40%;
  height: auto;
  flex-shrink: 0;
  transform: rotate(-4deg);
}

.wave-divider {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 40px 0 0;
}

.wave-divider img {
  width: 170px;
  height: auto;
  opacity: 0.9;
}

/* ---- Hero ---- */
.hero {
  position: relative;
  padding: 96px 0 84px;
  background: var(--color-lavender);
  background-image: var(--gradient-hero-wash);
  overflow: hidden;
}

.hero .blob--blue { width: 320px; height: 320px; top: -120px; right: -60px; }
.hero .blob--orange { width: 260px; height: 260px; bottom: -100px; left: 10%; opacity: 0.35; }
.hero .blob--green { width: 220px; height: 220px; top: 40%; right: 15%; opacity: 0.4; }

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

/* Used on the dedicated Waitlist page to center the hero + CTA card
   instead of the usual left-aligned editorial hero layout. */
.hero__inner--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.hero__inner--center .hero__subhead {
  margin-left: auto;
  margin-right: auto;
}

.hero__inner--center .hero__ctas {
  justify-content: center;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-blue);
  background: var(--color-white);
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-soft);
}

.hero__eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-orange);
  display: inline-block;
}

.hero__subhead {
  font-size: 1.2rem;
  color: var(--color-ink-soft);
  max-width: 620px;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.hero__proof {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 40px;
  padding: 12px 20px 12px 12px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
}

/* ---- Avatar stack (social proof, no photos needed) ---- */
.avatar-stack {
  display: flex;
  align-items: center;
}

.avatar-stack__item {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--color-white);
  margin-left: -10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.7rem;
  color: var(--color-white);
}

.avatar-stack__item:first-child {
  margin-left: 0;
}

.avatar-stack__item:nth-child(1) { background: var(--color-blue); }
.avatar-stack__item:nth-child(2) { background: var(--color-orange); }
.avatar-stack__item:nth-child(3) { background: var(--color-ink-soft); }
.avatar-stack__item:nth-child(4) { background: var(--color-blue-deep); }

.hero__proof-text {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-ink);
}

/* ---- Sections ---- */
.section {
  position: relative;
  padding: 88px 0;
}

.section--alt {
  background: var(--color-white);
}

.section--lavender {
  background: var(--color-lavender);
}

.section--green {
  background: var(--color-green);
}

.section--blue {
  background: var(--color-blue);
}

.section--blue .endorsement-quote p {
  color: var(--color-white);
}

.section--blue .endorsement-quote cite {
  color: var(--color-lavender);
}

.section--tilt {
  clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%);
  margin: -40px 0;
  padding: 120px 0;
}

.section--voices {
  background: var(--color-blue);
  color: var(--color-cream);
}

.section--voices h2,
.section--voices h3 {
  color: var(--color-cream);
}

.section__header {
  max-width: 720px;
  margin: 0 0 40px;
}

.section__header--center {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section__header-intro {
  margin-top: 12px;
  font-size: 1.1rem;
  color: var(--color-ink-soft);
}

/* ---- Kit (ConvertKit) signup form ----
   The form's own inline styles (background, radius, colors) already
   match the brand palette — this wrapper just centers it. */
.kit-form-wrap {
  display: flex;
  justify-content: center;
}

.kit-form-wrap .formkit-form {
  width: 100%;
}

.section__kicker {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-orange);
  margin-bottom: 10px;
}

/* ---- Cards ---- */
.card {
  background: var(--color-white);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-soft);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}

/* ---- Stats ---- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 24px;
  margin-top: 8px;
}

.stat-card {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius);
  padding: 28px 26px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}

.stat-card:nth-child(odd) { transform: rotate(-1.4deg); }
.stat-card:nth-child(even) { transform: rotate(1.4deg); }

.stat-card:hover {
  transform: rotate(0deg) translateY(-6px);
  box-shadow: var(--shadow-lift);
}

.stats-intro {
  max-width: 62ch;
  font-size: 1.05rem;
  color: var(--color-ink-soft);
  margin: 12px 0 28px;
}

.stat-card__scope {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-orange-deep);
  margin-bottom: 10px;
}

.stat-card__number {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2.6rem;
  display: block;
  margin-bottom: 10px;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat-card__label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-ink);
  margin-bottom: 12px;
}

.stat-card__source {
  font-size: 0.85rem;
  color: var(--color-ink-soft);
}

.press-mention {
  text-align: center;
  margin-top: 32px;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  color: var(--color-ink-soft);
}

.press-mention strong {
  color: var(--color-ink);
}

/* ---- Press mentions list (Why now section) ----
   Shows both real Cyprus Mail articles by title, not just a single
   "As featured in" link. */
.press-mentions {
  text-align: center;
  margin-top: 32px;
}

.press-mentions__label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--color-ink-soft);
  margin-bottom: 10px;
}

.press-mentions__label strong {
  color: var(--color-ink);
}

.press-mentions__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
}

@media (min-width: 640px) {
  .press-mentions__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.press-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}

.press-card:hover,
.press-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

.press-card__source {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-orange-deep);
  margin-bottom: 8px;
}

.press-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--color-ink);
  margin-bottom: 12px;
}

.press-card__cta {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-blue-deep);
  margin-top: auto;
}

/* ---- Endorsement quote (Why now section) ----
   Message of support from Cyprus's Commissioner for Gender Equality,
   grouped with the press mention as external validation. */
.endorsement-quote {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  font-style: italic;
}

.endorsement-quote p {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  line-height: 1.4;
  color: var(--color-ink);
  margin-bottom: 18px;
}

.endorsement-quote cite {
  display: block;
  font-style: normal;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--color-ink-soft);
}

/* ---- Founder story panel ---- */
.founder-panel {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
  background: var(--color-lavender);
  border-radius: var(--radius);
  padding: 40px;
  box-shadow: var(--shadow-soft);
}

@media (min-width: 720px) {
  .founder-panel {
    grid-template-columns: minmax(220px, 300px) 1fr;
    padding: 48px;
  }
}

.founder-panel .blob--orange { width: 220px; height: 220px; top: -80px; right: -60px; opacity: 0.35; }
.founder-panel .blob--blue { width: 180px; height: 180px; bottom: -70px; left: -50px; opacity: 0.3; }

.founder-panel__media {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.founder-panel__photo {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
}

.founder-panel__caption {
  font-family: var(--font-heading);
  font-weight: 600;
  text-align: center;
  color: var(--color-ink);
  margin: 0;
}

.founder-panel__caption span {
  display: block;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  margin-top: 2px;
}

.founder-panel__content {
  position: relative;
  z-index: 1;
}

.founder-panel__quote {
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.5;
  color: var(--color-ink);
  font-family: var(--font-body);
  margin-bottom: 18px;
}

.founder-panel__body {
  color: var(--color-ink-soft);
  margin-bottom: 14px;
}

/* ---- Video embed (16:9, responsive) ---- */
.video-embed {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: 40px auto 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.founder-panel__body:last-child {
  margin-bottom: 0;
}

/* ---- Mind the Gap timeline (life-stage cascade) ---- */
.gap-timeline__intro {
  max-width: 62ch;
  font-size: 1.05rem;
  color: var(--color-ink-soft);
  font-style: italic;
}

.gap-timeline__intro + .gap-timeline__intro {
  margin-top: 10px;
}

.gap-timeline__source-note {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  color: var(--color-ink-soft);
  margin-top: 16px;
}

/* ---- Gap cards (Mind the Gap) ----
   One card per life-stage transition — stacks to a single column on
   phones, grids to 2/3 columns as the viewport grows. No horizontal
   scroll or absolute-positioned math, so it reads the same way on
   any screen. */
.gap-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 40px;
}

@media (min-width: 640px) {
  .gap-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 980px) {
  .gap-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.gap-card {
  background: var(--color-white);
  border-radius: var(--radius);
  padding: 24px 26px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
}

.gap-card__stage {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin-bottom: 12px;
}

.gap-card__stat {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 2rem;
  color: var(--color-blue-deep);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.gap-card__label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-orange-deep);
  margin: 4px 0 12px;
}

.gap-card__explain {
  color: var(--color-ink-soft);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

/* ---- Pending-stat placeholder ----
   For any figure that hasn't been verified yet. Dashed, not filled —
   reads visibly different from a confirmed stat so it can't be
   mistaken for one. Swap for the real number once confirmed. */
.stat-pending {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 18px;
  border: 2px dashed rgba(32, 31, 43, 0.3);
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-ink-soft);
}

/* ---- Problem statement ---- */
.problem-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
  margin-top: 28px;
}

@media (min-width: 720px) {
  .problem-grid {
    grid-template-columns: 0.8fr 1.2fr;
  }
}

.problem-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.problem-stat__figure {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 3rem;
  line-height: 1;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.problem-stat__label {
  color: var(--color-ink-soft);
  font-size: 0.95rem;
  max-width: 28ch;
}

.problem-text h2 {
  font-size: 1.4rem;
  margin-bottom: 12px;
}

.problem-text p {
  color: var(--color-ink-soft);
}


/* ---- Four pillars (What is FemNEST) ----
   Fixed 2x2 grid — always even, regardless of viewport width. Front
   face is a brand-color squiggle ribbon, no photography; back face
   reveals the description, alternating blue/orange like the community
   gallery flip cards. */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 0;
}

@media (min-width: 480px) {
  .pillars-grid {
    gap: 20px;
  }
}

.pillar-card {
  perspective: 1200px;
  width: 100%;
  max-width: 344px;
  justify-self: center;
}

.pillar-card__flip {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0.15, 0.2, 1);
}

.pillar-card:hover .pillar-card__flip,
.pillar-card:focus-within .pillar-card__flip {
  transform: rotateY(180deg);
}

.pillar-card__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

/* Front face: white by default (colored ribbon carries the brand color,
   black icon/text on top) — or "reversed" (a solid brand-color
   background with a white/lavender ribbon and text), pulling the two
   treatments straight from the logo's own color lockups. Set per-card
   via a modifier class in the HTML rather than nth-child, since which
   cards reverse is a content decision, not a repeating pattern. */
.pillar-card__face--front {
  background: var(--color-white);
  color: var(--color-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 28px;
  padding: 48px 20px 0;
  text-align: center;
}

.pillar-card__face--front.pillar-card--reverse-blue {
  background: var(--color-blue);
  color: var(--color-lavender);
}

.pillar-card__face--front.pillar-card--reverse-orange {
  background: var(--color-orange);
  color: var(--color-white);
}

.pillar-card__face--front.pillar-card--reverse-lavender {
  background: var(--color-lavender);
  color: var(--color-blue-deep);
}

.pillar-card__face--front.pillar-card--reverse-green {
  background: var(--color-green);
  color: var(--color-ink);
}

.pillar-card__face--front.pillar-card--reverse-black {
  background: #000000;
  color: var(--color-white);
}

/* Explicit back-face colors, matching each card's own wave/front color
   rather than the blue/orange nth-child alternation below — used where
   a card needs a specific color tied to its identity (see the About
   page's audience cards and the Investment Tools override). */
.pillar-card__face--back.pillar-card--reverse-blue {
  background: var(--color-blue) !important;
}

.pillar-card__face--back.pillar-card--reverse-orange {
  background: var(--color-orange) !important;
}

.pillar-card__face--back.pillar-card--reverse-lavender {
  background: var(--color-lavender) !important;
}

.pillar-card__face--back.pillar-card--reverse-green {
  background: var(--color-green) !important;
}

.pillar-card__face--back.pillar-card--reverse-white {
  background: var(--color-white) !important;
}

.pillar-card__face--back.pillar-card--reverse-cream {
  background: var(--color-cream) !important;
}

.pillar-card__face--back.pillar-card--reverse-lavender p,
.pillar-card__face--back.pillar-card--reverse-green p,
.pillar-card__face--back.pillar-card--reverse-white p,
.pillar-card__face--back.pillar-card--reverse-cream p {
  color: var(--color-ink);
}

/* ---- "What is FemNEST" two-column layout ----
   Intro paragraph sits beside the pillars grid on wider screens instead
   of full-width above it. */
.idea-layout {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 8px;
}

.idea-layout__intro {
  font-size: 1.1rem;
}

.coming-soon-badge-wrap {
  display: block;
  margin-top: 28px;
}

.coming-soon-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-blue-deep);
  background: var(--color-lavender);
  padding: 8px 18px;
  border-radius: 999px;
}

.coming-soon-badge__note {
  max-width: 46ch;
  margin: 10px 0 0;
  color: var(--color-ink-soft);
  font-size: 0.92rem;
}

.coming-soon-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-orange);
  display: inline-block;
}

.pillar-card__icon {
  position: relative;
  width: 130px;
  height: 130px;
  object-fit: contain;
  color: inherit;
}

.pillar-card__face--front h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.7rem;
  color: inherit;
  position: relative;
}

.pillar-card__ribbon {
  position: absolute;
  left: 50%;
  bottom: -2%;
  width: 190%;
  max-width: none;
  transform: translateX(-50%);
  pointer-events: none;
}

.pillar-card__face--back {
  transform: rotateY(180deg);
  background: var(--color-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
}

.pillar-card:nth-child(even) .pillar-card__face--back {
  background: var(--color-orange);
}

.pillar-card__face--back p {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--color-cream);
}

.pillar-card--photo .pillar-card__face--front img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* ---- Two-door funnel (Woman / Investor) ----
   The employer door is hidden for now (Serena's request), not deleted —
   employer.html still exists, just unlinked from here. Flip cards show
   "what you get" on the back, but the CTA button lives OUTSIDE the flip
   in the static DOM, always visible and tappable — a hover-only flip
   would make it unreachable on touch devices, which is why the earlier
   version of this section kept CTAs off the back face entirely. This
   keeps the requested flip-card interaction without losing that. */
.funnel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 8px;
}

@media (min-width: 640px) {
  .funnel-grid.funnel-grid--2col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 720px) {
  .funnel-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.funnel-grid.funnel-grid--stack {
  grid-template-columns: 1fr;
}

.funnel-grid--stack .card {
  max-width: none;
  text-align: center;
}

/* Two-door funnel grid (homepage only) — separate from .funnel-grid
   above, which employer.html and investors.html also use for their own
   3-card grids of plain .card / .pillar-card content. Four cards (woman
   / partner / investor / employer), so a clean 2x2 at wider viewports
   rather than a 3-col breakpoint that would orphan a fourth card. */
.two-door-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 760px;
  margin: 8px auto 0;
}

@media (min-width: 640px) {
  .two-door-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.funnel-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  width: 100%;
  max-width: 344px;
  justify-self: center;
}

.funnel-card__flip-wrap {
  perspective: 1200px;
}

.funnel-card__flip {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0.15, 0.2, 1);
}

.funnel-card:hover .funnel-card__flip,
.funnel-card:focus-within .funnel-card__flip {
  transform: rotateY(180deg);
}

.funnel-card__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px 28px;
}

.funnel-card__face--front {
  /* Same treatment as .pillar-card__face--front — bold icon + wave
     ribbon at bottom, matching the "What is FemNEST" flip cards
     (Serena's "make this the same style as the other flip cards"). */
  background: var(--color-white);
  color: var(--color-ink);
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 48px 20px 0;
  gap: 28px;
}

.funnel-card__face--front.pillar-card--reverse-blue {
  background: var(--color-blue);
  color: var(--color-lavender);
}

.funnel-card__soon {
  display: inline-block;
  position: relative;
  z-index: 2;
  align-self: center;
  max-width: 100%;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 6px 14px;
  border-radius: 999px;
}

.funnel-card__face--front.pillar-card--reverse-orange {
  background: var(--color-orange);
  color: var(--color-white);
}

.funnel-card__face--front.pillar-card--reverse-green {
  background: var(--color-green);
  color: var(--color-ink);
}

.funnel-card__face--front.pillar-card--reverse-lavender {
  background: var(--color-lavender);
  color: var(--color-blue-deep);
}

.funnel-card h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.7rem;
  color: inherit;
  position: relative;
}

.funnel-card__face--back {
  transform: rotateY(180deg);
  background: var(--color-cream);
  align-items: flex-start;
  justify-content: center;
  text-align: left;
}

.funnel-card__face--back.pillar-card--reverse-green {
  background: var(--color-green);
}

.funnel-card__face--back h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-orange);
  margin: 0;
}

.funnel-card__face--back ul {
  margin: 0;
  padding-left: 18px;
  color: var(--color-ink-soft);
  font-size: 0.92rem;
  line-height: 1.6;
}

.funnel-card > .btn {
  width: 100%;
}

/* ---- Past-event gallery (events.html) ----
   A plain photo grid — no flip, unlike the homepage community gallery —
   for a simpler supporting page. Six photos so it tiles evenly (3x2 /
   2x3) with no gaps. */
.past-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 36px;
}

@media (max-width: 860px) {
  .past-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

.past-gallery img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  display: block;
  transition: transform 0.3s ease;
}

.past-gallery img:hover {
  transform: translateY(-4px);
}

/* ---- Community photo gallery (real event photos) ----
   The four wave-wrapped event photos in a single row. Each is a 3D
   flip card: hovering turns it to a short FemNEST statement on a
   brand-color back face. */
.community-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 36px;
}

@media (max-width: 860px) {
  .community-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .community-gallery {
    grid-template-columns: 1fr;
  }
}

.community-gallery__item {
  position: relative;
  perspective: 1200px;
}

.community-gallery__flip {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0.15, 0.2, 1);
}

.community-gallery__item:hover .community-gallery__flip {
  transform: rotateY(180deg);
}

.community-gallery__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.community-gallery__face--front img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.community-gallery__face--back {
  transform: rotateY(180deg);
  background: var(--color-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
}

.community-gallery__item:nth-child(even) .community-gallery__face--back {
  background: var(--color-orange);
}

.community-gallery__face--back span {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--color-cream);
}

/* ---- Community voices marquee ----
   Two rows of real, anonymized quotes scrolling in opposite directions
   (pure CSS animation, no JS). Each row is rendered twice back-to-back
   (.voices-track__set, duplicated and aria-hidden) so the loop is
   seamless — translate exactly -50% and it lines back up. Hover a row
   to pause it. See the prefers-reduced-motion block near the bottom of
   this file for the static fallback. */
.voices-marquee {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}

.voices-track {
  display: flex;
  width: max-content;
  animation: voices-scroll-left 78s linear infinite;
}

.voices-track--reverse {
  animation-name: voices-scroll-right;
  animation-duration: 88s;
}

.voices-track:hover {
  animation-play-state: paused;
}

.voices-track__set {
  display: flex;
  gap: 20px;
  padding: 0 10px;
}

.voice-pill {
  flex: 0 0 auto;
  width: min(80vw, 380px);
  margin: 0;
  background: var(--color-white);
  color: var(--color-ink);
  border-radius: var(--radius);
  padding: 22px 26px;
  box-shadow: var(--shadow-soft);
  font-style: italic;
  line-height: 1.55;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.voices-track:hover .voice-pill {
  box-shadow: var(--shadow-soft);
}

.voice-pill:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

@keyframes voices-scroll-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes voices-scroll-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

/* ---- One-line explainer ticker ----
   A few short, plain-English sentences explaining what FemNEST is,
   under the "130+ women" proof line in the hero, scrolling
   continuously. Same seamless-loop technique as the community voices
   marquee above: two duplicated sets (.explainer-ticker__set),
   translate exactly -50%. */
.explainer-ticker {
  position: relative;
  z-index: 1;
  background: var(--color-blue);
  overflow: hidden;
  padding: 20px 0;
  margin: 32px 0 -84px;
}

.explainer-ticker__track {
  display: flex;
  width: max-content;
  animation: voices-scroll-left 58s linear infinite;
}

.explainer-ticker__set {
  display: flex;
  align-items: center;
}

.explainer-ticker__item {
  display: flex;
  align-items: center;
  gap: 28px;
  white-space: nowrap;
  padding-right: 28px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-cream);
}

.explainer-ticker__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-orange);
  flex: none;
}

/* ---- Waitlist / form blocks ---- */
.form-panel {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: 36px;
  max-width: 720px;
  margin: 0 auto;
}

.form-field {
  margin-bottom: 18px;
}

.form-field label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 0.95rem;
}

.form-field input {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  font-family: var(--font-body);
  font-size: 1rem;
  background: var(--color-green);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-field input:focus-visible {
  outline: none;
  border-color: var(--color-blue);
  box-shadow: 0 0 0 4px rgba(41, 93, 246, 0.15);
}

.form-note {
  font-size: 0.9rem;
  color: var(--color-ink-soft);
  margin-top: 14px;
}

.form-success {
  display: none;
  background: var(--color-green);
  border-radius: var(--radius);
  padding: 24px;
  font-family: var(--font-heading);
  font-weight: 600;
}

.form-success.is-visible {
  display: block;
}

.form-panel.is-submitted form {
  display: none;
}

/* External waitlist callout (default: link out to the live tool) */
.external-waitlist {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: 48px;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
}

.external-waitlist::before {
  content: "";
  position: absolute;
  top: -60%;
  right: -30%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: var(--gradient-brand);
  opacity: 0.12;
}

.external-waitlist img,
.external-waitlist .btn {
  margin-left: auto;
  margin-right: auto;
}

/* ---- Event cards (ticket-stub styling) ---- */
.event-card {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 28px;
  display: flex;
  gap: 20px;
  max-width: 640px;
  margin: 0 auto;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}

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

.event-card--featured {
  box-shadow: var(--shadow-lift);
}

.event-card--featured::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  padding: 2px;
  background: var(--gradient-brand);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.ticket-date {
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  border-radius: var(--radius-sm);
  background: var(--gradient-cta);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-glow-orange);
}

.event-card:not(.event-card--featured) .ticket-date {
  background: var(--color-ink-soft);
  box-shadow: none;
}

.ticket-date__month {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ticket-date__day {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1.1;
}

.event-card__body {
  flex: 1;
  min-width: 0;
}

.event-card__badge {
  display: inline-block;
  background: var(--color-orange);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.event-card__badge--past {
  background: var(--color-ink-soft);
}

.event-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
  margin-bottom: 10px;
}

.event-card__meta span::before {
  content: "•";
  margin-right: 8px;
  color: var(--color-orange);
}

.event-card__meta span:first-child::before {
  content: "";
  margin-right: 0;
}

/* ---- Single event page ---- */
.event-hero {
  position: relative;
  padding: 64px 0 48px;
  background: var(--color-lavender);
  background-image: var(--gradient-hero-wash);
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
}

.event-hero .blob--orange { width: 260px; height: 260px; top: -100px; right: -60px; }
.event-hero .blob--blue { width: 200px; height: 200px; bottom: -80px; left: 5%; opacity: 0.35; }

.event-hero .container {
  position: relative;
  z-index: 1;
}

.event-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 860px) {
  .event-detail-grid {
    grid-template-columns: 2fr 1fr;
  }
}

.event-facts {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  position: relative;
}

.event-facts li {
  padding: 12px 0;
  border-bottom: 1px dashed var(--color-border);
  font-family: var(--font-heading);
  font-weight: 600;
}

.event-facts li span {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-ink-soft);
  margin-top: 2px;
}

.tbc {
  color: var(--color-orange);
  font-weight: 700;
}

/* ---- Event page: tagline, meta ---- */
.event-tagline {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-orange-deep);
  margin: 4px 0 18px;
}

.event-meta {
  font-size: 0.95rem;
  color: var(--color-ink-soft);
  margin-bottom: 28px;
}

.event-meta strong {
  color: var(--color-ink);
}

/* ---- Pull quote (event/community testimonial callouts) ---- */
.pull-quote {
  margin: 24px 0;
  padding: 20px 24px;
  border-left: 4px solid var(--color-orange);
  background: var(--color-cream);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--color-ink);
}

/* ---- Data table (event agenda, sponsor tiers, ticket prices) ---- */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  margin-top: 8px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
  background: var(--color-white);
}

.data-table th {
  background: var(--color-blue);
  color: var(--color-white);
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 14px 18px;
}

.data-table td {
  padding: 14px 18px;
  font-size: 0.95rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

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

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

/* ---- Partner logo-links row ---- */
.partner-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.partner-links a {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-blue);
  background: var(--color-white);
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.partner-links a:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}

.back-link {
  display: inline-block;
  margin-bottom: 24px;
  font-family: var(--font-heading);
  font-weight: 600;
  text-decoration: none;
}

.back-link::before {
  content: "← ";
}

/* ---- Footer ---- */
.site-footer {
  position: relative;
  background: var(--color-blue);
  color: var(--color-cream);
  padding: 56px 0 32px;
  overflow: hidden;
}

.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-cta);
}

.site-footer a {
  color: var(--color-cream);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.site-footer a:hover {
  color: var(--color-orange);
  border-color: var(--color-orange);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

@media (min-width: 640px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

.footer-brand {
  margin: 0 0 4px;
}

.footer-brand img {
  height: 26px;
  width: auto;
}

.footer-pilot-note {
  font-size: 0.9rem;
  opacity: 0.85;
  margin-top: 10px;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 8px;
}

.footer-bottom {
  border-top: 1px solid rgba(222, 234, 158, 0.3);
  padding-top: 20px;
  font-size: 0.85rem;
  opacity: 0.75;
}

/* ---- Mobile nav ---- */
@media (max-width: 720px) {
  .nav__toggle {
    display: block;
  }

  .nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-green);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0 24px;
    max-height: 0;
    overflow: hidden;
    border-bottom: 1px solid var(--color-border);
    transition: max-height 0.25s ease;
  }

  .nav__links.is-open {
    max-height: 300px;
    padding: 12px 24px 20px;
  }

  .nav__links li {
    width: 100%;
    padding: 10px 0;
  }

  .site-header.is-open .nav__toggle-bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .site-header.is-open .nav__toggle-bar:nth-child(2) {
    opacity: 0;
  }

  .site-header.is-open .nav__toggle-bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .event-card {
    flex-direction: column;
  }

  .section--tilt {
    clip-path: polygon(0 2%, 100% 0, 100% 98%, 0 100%);
    padding: 88px 0;
  }
}

/* ---- Scroll reveal (see js/main.js) ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .btn:hover,
  .btn:focus-visible,
  .stat-card:hover,
  .event-card:hover,
  .nav__brand:hover {
    transform: none;
  }

  .community-gallery__flip {
    transition: none;
  }

  html {
    scroll-behavior: auto;
  }

  /* Community voices marquee: stop the scroll entirely and lay both
     rows out as a plain wrapped list. Hide the duplicated (aria-hidden)
     copy of each row so quotes don't appear twice. */
  .voices-marquee {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .voices-track {
    animation: none;
    transform: none;
    width: 100%;
    flex-wrap: wrap;
  }

  .voices-track__set {
    flex-wrap: wrap;
  }

  .voices-track__set[aria-hidden="true"] {
    display: none;
  }

  /* Explainer ticker: stop the scroll, show one static line, hide the
     duplicated (aria-hidden) copy. */
  .explainer-ticker__track {
    animation: none;
    transform: none;
    width: 100%;
  }

  .explainer-ticker__set[aria-hidden="true"] {
    display: none;
  }

  .explainer-ticker__item {
    white-space: normal;
    padding-right: 0;
    justify-content: center;
    text-align: center;
    width: 100%;
  }

  .explainer-ticker__dot {
    display: none;
  }
}

/* ---- Cookie consent banner ----
   Injected by initCookieBanner() in js/main.js, not written into each
   HTML file — see README.md "Cookies & analytics". */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 500;
  background: var(--color-ink);
  color: var(--color-white);
  padding: 20px 24px;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.15);
}

.cookie-banner__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cookie-banner__inner p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-cream);
  flex: 1 1 320px;
}

.cookie-banner__inner a {
  color: var(--color-white);
  text-decoration: underline;
}

.cookie-banner__actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.cookie-banner__actions .btn {
  padding: 10px 20px;
  font-size: 0.85rem;
}

/* ---- Legal pages (privacy.html / terms.html) ---- */
.legal-content h2 {
  font-size: 1.3rem;
  margin-top: 2em;
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content h3 {
  font-size: 1.05rem;
  margin-top: 1.5em;
}

.legal-content p,
.legal-content li {
  color: var(--color-ink-soft);
}

.legal-content ul {
  padding-left: 20px;
  margin: 0 0 1em;
}

.legal-content li {
  margin-bottom: 0.5em;
}