/* Homepage deep-ocean contrast + edge-to-edge repair.
   Keep the existing layout; this file only corrects colors and full-bleed section surfaces. */

/* The homepage sections should paint all the way to the viewport edges. */
.marketing-page .marketing-hero,
.marketing-page .process-v2,
.marketing-page .pricing-v2,
.marketing-page .final-cta-v2 {
  width: 100vw;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* Deep-ocean typography: bright headings, saturated-blue emphasis, white eyebrow and readable body copy. */
.marketing-page .marketing-hero h1,
.marketing-page .process-v2 h2,
.marketing-page .pricing-v2 > div:first-child h2,
.marketing-page .final-cta-v2 h2 {
  color: #F8FDFD !important;
}
.marketing-page .marketing-hero h1 em,
.marketing-page .marketing-hero h1 strong,
.marketing-page .marketing-hero h1 .accent,
.marketing-page .process-v2 h2 em,
.marketing-page .process-v2 h2 strong,
.marketing-page .process-v2 h2 .accent,
.marketing-page .pricing-v2 > div:first-child h2 em,
.marketing-page .pricing-v2 > div:first-child h2 strong,
.marketing-page .pricing-v2 > div:first-child h2 .accent,
.marketing-page .final-cta-v2 h2 em,
.marketing-page .final-cta-v2 h2 strong,
.marketing-page .final-cta-v2 h2 .accent {
  color: #2DA0F9 !important;
}
.marketing-page .marketing-hero .eyebrow,
.marketing-page .process-v2 .eyebrow,
.marketing-page .pricing-v2 > div:first-child .eyebrow,
.marketing-page .final-cta-v2 .eyebrow {
  color: #F8FDFD !important;
}
.marketing-page .marketing-hero .hero-copy-v2 > p,
.marketing-page .process-v2 > p,
.marketing-page .pricing-v2 > div:first-child > p,
.marketing-page .final-cta-v2 > p {
  color: rgba(248, 253, 253, .90) !important;
}

/* Do not wash out text inside light preview cards. */
.marketing-page .marketing-hero .preview-panel-v2,
.marketing-page .marketing-hero .preview-panel-v2 p,
.marketing-page .marketing-hero .preview-panel-v2 strong,
.marketing-page .marketing-hero .preview-panel-v2 b,
.marketing-page .marketing-hero .preview-panel-v2 span,
.marketing-page .marketing-hero .preview-panel-v2 time,
.marketing-page .marketing-hero .preview-panel-v2 small {
  color: #12384E !important;
}
.marketing-page .marketing-hero .preview-panel-v2 p,
.marketing-page .marketing-hero .preview-panel-v2 span,
.marketing-page .marketing-hero .preview-panel-v2 small {
  color: #557488 !important;
}

/* How-it-works labels and descriptions sit directly on the deep ocean. */
.marketing-page .process-v2 .steps-grid-v2 > article > h3,
.marketing-page .process-v2 .steps-grid-v2 > article > b {
  color: #F8FDFD !important;
}
.marketing-page .process-v2 .steps-grid-v2 > article > p {
  color: rgba(248, 253, 253, .90) !important;
}

/* Pricing cards remain light surfaces even though their section is deep. */
.marketing-page .pricing-v2 .plans-v2 > article,
.marketing-page .pricing-v2 .plans-v2 > article h3 {
  color: #12384E !important;
}
.marketing-page .pricing-v2 .plans-v2 > article p,
.marketing-page .pricing-v2 .plans-v2 > article li {
  color: #557488 !important;
}

/* ==========================================================
   SEA GLASS LIGHT SECTIONS
   Background/environment only. No content or layout redesign.
   ========================================================== */
.marketing-page .marketing-section-v2:not(.process-v2):not(.pricing-v2) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100vw;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  background-color: #E7F7EC !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 84' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V26C1260 50 1110 8 930 29C750 50 590 10 430 31C260 53 125 14 0 36Z' fill='%230A6EA8'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%230A6EA8' opacity='.14'%3E%3Ccircle cx='8' cy='190' r='108' stroke-width='16'/%3E%3Cpath d='M1370 124l12 22 22 12-22 12-12 22-12-22-22-12 22-12z' stroke-width='6'/%3E%3Cpath d='M126 700l8 14 14 8-14 8-8 14-8-14-14-8 14-8z' stroke-width='5'/%3E%3C/g%3E%3Cg fill='%232DA0F9' opacity='.18'%3E%3Ccircle cx='1328' cy='690' r='5'/%3E%3Ccircle cx='1352' cy='690' r='5'/%3E%3Ccircle cx='1376' cy='690' r='5'/%3E%3Ccircle cx='1328' cy='714' r='5'/%3E%3Ccircle cx='1352' cy='714' r='5'/%3E%3Ccircle cx='1376' cy='714' r='5'/%3E%3Ccircle cx='1328' cy='738' r='5'/%3E%3Ccircle cx='1352' cy='738' r='5'/%3E%3Ccircle cx='1376' cy='738' r='5'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: top center, center center;
  background-size: 100% 62px, 100% 100%;
  color: #12384E;
}

