@layer base {
  body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-text-size-adjust: 100%;
  }

  /* iOS form input zoom prevention - inputs under 16px cause auto-zoom */
  input, select, textarea {
    font-size: 16px;
  }

  /* Prevent horizontal scroll */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Better tap targets on touch devices */
  button, a, [role="button"] {
    -webkit-tap-highlight-color: rgba(236, 72, 153, 0.2);
    touch-action: manipulation;
  }

  /* Images never overflow their container */
  img {
    max-width: 100%;
    height: auto;
  }
}

/* Hero gradient */
.hero-bg {
  background: linear-gradient(135deg, #ffe4f0 0%, #fff0f5 50%, #ffd6e8 100%);
}

.gradient-pink {
  background: linear-gradient(135deg, #fb7185 0%, #f472b6 50%, #ec4899 100%);
}

.gradient-sweet {
  background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
}

/* Wobble animation */
@keyframes wobble {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.1) rotate(-3deg); }
  50% { transform: scale(0.95) rotate(2deg); }
  75% { transform: scale(1.05) rotate(-1deg); }
}
.wobble:hover {
  animation: wobble 0.6s ease-in-out;
  display: inline-block;
}

/* Floating animation */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}
.float {
  animation: float 3s ease-in-out infinite;
}

/* Card hover (disabled on touch devices) */
.squish-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
@media (hover: hover) {
  .squish-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 25px 40px -12px rgba(236, 72, 153, 0.35);
  }
}

/* Pulse for buttons */
@keyframes pulse-pink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.5); }
  50% { box-shadow: 0 0 0 16px rgba(236, 72, 153, 0); }
}
.pulse-btn {
  animation: pulse-pink 2s infinite;
}

/* Sparkle background */
.sparkle-bg {
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255, 192, 203, 0.4) 0%, transparent 30%),
    radial-gradient(circle at 80% 60%, rgba(255, 182, 193, 0.4) 0%, transparent 30%),
    radial-gradient(circle at 50% 90%, rgba(255, 218, 233, 0.4) 0%, transparent 30%),
    linear-gradient(135deg, #fff0f5 0%, #ffe4f0 100%);
}

/* Accordion (FAQ) - bigger tap target on mobile */
details > summary {
  list-style: none;
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
}
details > summary::-webkit-details-marker {
  display: none;
}
details[open] .faq-arrow {
  transform: rotate(180deg);
}
.faq-arrow {
  transition: transform 0.3s ease;
}

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* Account for sticky navbar when jumping to anchors */
section[id] {
  scroll-margin-top: 80px;
}

/* Pink scrollbar */
::-webkit-scrollbar {
  width: 12px;
}
::-webkit-scrollbar-track {
  background: #fff0f5;
}
::-webkit-scrollbar-thumb {
  background: #f9a8d4;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #ec4899;
}

/* Hero title */
.squishy-title {
  text-shadow: 3px 3px 0 rgba(255, 255, 255, 0.6);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Safety badge */
.safety-badge {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 3px dashed #f59e0b;
}

/* ─────────────────────────────────────────────────────────────
   MOBILE (< 640px)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .squishy-title {
    line-height: 1.1;
    text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.6);
  }

  .pulse-btn {
    animation: none; /* save battery on phones */
  }

  nav.sticky {
    backdrop-filter: blur(8px);
  }

  .float {
    transform: scale(0.7);
  }

  form {
    width: 100%;
  }

  table {
    font-size: 0.875rem;
  }
}

/* ─────────────────────────────────────────────────────────────
   TABLET (640px–1024px)
   ───────────────────────────────────────────────────────────── */
@media (min-width: 641px) and (max-width: 1024px) {
  .float {
    transform: scale(0.85);
  }
}

/* ─────────────────────────────────────────────────────────────
   ACCESSIBILITY: respect reduce-motion preference
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .float,
  .pulse-btn,
  .wobble:hover {
    animation: none !important;
  }
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  html {
    scroll-behavior: auto;
  }
}

/* Print styles */
@media print {
  nav, footer, .pulse-btn, .float {
    display: none !important;
  }
  body {
    background: white !important;
    color: black !important;
  }
}