/* ThreadSync — homepage hero refinement
   External + fingerprinted by necessity: the site CSP sets style-src 'self'
   with a single hash, so any page-level inline <style> is silently dropped.

   THE PROBLEM: the hero stacked three near-identical dark greys, each with its
   own border — hero background (#0C0E14 -> #0A0B0F), the .sov-diagram card
   (#0F1419, LIGHTER than the hero), and the .sov-node cards inside it
   (#0C0E14, darker again than their own parent). Three flat panels of barely
   distinguishable grey, nested and outlined, read as choppy blocks rather than
   one composition.

   It also hid the artwork. The diagram card is opaque and sits exactly where
   the ambient subject is composed — every background in the family puts its
   luminous gesture on the RIGHT, which is precisely where this panel was.

   THE FIX: dissolve the middle panel entirely and let the nodes float as glass
   over the artwork. That removes one of the three greys, turns the second into
   translucency, and uncovers the image — one change, both symptoms. */

/* 1 — the group container comes BACK, as glass rather than a slab.
   Dissolving it entirely was an over-correction: the three nodes lost their
   grouping and stopped reading as one governed path. The original problem was
   never that a container existed — it was that the container was an OPAQUE
   third grey (#0F1419) sitting between two other near-identical greys.
   Translucent glass groups the cards and still lets the artwork through, so
   there is no flat slab and no lost grouping. */
.sov-hero .sov-diagram{
  background:rgba(8,11,17,.46) !important;
  border:1px solid rgba(232,234,240,.085) !important;
  border-radius:16px !important;
  padding:24px !important;
  backdrop-filter:blur(14px) saturate(112%);
  -webkit-backdrop-filter:blur(14px) saturate(112%);
  box-shadow:0 1px 0 rgba(255,255,255,.045) inset,
             0 18px 50px -24px rgba(0,0,0,.7) !important;
}

/* 2 — nodes become glass sitting ON the artwork, not opaque cards above it */
.sov-hero .sov-node{
  background:rgba(20,26,36,.50) !important;
  border-color:rgba(232,234,240,.10) !important;
  backdrop-filter:blur(3px) saturate(108%);
  -webkit-backdrop-filter:blur(3px) saturate(108%);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
}
.sov-hero .sov-node.is-island{
  background:linear-gradient(180deg,rgba(16,185,129,.15),rgba(20,26,36,.52)) !important;
  border-color:rgba(52,211,153,.30) !important;
}
.sov-hero .sov-node.is-bridge{ border-color:rgba(52,211,153,.20) !important }
.sov-hero .sov-node.is-provider{ opacity:1; background:rgba(11,14,20,.52) !important }

/* 3 — the artwork can now actually be seen, so let it carry more.
   Under mix-blend-mode:screen a lower wash means MORE of the gesture reads. */
.sov-hero--crossing .sov-hero-ambient{
  --sov-ambient-wash:.06;
  --sov-ambient-pos:62% 46%;
}

/* The split scrim protected a copy column that sat on an opaque slab. With the
   artwork visible the protection still has to hold, but it can be gentler —
   contrast measured 16:1 against a 3:1 requirement, so there is room. */
.sov-hero--split .sov-hero-ambient::after{
  background:linear-gradient(90deg,
    rgba(10,11,15,.96) 0%,
    rgba(10,11,15,.88) 24%,
    rgba(10,11,15,.46) 48%,
    rgba(10,11,15,.10) 74%,
    rgba(10,11,15,0) 100%) !important;
}

@media (max-width:900px){
  /* stacked layout: the nodes span full width, so ease the blur cost */
  .sov-hero .sov-node{backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
  .sov-hero .sov-diagram{padding:16px !important;backdrop-filter:blur(10px)}
}

/* Translucency is a stated preference, not a detail. */
@media (prefers-reduced-transparency:reduce){
  .sov-hero .sov-diagram{background:#0B0E14 !important;backdrop-filter:none !important}
  .sov-hero .sov-node{
    background:#0C0E14 !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
}
@media (prefers-contrast:more){
  .sov-hero .sov-diagram{background:#08090D !important;backdrop-filter:none !important;
                         border-color:rgba(232,234,240,.28) !important}
  .sov-hero .sov-node{
    background:#0A0B0F !important;
    border-color:rgba(232,234,240,.34) !important;
    backdrop-filter:none !important;
  }
}