.site-grid-canvas,
.site-grid-edge {
  display: none;
}

@media screen {
  /* Shared page background. The pattern stays behind content and opaque panels. */
  :root {
    --site-grid-line: rgb(255 255 255 / 0.025);
    --site-grid-size: 4rem;
  }

  :is(body, .home-intro, .home-fo, .home-learning, .home-help, .home-proof,
    .home-story, .home-close, .learn-hero, .learn-resources, .learn-course,
    .learn-close, .project-fit, .workflow-readiness, .proof-page,
    .newsletter-page, .privacy-page, .cohort-page, .cohort-outcomes,
    .project-proof, .studio-testimonial, .proof-boundary, .client-tool,
    .lead-path-terms, .site-conversion, .studio-footer,
    #main-content > section[aria-labelledby="finish-loop-title"],
    #main-content > section[aria-labelledby="support-heading"],
    #main-content > section[aria-labelledby="loop-heading"],
    #main-content > section[aria-labelledby="planner-heading"],
    #main-content > section[aria-labelledby="coaching-heading"],
    #main-content > section[aria-labelledby="thanks-heading"],
    #main-content > #buy) {
    position: relative;
    isolation: isolate;
  }

  :is(body, .home-intro, .home-fo, .home-learning, .home-help, .home-proof,
    .home-story, .home-close, .learn-hero, .learn-resources, .learn-course,
    .learn-close, .project-fit, .workflow-readiness, .proof-page,
    .newsletter-page, .privacy-page, .cohort-page, .cohort-outcomes,
    .project-proof, .studio-testimonial, .proof-boundary, .client-tool,
    .lead-path-terms, .site-conversion, .studio-footer,
    #main-content > section[aria-labelledby="finish-loop-title"],
    #main-content > section[aria-labelledby="support-heading"],
    #main-content > section[aria-labelledby="loop-heading"],
    #main-content > section[aria-labelledby="planner-heading"],
    #main-content > section[aria-labelledby="coaching-heading"],
    #main-content > section[aria-labelledby="thanks-heading"],
    #main-content > #buy)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
      linear-gradient(var(--site-grid-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--site-grid-line) 1px, transparent 1px);
    background-size: var(--site-grid-size) var(--site-grid-size);
    background-attachment: scroll;
  }

  /* Keep the CSS fallback until the visible canvas has actually drawn. */
  [data-site-grid][data-grid-ready]::before {
    background-image: none !important;
  }

  [data-site-grid] > .site-grid-canvas,
  [data-site-grid] > .site-grid-edge {
    display: block;
    position: absolute;
    left: 0;
    pointer-events: none;
  }

  [data-site-grid] > .site-grid-canvas { z-index: -1; }
  [data-site-grid] > .site-grid-edge { z-index: 1; }

  /* Light existing actions without adding borders or changing their geometry. */
  a[data-grid-active] {
    border-color: rgb(255 96 77 / 0.35);
    box-shadow: inset 0 0 0 1px rgb(255 96 77 / 0.12), 0 0 18px rgb(255 96 77 / 0.06);
  }

  a[data-grid-settled] {
    border-color: rgb(255 96 77 / 0.55);
    box-shadow: inset 0 0 0 1px rgb(255 96 77 / 0.18), 0 0 22px rgb(255 96 77 / 0.08);
  }

  :is(#main-content > section[aria-labelledby="loop-heading"],
    #main-content > section[aria-labelledby="planner-heading"],
    #main-content > section[aria-labelledby="coaching-heading"],
    #main-content > section[aria-labelledby="thanks-heading"],
    #main-content > #buy) {
    --site-grid-line: rgb(5 6 8 / 0.035);
  }
}

/* Foreground surfaces catch the same light without moving their content. */
.site-panel-light { display: none; }

@media screen {
  [data-grid-panel] {
    position: relative;
    isolation: isolate;
  }

  [data-grid-panel] > .site-panel-light {
    display: block;
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
    background: linear-gradient(135deg, rgb(98 126 255 / 0.035), transparent 48%, rgb(255 96 77 / 0.015));
    box-shadow: inset 0 1px 0 rgb(220 228 255 / 0.045);
  }

  .site-panel-light::before,
  .site-panel-light::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    transition: opacity 240ms ease;
  }

  .site-panel-light::before {
    background: radial-gradient(300px circle at var(--panel-x, 72%) var(--panel-y, 18%), rgb(255 96 77 / 0.12), transparent 72%);
    opacity: 0.2;
  }

  .site-panel-light::after {
    padding: 1px;
    background: radial-gradient(220px circle at var(--panel-x, 72%) var(--panel-y, 18%), rgb(255 119 99 / 0.85), transparent 80%), linear-gradient(130deg, rgb(175 190 255 / 0.1), transparent 55%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0.3;
  }

  [data-panel-lit] > .site-panel-light::before,
  [data-panel-lit] > .site-panel-light::after { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .site-panel-light::before,
  .site-panel-light::after { transition: none; }
}