/* ============================================================
   TellTours - Responsive + accessibility layer (loaded last)
   Fills mobile/tablet gaps and respects reduced-motion.
   ============================================================ */

/* ── Accessibility: reduced motion + reveal safety ───────────
   The .reveal pattern starts at opacity:0 and is revealed by JS.
   Users who prefer reduced motion (or if JS is blocked) must still
   see everything, so force the revealed state and kill animations. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .phone { animation: none !important; }
}

/* Visible keyboard focus across interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.faq-q:focus-visible {
  outline: 2px solid var(--green-light);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── Tablet (≤1100px) ──────────────────────────────────────── */
@media (max-width: 1100px) {
  .modes-grid { grid-template-columns: 1fr 1fr; }
  .mode-card h3 { font-size: 23px; }
}

/* ── Below 900px: tighten section rhythm ───────────────────── */
@media (max-width: 900px) {
  .bleed { padding-block: 88px; }
  .section-head { margin-bottom: 52px; }
  .modes-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
}

/* ── Showcase phones: stop the desktop "fan" from overlapping
      inside the mobile scroll strip, and let them snap-scroll. ── */
@media (max-width: 820px) {
  .showcase-stage {
    perspective: none;
    min-height: 0;
    scroll-snap-type: x mandatory;
  }
  .showcase-stage .ss-phone,
  .showcase-stage .ss-phone:nth-child(1),
  .showcase-stage .ss-phone:nth-child(2),
  .showcase-stage .ss-phone:nth-child(3),
  .showcase-stage .ss-phone:nth-child(4),
  .showcase-stage .ss-phone:nth-child(5) {
    transform: none;
    scroll-snap-align: center;
  }
  .showcase-stage .ss-phone:hover { transform: translateY(-6px) !important; }
}
@media (max-width: 640px) {
  /* Labels can't line up under a scrolling strip - drop them on mobile. */
  .showcase-labels { display: none; }
}

/* ── Below 600px: typography + spacing for phones ──────────── */
@media (max-width: 600px) {
  .bleed { padding-block: 68px; }
  body { font-size: 16px; }
  .section-head > p { font-size: 16px; }
  .feature-row,
  .feature-row.reverse { margin-bottom: 56px; }

  /* Hero - tight, cohesive stack on phones */
  .hero { padding-block: 88px 48px; min-height: auto; }
  .hero-grid { gap: 28px; }
  .hero-eyebrow { margin-bottom: 14px; font-size: 11px; padding: 5px 12px 5px 7px; }
  .hero h1 { font-size: clamp(31px, 8.4vw, 44px); line-height: 1.08; margin-bottom: 0; }
  .hero-sub { font-size: 15.5px; line-height: 1.55; margin-top: 14px; margin-bottom: 22px; max-width: none; }
  /* full-width stacked CTAs (no cramped side-by-side) */
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 10px; width: 100%; margin-bottom: 18px; }
  .hero-ctas .btn { flex: none; width: 100%; justify-content: center; padding: 14px 20px; font-size: 15px; }
  /* one check per line - no dangling bullet wraps */
  .trust-line { flex-direction: column; align-items: flex-start; gap: 9px; font-size: 14px; }
  .phone { width: 266px; height: 550px; }
  .phone-glow { width: 320px; height: 320px; }
}

/* ── Waitlist + store badges on narrow screens ─────────────── */
@media (max-width: 520px) {
  .waitlist { flex-direction: column; }
  .waitlist input[type="email"] { min-width: 0; width: 100%; }
  .waitlist .btn { width: 100%; justify-content: center; }
  .store-badges { gap: 10px; }
  .store-badge { flex: 1; min-width: 0; justify-content: center; }
}

/* very small phones */
@media (max-width: 380px) {
  .hero h1 { font-size: 34px; }
  .phone { width: 240px; height: 496px; }
}