/* ==========================================================================
   FLRYFY — Responsive overrides
   Base styles in style.css are mobile-first fluid (clamp); this file
   handles structural changes at specific breakpoints only.
   ========================================================================== */

/* Safe-area padding for notched devices */
.site-header {
  padding-top: max(var(--space-2), env(safe-area-inset-top));
}
.site-footer {
  padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
}

/* ---- Tablet and below ---- */
@media (max-width: 768px) {
  .site-header {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }

  .brand-name { display: none; } /* icon mark alone reads cleanly at this width */

  .social-row { gap: var(--space-1); }
  .social-row .icon { width: 16px; height: 16px; }

  .hero { padding-left: var(--space-2); padding-right: var(--space-2); }

  .pillars { gap: var(--space-1); font-size: 0.62rem; }
  .pillars li:not(:last-child)::after { margin-left: var(--space-1); }
}

/* ---- Small phones ---- */
@media (max-width: 420px) {
  .hero-tagline { letter-spacing: 0.22em; }

  .field-row {
    flex-direction: column;
  }
  #email { text-align: center; }
  .field-row .btn-primary { width: 100%; }

  .waitlist-card { padding: var(--space-3) var(--space-2); }

  .legal-row {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-1) var(--space-2);
  }
}

/* ---- Short viewports (landscape phones) ---- */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { min-height: 100vh; padding-top: var(--space-4); padding-bottom: var(--space-4); }
  .hero-mark { width: 48px; margin-bottom: var(--space-2); }
  .hero-divider { margin: var(--space-2) 0 var(--space-1); }
  .hero-tagline { margin-bottom: var(--space-2); }
  .pillars { margin-bottom: var(--space-2); }
  .scroll-cue { display: none; }
}

/* ---- Large desktop: cap line lengths, ease off the fluid scale ---- */
@media (min-width: 1440px) {
  .hero-inner { max-width: 720px; }
}

/* ---- Fine pointer only: keep hover affordances off touch devices ---- */
@media (hover: none) {
  .btn-primary:hover { transform: none; box-shadow: none; }
}