/* Homepage layout corrections.
 *
 * Small, scoped fixes to the Webflow layout that are easier to read and revert
 * here than inside the generated stylesheet.
 *
 * Own file, never an inline <style> block. */

/* ---------- iOS status bar colour ---------- */

/* iOS 26 Safari dropped support for the theme-color meta tag. It now takes the
   status bar and toolbar colour from the BODY's background colour (or from a
   position:fixed element). Our body was #FCFFFC, so Safari correctly read this
   as a light page and painted white bars with dark text, ignoring the dark
   theme-color entirely. Sites that get this right, Resend included, simply have
   a genuinely dark body.
   So: the body goes dark, and the five sections that were relying on the body
   showing through are repainted with the exact same near-white they inherited,
   so nothing on screen changes. */
/* The <body> carries class="body", and Webflow's .body rule sets #FCFFFC.
   A bare `body` selector loses to that class, so match both. */
body.body {
  background-color: #100F0D;
}

.section.how-it-works,
.section.how-it-works.bfy-after,
.global-padding,
.section.faq,
.section.lottie {
  background-color: #FCFFFC;
}

@media screen and (max-width: 767px) {

  /* The decorative floating-cloud band between Pricing and the FAQ is 74vh
     tall on a phone (~625px) with a -554px bottom margin pulling the next
     section back up. The clouds themselves sit off to the sides, so on a
     narrow screen it reads as a large empty gap rather than as decoration.
     Its sibling .section-6.clouds.three is already hidden the same way. */
  .section-6.clouds {
    display: none;
  }
}
