/* Responsive helpers — all screen sizes */

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

img,
video {
  max-width: 100%;
  height: auto;
}

/* Prevent horizontal overflow on small phones */
body {
  overflow-x: hidden;
}

/* Fluid type for big headings on tiny screens */
@media (max-width: 480px) {
  h1 {
    font-size: clamp(1.75rem, 8vw, 2.5rem) !important;
    line-height: 1.15 !important;
  }
  h2 {
    font-size: clamp(1.25rem, 6vw, 1.75rem) !important;
  }
  .text-5xl,
  .md\:text-6xl {
    font-size: clamp(1.75rem, 8vw, 2.75rem) !important;
  }
  .text-3xl,
  .text-4xl {
    font-size: clamp(1.15rem, 5.5vw, 1.75rem) !important;
  }
  .text-2xl {
    font-size: clamp(1rem, 4.5vw, 1.35rem) !important;
  }
}

/* Soft padding on nested white cards */
@media (max-width: 640px) {
  .max-w-2xl.mx-auto {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* 3-up feature cards stay readable */
  .grid.grid-cols-3 > * h4 {
    font-size: 0.7rem;
    line-height: 1.2;
  }
}

/* Floating CTAs: keep clear of home indicator / notches */
@supports (padding: max(0px)) {
  .fixed.bottom-6 {
    bottom: max(1.5rem, env(safe-area-inset-bottom));
  }
}

/* Tablet tweak: side floating button shouldn't cover content */
@media (min-width: 768px) {
  button.fixed.bottom-1\/2.right-6 {
    display: none;
  }
}

/* Large screens: constrain reading width feeling while keeping full layout */
@media (min-width: 1536px) {
  .max-w-screen-2xl {
    max-width: 1400px;
  }
}

/* Touch targets */
button,
[onclick],
.js-redirect,
[data-redirect] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.profile-circle {
  transition: opacity 0.3s ease;
}