/*
  Homepage sections (ordered)
  This file is intentionally organized in the same order as templates/homepage/home.html.
  It overrides legacy rules in home.css without needing to reshuffle that large file.
*/

/* ------------------------------
   Shared: Wavy Cut Divider
--------------------------------*/

:root {
  --neo-bg-size: 100vw 200vh;
  --neo-bg-pos: 0 0;
}

@media (max-width: 1024.02px) {
  :root {
    /* Use stable viewport height on mobile browsers to avoid gradient seams */
    --neo-bg-size: 100vw 220svh;
  }

  body > section .section-cut {
    bottom: -2px;
  }
}



body > section {
  position: relative;
  padding-bottom: 5.5rem;
  overflow: hidden;
}

body > section .section-cut {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 130px;
  pointer-events: none;
  z-index: 10; /* ensure wave sits above the next section */

  background: var(--section-cut-fill, #f8f9fa);
  background-repeat: no-repeat;
  background-size: var(--section-cut-bg-size, auto);
  background-position: var(--section-cut-bg-pos, 0 0);

  filter: drop-shadow(0 -10px 18px rgba(0,0,0,.35));

  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 90' preserveAspectRatio='none'%3E%3Cpath d='M0,35 C180,95 360,5 540,45 S900,105 1200,40 L1200,90 L0,90 Z' fill='white'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 90' preserveAspectRatio='none'%3E%3Cpath d='M0,35 C180,95 360,5 540,45 S900,105 1200,40 L1200,90 L0,90 Z' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: bottom center;
  mask-position: bottom center;



}

/* Disable skew/clip-path patterns across homepage sections */
.skewed,
.unskew {
  transform: none !important;
}

.hero.awe,
.feature-ms.neo,
.feature-wu.neo,
.feature-vl.neo,
.feature-dt.neo,
.pricing.neo,
.cta.neo,
.hosted,
.footer.neo {
  clip-path: none !important;
}

.neo.invert-top {
  clip-path: none;
  margin-top: 0;
}

/* ------------------------------
   Hero → Multi-Sequence (seamless)
--------------------------------*/

/* Make the hero’s cut fill exactly match the Multi-Sequence section */
#hero {
  --section-cut-fill: var(--ms-bg);
  --section-cut-bg-size: var(--neo-bg-size);
  --section-cut-bg-pos: var(--neo-bg-pos);
}



/* ------------------------------
   Multi-Sequence Campaign
--------------------------------*/

