/* Fixes on top of the exported Webflow stylesheet. Edit this file, not the .min.css. */

/* ---- Accessible versions of the brand red. #fb3640 is only 3.7:1 on white. ---- */
.green-title.title {
  color: #d6202b;
}
.section-organizer .green-title.title {
  color: #fb3640;
}
.submit-button,
.hero-button,
.button.hero-button {
  background-color: #d6202b;
}

/* ---- Keyboard use ---- */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 10000;
  padding: 10px 16px;
  border-radius: 6px;
  background: #fff;
  color: #111;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  top: 12px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.w-nav-button:focus-visible {
  outline: 3px solid #2563eb !important;
  outline-offset: 2px;
}
.hero-section a:focus-visible,
.section-organizer a:focus-visible,
.footer a:focus-visible,
.w-nav-button:focus-visible {
  outline-color: #fff !important;
}

/* ---- Tags changed for a correct heading outline, kept looking the same ----
   The exported stylesheet styles h1 to h4 by tag, so these repeat the old tag's rules.
   Each selector stays below class specificity so the existing class rules still win. */
div.logo.white {
  line-height: 36px;
  text-align: center;
  text-transform: uppercase;
}
/* Were h4 */
main h3 {
  display: block;
  margin-top: 0;
  margin-bottom: 10px;
  margin-left: 0;
  float: none;
  color: #4a4a4a;
  font-family: Raleway, sans-serif;
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
}
/* Were h2 */
h3.plan-heading,
.plan-heading-price {
  margin-top: 20px;
  color: #4a4a4a;
  font-size: 30px;
  line-height: 36px;
  text-align: center;
  text-transform: uppercase;
}
.utility-page-content h1 {
  margin-top: 20px;
  margin-bottom: 30px;
  color: #4a4a4a;
  font-family: Raleway, sans-serif;
  font-size: 30px;
  line-height: 36px;
  font-weight: 600;
}

/* ---- Pricing: readable over the photo, with a next step ---- */
.price-block {
  background-color: rgba(255, 255, 255, 0.97);
}
.pricing-sub {
  color: #5f5858;
  font-weight: 400;
  text-align: center;
}
.feature-row {
  font-weight: 400;
}
.button.hero-button.plan-cta {
  display: block;
  margin: 18px 8px 8px;
  padding: 12px 16px;
  text-align: center;
}

/* ---- Form ---- */
/* The Webflow rule turns typed text white on a pale background while hovering. */
.text-field:hover {
  color: #333;
}
.text-field,
.w-select {
  min-height: 44px;
}
.text-field.combo {
  color: #595959;
}
.text-field::placeholder,
.text-area::placeholder {
  color: #666;
  opacity: 1;
}
.turnstile:empty {
  display: none;
}

/* ---- Contact details and footer ---- */
.right-footertext {
  color: #b5b6b8;
}
.right-footertext a {
  margin-left: 10px;
  color: #fff;
}
.utility-page-content img {
  max-width: 160px;
}

/* ---- Privacy policy ---- */
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 60px 20px 80px;
  color: #333;
  font-family: Exo, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
.legal h1 {
  margin: 0 0 8px;
  text-align: left;
}
.legal h2 {
  margin: 36px 0 10px;
  color: #2d2e2e;
  font-family: Exo, sans-serif;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  text-align: left;
}
.legal p,
.legal li {
  margin: 0 0 12px;
  font-family: Exo, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0;
  text-align: left;
}
.legal ul {
  margin: 0 0 12px;
  padding-left: 22px;
}
.legal a {
  color: #b81a24;
  text-decoration: underline;
}
.legal-updated {
  color: #5f5858;
}

/* ---- Tablet ---- */
@media screen and (max-width: 991px) {
  /* The header is black from here down, and white above. */
  .navbar a:focus-visible {
    outline-color: #fff !important;
  }
  main h3 {
    text-align: center;
  }
  .hero-section h2 {
    line-height: 1.25;
  }
  .section-organizer h3 {
    border: 0;
    background: none;
  }
}

/* ---- Phone ---- */
@media screen and (max-width: 767px) {
  h3.plan-heading,
  .plan-heading-price,
  .utility-page-content h1 {
    font-size: 24px;
  }
  /* 16px stops iOS zooming in when a field is tapped. */
  .text-field,
  .text-area,
  .w-select {
    font-size: 16px;
  }
}
@media screen and (max-width: 479px) {
  /* Lighter photos for phones. hero-bg-mobile.jpg is cropped to the window the
     exported rule showed here (2592px wide at 74% 50%), so the framing is unchanged. */
  .hero-section {
    background-image: linear-gradient(116deg, #2d2e2e, rgba(45, 46, 46, 0.7) 44%, rgba(251, 54, 64, 0.48) 64%, #0f0f0f),
      url("/assets/hero-bg-mobile.jpg");
    background-position: 0 0, 50% 50%;
    background-size: auto, cover;
  }
  .pricing-section {
    background-image: linear-gradient(183deg,rgba(0,0,0,.35),hsla(0,0%,100%,0) 43%),linear-gradient(116deg,#2d2e2e,rgba(45,46,46,.08) 45%,rgba(251,54,64,.64) 70%,#0f0f0f),
      url("/assets/pricing-bg-mobile.jpg");
  }
  /* Stacked, so "Enter your email address" isn't cut off. */
  .flex-form {
    display: block;
  }
  .text-field.name,
  .text-field.mail {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}