/* Keep section clipping as the fallback until the shared artwork stage is ready. */
.homepage-art-definitions {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.homepage-art-section,
.hero-product {
  isolation: isolate;
}

.homepage-art-section {
  position: relative;
  --art-opacity: .22;
  --art-edge: 12px;
}

.homepage-art-layer {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.homepage-art {
  position: absolute;
  top: var(--art-top, 50%);
  width: var(--art-width, 480px);
  height: auto;
  aspect-ratio: 2 / 3;
  opacity: var(--art-opacity, .22);
  transform: translateY(-50%) rotate(var(--art-rotation, 0deg));
}

.art-left .homepage-art { left: var(--art-edge, 12px); }
.art-right .homepage-art { right: var(--art-edge, 12px); }

.hero {
  --art-top: 520px;
  --art-width: 540px;
  --art-rotation: 8deg;
}

@media (min-width: 1051px) {
  .hero { --art-edge: calc(clamp(220px, 26vw, 500px) - 80px); }
}

.privacy-section { --art-top: 57%; --art-width: 450px; --art-rotation: -8deg; }
.workflow-section { --art-top: 57%; --art-width: 450px; --art-rotation: 6deg; }
.problem-section { --art-top: 62%; --art-width: 475px; --art-rotation: -7deg; }
.hardware-section { --art-top: 52%; --art-width: 440px; --art-rotation: 8deg; }
.pricing-section { --art-top: 32%; --art-width: 510px; --art-rotation: -6deg; }
.faq-section { --art-top: 37%; --art-width: 470px; --art-rotation: 8deg; }
.closing-cta { --art-top: 58%; --art-width: 490px; --art-rotation: -8deg; }

.workflow-section,
.closing-cta {
  --art-opacity: .12;
}

#main.art-bleed-active {
  position: relative;
  isolation: isolate;
}

#main.art-bleed-active .homepage-art-section {
  isolation: auto;
}

#main.art-bleed-active .art-bleed-stage {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

#main.art-bleed-active .art-bleed-canvas {
  position: absolute;
  inset: 0;
  transform: translate3d(0, var(--art-canvas-shift, 0px), 0);
}

#main.art-bleed-active .art-bleed-source {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

#main.art-bleed-active .homepage-art-layer {
  z-index: auto;
  overflow: visible;
}

#main.art-bleed-active > .homepage-art-section > :not(.hero-scroll-cue, .closing-lines) {
  z-index: 2;
}

#main.art-bleed-active > .homepage-art-section > :not(.hero-scroll-cue, .closing-lines, .faq-heading) {
  position: relative;
}

#main.art-bleed-active .closing-lines {
  z-index: 0;
}

@media (max-width: 1050px) {
  .homepage-art-section { --art-width: 340px; }
  .hero { --art-top: 420px; --art-width: 380px; }
  .pricing-section { --art-top: 25%; }
}

@media (max-width: 600px) {
  .homepage-art-section { --art-width: 255px; --art-opacity: .16; }
  .homepage-art { max-width: calc(100vw - 48px); }
  .hero { --art-top: 320px; --art-width: 270px; }
  .workflow-section,
  .closing-cta { --art-opacity: .10; }
}