:root {
  --ms-bg: linear-gradient(135deg, #0f172a 0%, #111827 35%, #1f2937 100%);
}

.feature-ms.neo {
  background-size: var(--neo-bg-size);
  background-position: var(--neo-bg-pos);
  background-repeat: no-repeat;

  /* Match the next section (Email Warmup) exactly */
  --section-cut-fill: var(
    --wu-bg,
    linear-gradient(135deg, #0f172a 0%, #111827 35%, #1f2937 100%)
  );
  --section-cut-bg-size: var(--neo-bg-size);
  --section-cut-bg-pos: var(--neo-bg-pos);
}

/* ------------------------------
   Email Warmup
--------------------------------*/

.feature-wu.neo {
  background-size: var(--neo-bg-size);
  background-position: var(--neo-bg-pos);
  background-repeat: no-repeat;

  /* Match the next section (Email Warmup) exactly */
  --section-cut-fill: var(
    --wu-bg,
    linear-gradient(135deg, #0f172a 0%, #111827 35%, #1f2937 100%)
  );
  --section-cut-bg-size: var(--neo-bg-size);
  --section-cut-bg-pos: var(--neo-bg-pos);


}

/* ------------------------------
   Validate Leads
--------------------------------*/

.feature-vl.neo {


  /* Match the next section (Email Warmup) exactly */
  --section-cut-fill: var(
    --wu-bg,
    linear-gradient(135deg, #0f172a 0%, #111827 35%, #1f2937 100%)
  );
  --section-cut-bg-size: var(--neo-bg-size);
  --section-cut-bg-pos: var(--neo-bg-pos);


}

/* ------------------------------
   Deliverability Test
--------------------------------*/

.feature-dt.neo {

  /* Match the next section (Email Warmup) exactly */
  --section-cut-fill: var(
    --wu-bg,
    linear-gradient(135deg, #0f172a 0%, #111827 35%, #1f2937 100%)
  );
  --section-cut-bg-size: var(--neo-bg-size);
  --section-cut-bg-pos: var(--neo-bg-pos);


}

/* ------------------------------
   Features Grid
--------------------------------*/

.features.features-gradient {

  /* Match the next section (Email Warmup) exactly */
  --section-cut-fill: var(
    --wu-bg,
    linear-gradient(135deg, #0f172a 0%, #111827 35%, #1f2937 100%)
  );
  --section-cut-bg-size: var(--neo-bg-size);
  --section-cut-bg-pos: var(--neo-bg-pos);


}



.features.neo.invert-top {

  /* Match the next section (Email Warmup) exactly */
  --section-cut-fill: var(
    --wu-bg,
    linear-gradient(135deg, #0f172a 0%, #111827 35%, #1f2937 100%)
  );
  --section-cut-bg-size: var(--neo-bg-size);
  --section-cut-bg-pos: var(--neo-bg-pos);


}

/* ------------------------------
   CTA
--------------------------------*/

.cta.neo {
  /* Match the next section (Email Warmup) exactly */
  --section-cut-fill: var(
    --wu-bg,
    linear-gradient(135deg, #0f172a 0%, #111827 35%, #1f2937 100%)
  );
  --section-cut-bg-size: var(--neo-bg-size);
  --section-cut-bg-pos: var(--neo-bg-pos);


}

/* ------------------------------
   Hosted Inboxes
--------------------------------*/

.hosted {
  --section-cut-fill: #ffffff;
}

/* ------------------------------
   Ratings
--------------------------------*/

.ratings {
  /* Ratings → Pricing */
  background-size: var(--neo-bg-size);
  background-position: var(--neo-bg-pos);
  background-repeat: no-repeat;

  --section-cut-fill: var(
    --p-bg,
    linear-gradient(135deg, #0f172a 0%, #111827 35%, #1f2937 100%)
  );
  --section-cut-bg-size: var(--neo-bg-size);
  --section-cut-bg-pos: var(--neo-bg-pos);
}

/* ------------------------------
   Pricing
--------------------------------*/

.pricing.neo {
  /* Pricing → Testimonials */
  background-size: var(--neo-bg-size);
  background-position: var(--neo-bg-pos);
  background-repeat: no-repeat;

  --section-cut-fill: var(
    --t-bg,
    linear-gradient(135deg, #0f172a 0%, #111827 35%, #1f2937 100%)
  );
  --section-cut-bg-size: var(--neo-bg-size);
  --section-cut-bg-pos: var(--neo-bg-pos);
}

/* ------------------------------
   Testimonials
--------------------------------*/

.testimonials.neo {
  /* Testimonials → FAQ */
  background-size: var(--neo-bg-size);
  background-position: var(--neo-bg-pos);
  background-repeat: no-repeat;

  --section-cut-fill: var(
    --faq-bg,
    linear-gradient(135deg, #0f172a 0%, #111827 35%, #1f2937 100%)
  );
  --section-cut-bg-size: var(--neo-bg-size);
  --section-cut-bg-pos: var(--neo-bg-pos);
}

/* ------------------------------
   FAQ
--------------------------------*/

.faq-section {
  /* FAQ → Footer */
  background-size: var(--neo-bg-size);
  background-position: var(--neo-bg-pos);
  background-repeat: no-repeat;

  --section-cut-fill: var(
    --ft-bg,
    linear-gradient(135deg, #0f172a 0%, #111827 35%, #1f2937 100%)
  );
  --section-cut-bg-size: var(--neo-bg-size);
  --section-cut-bg-pos: var(--neo-bg-pos);
}

/* Footer: match FAQ divider's gradient alignment */
.footer.neo {
  background-size: var(--neo-bg-size);
  background-position: var(--neo-bg-pos);
  background-repeat: no-repeat;
}