/* How It Works — YomuFlow Brand V2 environment only. */
.public-page:has(.how-page) {
  background:#E7F7EC !important;
  overflow:hidden;
}

/* Deep Ocean hero */
.public-page:has(.how-page) .public-hero {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  width:100vw;
  max-width:none !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  box-sizing:border-box;
  padding-left:max(24px,calc((100vw - 1040px)/2));
  padding-right:max(24px,calc((100vw - 1040px)/2));
  padding-bottom:clamp(78px,8vw,116px);
  background:#0A6EA8 !important;
  color:#F8FDFD;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 38C170 10 332 58 510 34C688 8 858 58 1045 32C1210 10 1334 52 1440 30V90H0Z' fill='%23E7F7EC'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:100% 64px;
}
.public-page:has(.how-page) .public-hero::before {
  content:"";
  position:absolute;
  z-index:-2;
  width:72%;
  height:150%;
  left:-20%;
  top:-42%;
  border-radius:55% 45% 60% 40% / 45% 55% 40% 60%;
  background:#087DBB;
  opacity:.48;
  transform:rotate(-8deg);
  pointer-events:none;
}
.public-page:has(.how-page) .public-hero::after {
  content:"";
  position:absolute;
  z-index:-2;
  width:65%;
  height:130%;
  right:-26%;
  bottom:-42%;
  border-radius:60% 40% 45% 55% / 45% 55% 45% 55%;
  background:#2DA0F9;
  opacity:.38;
  transform:rotate(9deg);
  pointer-events:none;
}
.public-page:has(.how-page) .public-hero > * { position:relative;z-index:1; }
.public-page:has(.how-page) .public-hero .eyebrow,
.public-page:has(.how-page) .public-hero h1 { color:#F8FDFD !important; }
.public-page:has(.how-page) .public-hero p { color:rgba(248,253,253,.90) !important; }

/* Sea Glass workflow area */
.public-page:has(.how-page) .how-page {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  width:100vw;
  max-width:none !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  box-sizing:border-box;
  padding-left:max(24px,calc((100vw - 1040px)/2));
  padding-right:max(24px,calc((100vw - 1040px)/2));
  background:#E7F7EC !important;
}
.public-page:has(.how-page) .how-page::before {
  content:"";
  position:absolute;
  z-index:0;
  width:65%;
  height:118%;
  left:-28%;
  top:-22%;
  border-radius:55% 45% 60% 40% / 45% 55% 40% 60%;
  background:#72D6EE;
  opacity:.10;
  transform:rotate(-8deg);
  pointer-events:none;
}
.public-page:has(.how-page) .how-page::after {
  content:"";
  position:absolute;
  z-index:0;
  width:60%;
  height:110%;
  right:-25%;
  bottom:-28%;
  border-radius:45% 55% 40% 60% / 60% 40% 55% 45%;
  background:#A1CFFF;
  opacity:.12;
  transform:rotate(8deg);
  pointer-events:none;
}
.public-page:has(.how-page) .how-page > * { position:relative;z-index:1; }
.public-page:has(.how-page) .public-step {
  background:#F8FDFD !important;
  color:#12384E;
  box-shadow:6px 7px 0 rgba(161,207,255,.34);
}
.public-page:has(.how-page) .public-step h2 { color:#12384E !important; }
.public-page:has(.how-page) .public-step p { color:#557488 !important; }
.public-page:has(.how-page) .public-step > span { color:#2DA0F9 !important; }

/* Finish with a Deep Ocean callout for the V2 rhythm. */
.public-page:has(.how-page) .public-callout {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  margin-top:56px;
  background:#0A6EA8 !important;
  color:#F8FDFD;
  border-color:transparent !important;
}
.public-page:has(.how-page) .public-callout::before {
  content:"";
  position:absolute;
  z-index:-1;
  width:72%;height:160%;left:-24%;top:-48%;
  border-radius:55% 45% 60% 40% / 45% 55% 40% 60%;
  background:#087DBB;opacity:.45;transform:rotate(-8deg);
}
.public-page:has(.how-page) .public-callout::after {
  content:"";
  position:absolute;
  z-index:-1;
  width:62%;height:140%;right:-24%;bottom:-56%;
  border-radius:60% 40% 45% 55% / 45% 55% 45% 55%;
  background:#2DA0F9;opacity:.35;transform:rotate(8deg);
}
.public-page:has(.how-page) .public-callout .eyebrow,
.public-page:has(.how-page) .public-callout h2 { color:#F8FDFD !important; }
.public-page:has(.how-page) .public-callout p { color:rgba(248,253,253,.90) !important; }
.public-page:has(.how-page) .public-callout a { color:#F8FDFD !important; }

@media(max-width:760px){
  .public-page:has(.how-page) .public-hero,
  .public-page:has(.how-page) .how-page {
    padding-left:18px;
    padding-right:18px;
  }
}