/* Small editorial elevation, retaining the approved Zaro feature/support hierarchy. */
.editorial-feature,.editorial-support>article{
  background:var(--canvas);
  transition:transform 320ms cubic-bezier(.2,.7,.2,1),box-shadow 320ms cubic-bezier(.2,.7,.2,1),border-color 320ms ease;
}
@media(hover:hover) and (pointer:fine){
  body:not([data-motion=reduced]) .editorial-feature:hover,
  body:not([data-motion=reduced]) .editorial-support>article:hover{
    transform:translateY(-4px);
    border-color:var(--rust);
    box-shadow:0 3px 6px rgb(26 22 20 / .04),0 12px 24px rgb(26 22 20 / .09);
  }
  body[data-surface=dark]:not([data-motion=reduced]) .editorial-feature:hover,
  body[data-surface=dark]:not([data-motion=reduced]) .editorial-support>article:hover{border-color:#e9a783}
}
.editorial-feature:focus-within,.editorial-support>article:focus-within{
  border-color:var(--rust);
}
.value-icon{display:block;width:28px;height:28px;margin:0 0 16px;fill:none;stroke:var(--rust);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
body[data-surface=dark] .value-icon{stroke:#e9a783}
/* Pausing settles the hover position too; changing settings cannot strand an effect. */
body[data-motion=reduced] .editorial-feature,body[data-motion=reduced] .editorial-support>article{transform:none;box-shadow:none;transition:none}
@media(prefers-reduced-motion:reduce){
  .editorial-feature,.editorial-support>article{transform:none!important;box-shadow:none!important;transition:none}
}