/* Selected direction: white pauses, a light radial wash, one stronger product accent.
   Native section fills keep the existing content, layout and motion independent. */
body.ui-study.landing-v2 {
  --solo-background-light:
    radial-gradient(ellipse 100% 100% at 50% 100%, #ddf8ff 0%, #f1fcfe 57.5%, #fff 92.2%);
  --solo-background-accent:
    radial-gradient(ellipse 75% 115% at 50% 0%, #fff 0%, #ebfbfe 40%, #c2f3ff 100%);
}

/* White pauses separate the product stories and keep text-heavy sections light. */
body.ui-study.landing-v2 main#main :is(#why-free, #stats, #growth-tools.growth-story,
  #conversion, #growth, #price.extension-section, #how, #faq) {
  background: #fff;
}
body.ui-study.landing-v2 main#main #technologies {
  background: var(--solo-background-accent);
}
body.ui-study.landing-v2 main#main #stats { padding-block: 112px; }
body.ui-study.landing-v2 main#main :is(#product, #repeat-orders, #clients, #lead) {
  background: var(--solo-background-light);
}
/* Restore the original cloud artwork, fading into the falling-card scene. */
body.ui-study.landing-v2 main#main #top {
  background: #fff;
}
body.ui-study.landing-v2 main#main #top::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: clamp(660px, 67.625vw, 1082px);
  max-height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: .58;
  background: url("assets/hero-sky.webp") center top / cover no-repeat;
  -webkit-mask-image: linear-gradient(#000 0%, #000 45%, transparent 100%);
  mask-image: linear-gradient(#000 0%, #000 45%, transparent 100%);
}
/* Repeat the hero motif sparingly, with different crops and quieter contrast. */
body.ui-study.landing-v2 main#main :is(#product, #repeat-orders, #lead) {
  position: relative;
  isolation: isolate;
}
body.ui-study.landing-v2 main#main :is(#product, #repeat-orders, #lead)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("assets/hero-rings/background.jpg") center bottom / max(1300px, 100%) auto no-repeat;
  opacity: .38;
  mix-blend-mode: multiply;
  pointer-events: none;
}
/* Edge alignment keeps the image covering the full section at every width. */
body.ui-study.landing-v2 main#main #product::before { background-position: left bottom; }
body.ui-study.landing-v2 main#main #repeat-orders::before {
  background-position: right bottom;
  opacity: .42;
}
body.ui-study.landing-v2 main#main #lead::before { opacity: .34; }
/* These inner canvases share their section's fill, without an inset seam or dot grid. */
body.ui-study.landing-v2 main#main #growth-tools .growth-story-pin,
body.ui-study.landing-v2 main#main #clients .clients-board,
body.ui-study.landing-v2 main#main #how .integration-map {
  background: transparent;
}

/* Keep the platform background separate from the white comparison below it.
   The paint extends into the existing section gaps without moving content. */
body.ui-study.landing-v2 main#main #price .solo-platform-surface {
  --surface-gap: 112px;
  position: relative;
  display: flow-root;
  isolation: isolate;
}
body.ui-study.landing-v2 main#main #price .solo-platform-surface::before {
  content: "";
  position: absolute;
  inset: calc(var(--surface-gap) * -1) 0 calc(var(--surface-gap) * -.5);
  z-index: -1;
  background: var(--solo-background-light);
  pointer-events: none;
}
body.ui-study.landing-v2 main#main #price .platform-card {
  background: #fff;
}

/* Keep the existing footer layout readable against the original dark finish. */
body.ui-study.landing-v2 #footer {
  --gs-ink: #fff;
  --gs-muted: #b6b9bc;
  --footer-line: #bbf3ff29;
  background: #25282b;
  color: #fff;
}
body.ui-study.landing-v2 #footer .official-logo { color: #fff; }
body.ui-study.landing-v2 #footer .official-footer-nav { color: #e7fbff; }
body.ui-study.landing-v2 #footer .official-footer-legal { color: #b6b9bc; }
body.ui-study.landing-v2 #footer .official-social {
  background: #bbf3ff17;
  color: #bbf3ff;
}
body.ui-study.landing-v2 #footer .official-wordmark span {
  background-image: linear-gradient(180deg, #fff 12%, #bbf3ff 52%, #bbf3ff14 100%);
}
body.ui-study.landing-v2 #footer a:focus-visible { outline-color: #bbf3ff; }
@media (hover: hover) {
  body.ui-study.landing-v2 #footer a:hover { color: #bbf3ff; }
  body.ui-study.landing-v2 #footer .official-social:hover { background: #bbf3ff2a; color: #fff; }
}
@media (max-width: 767px) {
  body.ui-study.landing-v2 main#main #stats { padding-block: 56px; }
  body.ui-study.landing-v2 main#main #price .solo-platform-surface { --surface-gap: 72px; }
}
@media (max-width: 699px) {
  body.ui-study.landing-v2 main#main :is(#product, #repeat-orders, #lead)::before {
    background-size: 900px auto;
  }
}