/* One continuous page canvas, never a rectangle attached to a content section.
   Fixed-size radial geometry scrolls with the document; no images, masks or JS. */
body[data-mode="demo"] {
  --canvas-radius-x: 760px;
  --canvas-radius-y: 580px;
  --canvas-left: -220px;
  --canvas-right: calc(100% + 220px);
  --canvas-veil: linear-gradient(
    90deg,
    transparent,
    #f3f5f738 9%,
    #f3f5f7a6 24%,
    #f3f5f7d4 50%,
    #f3f5f7a6 76%,
    #f3f5f738 91%,
    transparent
  );
  background-color: #f3f5f7;
  background-image:
    var(--canvas-veil),
    radial-gradient(
      ellipse var(--canvas-radius-x) var(--canvas-radius-y) at
        var(--canvas-left) 35%,
      transparent 0 44%,
      #ff359a73 44.2% 50%,
      transparent 50.2% 59%,
      #586cff59 59.2% 63%,
      transparent 63.2% 74%,
      #ef64bb33 74.2% 75%,
      transparent 75.2%
    ),
    radial-gradient(
      ellipse var(--canvas-radius-x) var(--canvas-radius-y) at
        var(--canvas-right) 57%,
      transparent 0 40%,
      #366cff70 40.2% 48%,
      transparent 48.2% 59%,
      #20bdcd66 59.2% 64%,
      transparent 64.2% 77%,
      #4678f52e 77.2% 78%,
      transparent 78.2%
    ),
    radial-gradient(
      ellipse var(--canvas-radius-x) var(--canvas-radius-y) at
        var(--canvas-left) 84%,
      transparent 0 43%,
      #5373ff63 43.2% 51%,
      transparent 51.2% 63%,
      #fb4eaa66 63.2% 67%,
      transparent 67.2% 78%,
      #547cff2e 78.2% 79%,
      transparent 79.2%
    ),
    radial-gradient(ellipse 540px 420px at 0 12%, #386dff47, transparent 75%),
    radial-gradient(
      ellipse 520px 450px at 100% 20%,
      #ec48a342,
      transparent 77%
    ),
    radial-gradient(ellipse 660px 570px at 0 36%, #fb47a74d, transparent 78%),
    radial-gradient(
      ellipse 630px 520px at 100% 47%,
      #754eff4a,
      transparent 78%
    ),
    radial-gradient(
      ellipse 560px 530px at 100% 63%,
      #1bbbbc4a,
      transparent 79%
    ),
    radial-gradient(ellipse 650px 540px at 0 84%, #526bff42, transparent 78%),
    radial-gradient(ellipse 580px 420px at 100% 95%, #f64caa42, transparent 78%);
  background-repeat: no-repeat;
  background-size: auto;
  background-attachment: scroll;
}

/* Keep the card system opaque: the artwork lives behind the entire layout. */
.intent-layout {
  border-color: #dce2f0;
  box-shadow:
    -30px 12px 95px -66px #366bffa6,
    34px 32px 95px -65px #f5368680,
    0 8px 48px -28px #1d334523;
}
.stats-showcase {
  box-shadow:
    22px 24px 65px -51px #27b3d798,
    -20px 23px 65px -50px #436fffb3,
    0 24px 54px -34px #0b1c5660;
}
.work-section {
  box-shadow: 0 28px 80px -65px #8c45edc2;
}
.approach-invite {
  background-color: #1945c5;
  background-image: linear-gradient(115deg, #183fae, #214fd6);
  box-shadow: 0 26px 67px -47px #3665fbb3;
}
.approach-invite .approach-eyebrow,
.approach-invite p:last-child,
.approach-invite-action > span {
  color: #e5edff;
}

/* More contrast for copy exposed directly to the brighter page canvas. */
.approach .approach-intro,
.approach-solutions .approach-eyebrow,
.approach-start .approach-eyebrow,
.faq-heading .approach-eyebrow,
.approach-steps p,
.approach .approach-demo-note,
.faq-heading > p:last-child,
.faq-list p,
.stats .stats-eyebrow,
.stats .stats-intro,
.stats .stats-disclaimer,
.site-footer {
  color: #304059;
}
.approach-step-number {
  color: #1c46c2;
}
@media (max-width: 850px) {
  body[data-mode="demo"] {
    --canvas-radius-x: 620px;
    --canvas-radius-y: 510px;
    --canvas-left: -270px;
    --canvas-right: calc(100% + 270px);
  }
}
@media (max-width: 650px) {
  body[data-mode="demo"] {
    --canvas-radius-x: 480px;
    --canvas-radius-y: 460px;
    --canvas-left: -260px;
    --canvas-right: calc(100% + 260px);
    --canvas-veil: linear-gradient(
      90deg,
      #f3f5f766,
      #f3f5f7b8 20%,
      #f3f5f7dc 50%,
      #f3f5f7b8 80%,
      #f3f5f766
    );
  }
}
/* Static in every motion preference; simplify the canvas for higher contrast. */
@media (prefers-contrast: more), (forced-colors: active) {
  body[data-mode="demo"] {
    background-image: none;
  }
  .intent-layout,
  .stats-showcase,
  .work-section,
  .approach-invite {
    box-shadow: none;
  }
}