/* Large shallow-water forms, cropped at the section edges. */
.marketing-page .marketing-section-v2:not(.process-v2):not(.pricing-v2)::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 65%;
  height: 130%;
  left: -28%;
  top: -30%;
  border-radius: 55% 45% 60% 40% / 45% 55% 40% 60%;
  background: #72D6EE;
  opacity: .10;
  transform: rotate(-8deg);
  pointer-events: none;
}
.marketing-page .marketing-section-v2:not(.process-v2):not(.pricing-v2)::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 60%;
  height: 120%;
  right: -25%;
  bottom: -35%;
  border-radius: 45% 55% 40% 60% / 60% 40% 55% 45%;
  background: #A1CFFF;
  opacity: .12;
  transform: rotate(8deg);
  pointer-events: none;
}

/* Keep all real section content above the shallow-water environment. */
.marketing-page .marketing-section-v2:not(.process-v2):not(.pricing-v2) > * {
  position: relative;
  z-index: 1;
}

/* Light-state typography: Ocean Ink, saturated-blue emphasis, muted supporting copy. */
.marketing-page .marketing-section-v2:not(.process-v2):not(.pricing-v2) h2,
.marketing-page .marketing-section-v2:not(.process-v2):not(.pricing-v2) h3,
.marketing-page .marketing-section-v2:not(.process-v2):not(.pricing-v2) strong,
.marketing-page .marketing-section-v2:not(.process-v2):not(.pricing-v2) b {
  color: #12384E !important;
}
.marketing-page .marketing-section-v2:not(.process-v2):not(.pricing-v2) h2 em,
.marketing-page .marketing-section-v2:not(.process-v2):not(.pricing-v2) h2 .accent,
.marketing-page .marketing-section-v2:not(.process-v2):not(.pricing-v2) h3 em,
.marketing-page .marketing-section-v2:not(.process-v2):not(.pricing-v2) h3 .accent {
  color: #2DA0F9 !important;
}
.marketing-page .marketing-section-v2:not(.process-v2):not(.pricing-v2) p {
  color: #557488;
}
.marketing-page .marketing-section-v2:not(.process-v2):not(.pricing-v2) .eyebrow {
  color: #0A6EA8 !important;
}

/* Cards stay distinct from the Sea Glass field. */
.marketing-page .showcase-v2 .lesson-placeholder-v2,
.marketing-page .use-cases-v2 .use-case-grid-v2 > article {
  background: #F8FDFD !important;
}

@media (max-width: 820px) {
  .marketing-page .marketing-hero,
  .marketing-page .process-v2,
  .marketing-page .pricing-v2,
  .marketing-page .final-cta-v2,
  .marketing-page .marketing-section-v2:not(.process-v2):not(.pricing-v2) {
    width: 100vw;
  }

  .marketing-page .marketing-section-v2:not(.process-v2):not(.pricing-v2)::before {
    width: 92%;
    left: -48%;
  }

  .marketing-page .marketing-section-v2:not(.process-v2):not(.pricing-v2)::after {
    width: 88%;
    right: -48%;
  }
}