/* ─── FOOTER ────────────────────────────────────────────────── */
footer {
  background: var(--bg0); padding: 36px var(--gut);
  border-top: 1px solid var(--card-border);
  display: flex; flex-wrap: wrap; gap: 20px;
  justify-content: space-between; align-items: center;
  position: relative; z-index: 5;
}
.ft-brand { font-family: var(--sans); font-size: 20px; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; }
.ft-brand-a { color: var(--red-lt); }
.ft-brand-p { color: var(--txt0); }
.ft-meta { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; color: var(--txt3); text-transform: uppercase; line-height: 1.7; text-align: right; }
.ft-meta a { color: var(--txt2); border-bottom: 1px dotted var(--txt3); }
.ft-meta a:hover { color: var(--txt0); border-bottom-color: var(--txt0); }

/* ─── CITIES IMAGE ──────────────────────────────────────────── */
.cities-wrap {
  margin-top: 20px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.cities-map {
  width: 80px; height: 80px;
  object-fit: contain; opacity: 0.70;
  filter: drop-shadow(0 0 8px rgba(196,30,58,0.3));
}
.cities-list { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; color: var(--txt2); text-transform: uppercase; line-height: 1.8; }

/* ─── KEYFRAMES ─────────────────────────────────────────────── */
@keyframes stripe-shimmer { 0%,100%{opacity:1} 50%{opacity:0.7} }
@keyframes vignette-breathe { 0%{opacity:0.75} 100%{opacity:1.15} }
@keyframes led-blink { 0%,100%{opacity:1;box-shadow:0 0 8px var(--green-lt)} 50%{opacity:0.4;box-shadow:0 0 2px var(--green)} }
@keyframes cur-blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ─── TRANSITION BASE ───────────────────────────────────────── */
section, footer, #nav, .context-strip, .proof-strip {
  transition: background-color .3s ease;
}

/* ─── REDUCED MOTION ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .stripe, .led, .cursor, .hero::before { animation: none !important; }
  .eyebrow-row, .brand, .hero-explainer, .mirror, .cta-row, .subject-tags,
  .prob-cell, .how-step, .engine, .pcard, .ci { opacity: 1 !important; transform: none !important; }
}

/* ─── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --gut: 20px; }
  section {
    min-height: auto;
    padding: 80px 20px 56px;
  }
  .hero { min-height: 100svh; padding-top: 88px; padding-bottom: 32px; }

  .context-strip, .proof-strip { padding: 44px 20px; }

  /* Hero brand sizing — keep both ALPHA and PREP fitting on one line each */
  .brand { font-size: clamp(68px, 22vw, 110px); line-height: 0.86; }
  .hero-explainer { font-size: 16px; max-width: 28ch; padding-top: 12px; }
  .mirror { font-size: 12px; padding: 12px 14px 12px 16px; max-width: 100%; }
  .cta-row { gap: 10px; }
  .cta-row .btn { padding: 13px 18px; font-size: 11px; flex: 1 1 auto; min-width: 0; justify-content: center; }
  .subject-tags .stag { padding: 6px 10px; font-size: 10px; }

  /* Section headings scale tighter so they don't overflow */
  .sec-h { font-size: clamp(34px, 9vw, 56px); }
  .prob-headline { font-size: clamp(40px, 11vw, 72px); }
  .cta-h { font-size: clamp(36px, 10vw, 56px); }

  /* Engines mobile: stack flat, no asymmetric staggering */
  .engines-grid > .engine,
  .engines-grid > .engine:nth-child(1),
  .engines-grid > .engine:nth-child(2),
  .engines-grid > .engine:nth-child(3) {
    margin-top: 0; padding: 24px 20px;
  }

  /* Pricing mobile: stack flat, featured no longer raised */
  .pricing-grid .pcard,
  .pricing-grid .pcard:nth-child(1),
  .pricing-grid .pcard:nth-child(3) { margin-top: 0; }
  .pricing-grid .pcard.feat { padding: 28px 22px; box-shadow: none; }

  /* Compare: drop the VS pill */
  .compare { gap: 24px; }
  .cmp-vs { display: none; }

  /* Cities row stacks on mobile */
  .cities-wrap { gap: 14px; }
  .cities-map { width: 64px; height: 64px; }
  .cities-list { font-size: 10px; line-height: 1.7; }

  /* Footer */
  footer { padding: 28px 20px; }
  .ft-meta { text-align: left; }

  /* Form: tighten paddings, ensure 16px font on inputs to suppress iOS auto-zoom */
  .waitlist-form-wrap { padding: 22px 18px; }
  #waitlist-form input,
  #waitlist-form select { font-size: 16px; padding: 12px 14px; }
  .form-btn { padding: 14px 18px; font-size: 11px; }

  /* Nav brand smaller so the actions row doesn't crowd */
  .nav-brand { font-size: 17px; }

  /* Hero F1 — fully visible on mobile, no edge clipping */
  .hero-art {
    top: 6%; right: 0; left: 0;
    width: 100%; height: 44%;
    background-position: center center;
    background-size: contain;
    opacity: 0.75;
    filter: contrast(1.25) saturate(1.5) brightness(1.1);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 40%, rgba(0,0,0,0.55) 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 40%, rgba(0,0,0,0.55) 80%, transparent 100%);
  }
}

@media (max-width: 420px) {
  .brand { font-size: 64px; }
  .nav-brand { font-size: 16px; }
  .btn-nav { display: none; }   /* free up space — hamburger has the same link */
  .nav-actions { gap: 6px; }
  .cta-row .btn { font-size: 10px; padding: 12px 14px; letter-spacing: 0.18em; }
}