/* ThreadSync — homepage card accents + depth
   External + fingerprinted by necessity (CSP style-src 'self'; inline <style>
   is silently dropped on this site).

   Each accent is a METAPHOR for what its card actually claims, not decoration:
     1 Pass AI security review faster  -> the control path (route through checkpoints)
     2 Answer audits with records      -> the ledger (sealed records, tick-marks)
     3 Make AI use defensible          -> the countersigned record (a seal pressed)
     4 Reduce shadow-AI exposure       -> the sanctioned door (one lit, one closed)
     5 Speed procurement review        -> the prepared dossier (assembled in advance)
     6 Control model spend             -> the meter (flow being counted)
     LLM Gateway                       -> the governed gateway (many lines, one gate)
     Magic Runtime                     -> the receipt (fast gesture, precise record)
   All eight now carry one, at the owner's direction. The corner composition and
   the copy scrim are what keep density from becoming wallpaper — every accent is
   held above the heading row and never reaches the body text. */

.sov-card{
  position:relative;
  background-repeat:no-repeat !important;
  background-position:right -2% top -4% !important;
  background-size:auto 54% !important;
  /* depth: a lit top edge and a real cast shadow, so cards sit ON the page
     rather than being outlined rectangles printed onto it */
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,
             0 22px 44px -28px rgba(0,0,0,.85);
  transition:transform .18s ease, box-shadow .18s ease;
}
.sov-card:hover{
  transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset,
             0 28px 56px -26px rgba(0,0,0,.9);
}

.sov-cards .sov-card:nth-child(1){ background-image:url("/assets/img/card-control-path.fa2e7cc52d77.webp") !important }
.sov-cards .sov-card:nth-child(2){ background-image:url("/assets/img/card-ledger.9edaa42b8ee1.webp") !important }
.sov-cards .sov-card:nth-child(3){ background-image:url("/assets/img/card-seal.7c5ba414432c.webp") !important }
.sov-cards .sov-card:nth-child(4){ background-image:url("/assets/img/card-sanctioned-door.720316056cf8.webp") !important }
.sov-cards .sov-card:nth-child(5){ background-image:url("/assets/img/card-dossier.41fd6552516a.webp") !important }
.sov-cards .sov-card:nth-child(6){ background-image:url("/assets/img/card-meter.730aae05e954.webp") !important }

/* the two product cards carry the product's own metaphor */
.sov-prod .sov-card:nth-child(1){ background-image:url("/assets/img/card-gateway.9c5703214504.webp") !important }
.sov-prod .sov-card:nth-child(2){ background-image:url("/assets/img/card-receipt.65dd760d3d7c.webp") !important }

/* The accent must never win over the words. Card copy gets a solid ground
   under it while the accent breathes in the corner above. */
.sov-card h3, .sov-card p{ position:relative; z-index:1 }
.sov-card::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background:
    linear-gradient(200deg,
      rgba(15,20,27,0) 0%,
      rgba(15,20,27,.10) 22%,
      rgba(15,20,27,.80) 52%,
      rgba(15,20,27,.96) 78%),
    linear-gradient(90deg,
      rgba(15,20,27,.94) 0%,
      rgba(15,20,27,.86) 46%,
      rgba(15,20,27,.30) 78%,
      rgba(15,20,27,0) 100%),
    /* a floor under the copy: everything below the heading row is protected
       regardless of what the accent does above it */
    linear-gradient(180deg,
      rgba(15,20,27,0) 0%,
      rgba(15,20,27,0) 26%,
      rgba(15,20,27,.90) 46%,
      rgba(15,20,27,.96) 100%);
  pointer-events:none;
}

@media (max-width:640px){
  .sov-card{background-size:auto 46% !important}
}
@media (prefers-reduced-motion:reduce){
  .sov-card,.sov-card:hover{transition:none;transform:none}
}
@media (prefers-contrast:more){
  .sov-card{background-image:none !important}
  .sov-card::before{background:none}
}