/* Precursor Signal — mesh gradient backdrop for the FAQ section
   The shader component this is modelled on is a React/npm package, so the
   effect is implemented natively: a low-resolution canvas of drifting soft
   blobs, upscaled and blurred. Palette is Bone / Signal Green / Sunken with a
   faint Navy cool-point — no cyan, orange or black from the original. */

#faq, #method { position: relative; isolation: isolate; }
#faq > *:not(.mesh-bg):not(.mesh-grid),
#method > *:not(.mesh-bg):not(.mesh-grid) { position: relative; z-index: 1; }

.mesh-bg {
  position: absolute;
  /* The canvas stays inside its section (bleeding past it widens the document
     and clipping it cuts hard edges). Instead the mask below fades the wash to
     fully transparent well before the boundary, so there is no edge to see. */
  inset: 0;
  z-index: 0 !important;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  filter: blur(44px) saturate(1.04);
  opacity: 0.62;
  /* long, gradual falloff on every side — no perceptible boundary */
  -webkit-mask-image: radial-gradient(62% 56% at 50% 50%, #000 0%, rgba(0,0,0,0.72) 30%, rgba(0,0,0,0.30) 54%, transparent 76%);
  mask-image: radial-gradient(62% 56% at 50% 50%, #000 0%, rgba(0,0,0,0.72) 30%, rgba(0,0,0,0.30) 54%, transparent 76%);
}

/* a hairline instrument grid sits on top of the mesh, keeping the
   "measured instrument" character the design system asks for */
.mesh-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: 0.22;
  -webkit-mask-image: radial-gradient(70% 62% at 50% 50%, #000 0%, rgba(0,0,0,0.5) 45%, transparent 78%);
  mask-image: radial-gradient(70% 62% at 50% 50%, #000 0%, rgba(0,0,0,0.5) 45%, transparent 78%);
}

/* rows stay transparent so the mesh flows behind them unbroken */
#faq .faq-list details { background: transparent; }
/* method's layer cards are styled by hero-grammar.css, which restates the
   hero's bone-glass panel — nothing to override here. */

@media (prefers-reduced-motion: reduce) { .mesh-bg { opacity: 0.6; } }