/* Fixes on top of Figma's build (pull.mjs links this after Figma's CSS). Figma's Tailwind lives in
   cascade layers, so these unlayered rules win without !important, except against inline styles. */

/* The survey slides in from the side; don't let that widen the page for a moment. `clip`, not
   `hidden`, so the sticky header keeps working. */
body {
  overflow-x: clip;
}

/* Hold the mascot's space before it loads, so the hero doesn't jump when it arrives. */
img[alt="Skipr mascot"] {
  aspect-ratio: auto 580 / 192;
}

/* The logo has an opaque off-white background, which showed as a box on the grey thanks screen. */
img[alt="Skipr"] {
  mix-blend-mode: multiply;
}

/* The buttons already shrink when pressed; skip the grey flash phones add on top. */
button {
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 639px) {
  /* Buttons may wrap: the hero CTA's one-line label is wider than a phone and pushed the whole
     hero off the right edge. Taller minimum for thumbs (the Back button was 32px). */
  main button.whitespace-nowrap {
    white-space: normal;
    height: auto;
    min-height: 2.75rem;
    padding-block: 0.625rem;
  }

  /* iOS Safari zooms into any field under 16px when it's tapped, and stays zoomed. */
  input,
  textarea {
    font-size: 16px;
  }
  input {
    min-height: 2.75rem;
  }

  /* The hero's 128px top and bottom padding pushed the CTA below the fold on small phones. */
  section.py-32 {
    padding-block: 4rem;
  }
}