/* SAMPLE — banana-leaf texture on the light theme.

   Inert unless the page is loaded with ?leaf=1, 2 or 3. See
   assets/js/leaf-preview.js for how to remove the sample entirely.

   The light theme needs the opposite treatment to the dark one. On black
   the leaves were drawn LIGHTER than the page; here they are drawn darker,
   a warm green-grey a shade or two below white.

   A useful side effect worth noticing while you judge it: the cards are
   white, so the moment the page behind them carries any tint at all, they
   start to read as cards rather than as areas of the same white. At level 1
   that alone may be worth it even if you never notice the leaf. */

.leafpv {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden; contain: strict;
}
.leafpv-l { position: absolute; inset: -16%; will-change: transform; }
.leafpv-l svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* The content has to sit above the bed. Everything here already paints its
   own background; only the stacking needs saying.

   Scoped to a page that actually HAS the bed. Unscoped -- as it shipped --
   this rule applied on every page of the live site and quietly broke two
   things nobody had asked it to touch:

     * it reset the masthead from `position: sticky` to `relative`, so on
       every inner page the bar stopped sticking and scrolled away;
     * it gave .shell the same z-index as .nav, and .shell comes later in
       the document, so the open mobile menu was painted UNDERNEATH the
       page. The menu was there, black, visible in the DOM -- and a tap
       where a link appeared hit the page behind it instead.

   .nav is left out of the list entirely: it already carries z-index 60 of
   its own, which is above the bed and above .shell, and restating its
   position is what took the sticky away. */
body:has(.leafpv) :is(.shell, .foot, .hero, .sec, .sec-tight, .marquee, .cta) {
  position: relative; z-index: 2;
}

/* Three strengths to choose between. The tint is a desaturated leaf green:
   at level 1 it is about a 2% step off white, at level 3 about 6%.
   Even at level 3 the rail's muted type measures 4.6:1 against the
   darkest leaf, so the small print stays above the 4.5 floor. */
.leafpv-1 .leafpv-l0 { color: #f4f6f3; filter: blur(2px); }
.leafpv-1 .leafpv-l1 { color: #eef2ec; filter: blur(6px); opacity: .85; }

.leafpv-2 .leafpv-l0 { color: #eef2ea; filter: blur(2px); }
.leafpv-2 .leafpv-l1 { color: #e6ece2; filter: blur(6px); opacity: .9; }

.leafpv-3 .leafpv-l0 { color: #e7ede2; filter: blur(2px); }
.leafpv-3 .leafpv-l1 { color: #dde6d6; filter: blur(5px); opacity: .95; }

/* A faint wash on the page itself, so the leaves sit in something rather
   than floating on bare white. */
.leafpv-2 ~ * .shell, body:has(.leafpv-2) { background: #fcfdfb; }
body:has(.leafpv-3) { background: #fafcf8; }

.leafpv-tag {
  position: fixed; left: 12px; bottom: 12px; z-index: 90; margin: 0;
  background: #17161a; color: #fff; border-radius: 100px;
  font-family: var(--ui); font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; padding: 9px 15px;
  box-shadow: 0 10px 26px -12px rgba(0,0,0,.6);
}

@media (prefers-reduced-motion: reduce) {
  .leafpv-l { transform: none !important; }
}