/* Static section-depth study. Remove this stylesheet link to compare with the
   original. No transforms, pointer listeners or continuous rendering. */
:root {
  --section-depth-edge: #fffffff0;
  --section-depth-side: #b8ad9e73;
  --section-depth-cast: #473d3033;
  --section-depth-contact: #473d302e;
  --section-depth-face: #fffdf647;
}
html[data-skin="nocturne"] {
  --section-depth-edge: #b4d2ff40;
  --section-depth-side: #071020e0;
  --section-depth-cast: #00030b99;
  --section-depth-contact: #00030b70;
  --section-depth-face: #809cc012;
}
/* Use the existing stacking contexts. The surface follows the sticky compare
   shell without changing its dimensions or the position of any content. */
#taste-stage .taste-stage-shell::before,
#process-radial .pr-shell::before,
#work > .container::before {
  content: "";
  position: absolute;
  inset: -22px 10px -26px;
  z-index: -1;
  pointer-events: none;
  border-radius: 30px;
  border: 1px solid var(--section-depth-edge);
  background: linear-gradient(150deg,var(--section-depth-face),transparent 52%);
  box-shadow:
    inset 0 2px 1px var(--section-depth-edge),
    inset 1px 0 1px var(--section-depth-edge),
    inset 0 -1px 1px var(--section-depth-side),
    0 7px 0 -1px var(--section-depth-side),
    0 12px 14px -7px var(--section-depth-contact),
    0 30px 44px -18px var(--section-depth-cast);
}
/* Existing navy panels get the same shallow edge and contact shadow. */
#packs .outcomes-panel {
  box-shadow:
    inset 0 1px 0 #dbeaff38,
    inset 0 -1px 0 #00091559,
    0 6px 0 -1px #101b31a3,
    0 12px 16px -10px #07132838,
    0 30px 46px -23px #0713284d!important;
}
html[data-skin="nocturne"] #packs .outcomes-panel {
  box-shadow:
    inset 0 1px 0 #b4d2ff3d,
    inset 0 -1px 0 #00050cb3,
    0 6px 0 -1px #020714,
    0 12px 18px -9px #00030b80,
    0 30px 48px -20px #00030b99!important;
}
@media(max-width:860px) {
  #taste-stage .taste-stage-shell::before,
  #process-radial .pr-shell::before,
  #work > .container::before {
    inset:-14px 7px -18px;
    border-radius:22px;
    box-shadow:inset 0 1px var(--section-depth-edge),0 5px 0 -1px var(--section-depth-side),0 9px 12px -8px var(--section-depth-contact),0 22px 30px -16px var(--section-depth-cast);
  }
}
/* Frost only the backing surface; content remains crisp above it. Rain already
   sits below these section layers, so the blur samples it without masking it. */
#taste-stage .taste-stage-shell::before,
#process-radial .pr-shell::before,
#work > .container::before {
  background:linear-gradient(145deg,#ffffff12,#fffdf605 55%,#e8e4dd08);
  backdrop-filter:blur(.3px);
  -webkit-backdrop-filter:blur(.3px);
}
html[data-skin="nocturne"] #taste-stage .taste-stage-shell::before,
html[data-skin="nocturne"] #process-radial .pr-shell::before,
html[data-skin="nocturne"] #work > .container::before {
  background:linear-gradient(145deg,#dce5ef09,#21334a03 55%,#a3b3c405);
}
@media(max-width:860px) {
  #taste-stage .taste-stage-shell::before,
  #process-radial .pr-shell::before,
  #work > .container::before {
    backdrop-filter:blur(.2px);
    -webkit-backdrop-filter:blur(.2px);
  }
}

/* Align panels and the Work mosaic with the outer edges, leaving headers alone. */
#work .work-stage-wrap {width:auto;}
/* These three panels used to break out of the gutter to a fixed 10px from the
   viewport edge (7px under 860px, 9px under 560px), which gave the page two
   different left edges: the nav and every text container on the gutter, and
   the three big cards 22.4px outside it. At 900px wide that read as the cards
   being too wide for the nav rather than as a deliberate bleed -- the nav sat
   at 32.4 and the cards at 10, and the mismatch is what you see first.

   They now sit on the gutter like everything else, so the nav's edge, the
   work grid, the pack rail, the testimonial frame and the footer all share one
   line at every width. Nothing else needed changing: the panels are fluid and
   simply reflow into the narrower box. */
#packs .outcomes-panel,
#work .work-stage-wrap,
#studio-console .sc-frame {
  margin-inline: 0;
}

/* Only Process keeps the full-section backing surface. */
#taste-stage .taste-stage-shell::before,
#work > .container::before {content:none!important;display:none!important;}