/* ============================================================
   STUDIOLICHT — a soft key light behind every content section.
   js/studiolicht.js adds one .sl layer to each section and moves
   --mx / --my with the pointer (slow drift on touch screens).
   Loaded after each page's own styles, so it also covers the
   pages with inline CSS.
   ============================================================ */
html body { background: #ECEDE9; }

.sl-host { isolation: isolate; }
.sl {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  --mx: 50%;
  --my: 35%;
}
/* film grain over the light, so the colour never looks flat */
.sl::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* dark sections: white softbox at the pointer, Hegart blue spill beside it, a trace of green from below */
.sl-dark {
  background:
    radial-gradient(34rem 26rem at var(--mx) var(--my), rgba(255, 255, 255, .10), transparent 70%),
    radial-gradient(60rem 44rem at calc(var(--mx) + 12%) calc(var(--my) + 18%), rgba(5, 137, 194, .22), transparent 72%),
    radial-gradient(80rem 50rem at 50% 120%, rgba(5, 225, 159, .07), transparent 70%);
}
.sl-dark::after { opacity: .07; mix-blend-mode: overlay; }

/* light sections: photo paper with the light falling on it — replaces the flat cream */
.sl-light {
  background:
    radial-gradient(48rem 32rem at var(--mx) var(--my), rgba(255, 255, 255, .95), transparent 65%),
    linear-gradient(180deg, #EFF0EC 0%, #E4E6E1 100%);
}
.sl-light::after { opacity: .12; mix-blend-mode: multiply; }

/* cards on paper: let the light show through a little */
.sl-host .price-card:not(.is-highlighted) { background: rgba(255, 255, 255, .55); }
.sl-host .price-card.is-highlighted { background: rgba(255, 255, 255, .8); }