/* Canonical illustrated-card artwork, reused across home, Controller, AIGovernance.
   Layer geometry and shading follow the original Controller benefits carousel.
   Layout, copy, link/ribbon behavior and carousel controls belong to each page. */
.controller-benefit-art,
.navgrid .module-art,
body > main .card:not(.finance-placeholder)::before {
  content:"";
  position:absolute;
  z-index:-2;
  top:-24%;
  right:-7%;
  width:62%;
  height:151%;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  opacity:.53;
  filter:saturate(.86) contrast(1.06);
  transform-origin:80% 48%;
  transform:perspective(720px) rotateY(-28deg) rotateX(14deg) rotateZ(-7deg) scale(1.32);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.6) 25%,#000 69%,rgba(0,0,0,.65) 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.6) 25%,#000 69%,rgba(0,0,0,.65) 100%);
  pointer-events:none;
}
.controller-benefit-art{background-image:var(--benefit-art)}
.navgrid .module-art{background-image:var(--scene)}
body > main .card:not(.finance-placeholder)::before{background-image:var(--card-art)}

.controller-benefit-card:nth-child(even) .controller-benefit-art,
.module-slide:nth-child(2) .module-card:nth-child(even) .module-art,
.module-slide:nth-child(3) .module-card:nth-child(odd) .module-art,
body > main .card:not(.finance-placeholder):nth-child(even)::before {
  transform:perspective(790px) rotateY(23deg) rotateX(11deg) rotateZ(6deg) scale(1.33);
  right:-10%;
  top:-17%;
}

/* Full-width, independent protective gradient, NOT opacity on the same art
   layer: this is why Controller remains readable with a visible illustration. */
.controller-benefit-card::after,
.navgrid a.module-card::after,
body > main .card:not(.finance-placeholder) > .site-card-shade {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(90deg,#1b2026 0%,rgba(27,32,38,.98) 27%,rgba(27,32,38,.84) 61%,rgba(27,32,38,.26) 100%);
  pointer-events:none;
}
/* Keep card content above the shade. Home needs a real shade child because
   ::after is already reserved for the In sviluppo corner ribbon. */
body > main .card:not(.finance-placeholder) {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:linear-gradient(130deg,#1b2026 5%,#15191e 100%);
}
body > main .card:not(.finance-placeholder) > .site-card-shade {
  display:block;
  width:auto;
  height:auto;
}
body > main .card:not(.finance-placeholder) > :not(.site-card-shade) {
  position:relative;
  z-index:1;
}
body > main .card.in-development::after{z-index:8}
/* Placeholder cells are intentionally invisible. */
body > main .finance-placeholder::before,
body > main .finance-placeholder::after{content:none!important}

@media (max-width:480px) {
  .controller-benefit-art,
  .navgrid .module-art{opacity:.34;right:-26%;width:80%}
}
@media (max-width:700px),(pointer:coarse) {
  body > main .card:not(.finance-placeholder)::before{opacity:.34;right:-26%;width:80%}
}
@media (prefers-contrast:more),(forced-colors:active) {
  .controller-benefit-art,
  .navgrid .module-art,
  body > main .card:not(.finance-placeholder)::before{display:none}
}