/* Separate painted/clipped surfaces from the outer shadow. Native corners stay
   untouched; these rules activate only after the compatible contour is ready. */
.card { --smooth-radius:52; --smooth-fill:var(--card); }
.card--cover,.card--tariff { --smooth-fill:var(--forest); }
.button { --smooth-radius:22; --smooth-fill:var(--forest); }
.comparison { --smooth-radius:26; }
.device,.screen { --smooth-radius:0; }

.card.smooth-ready,.button.smooth-ready {
  background:transparent;
  box-shadow:none;
  overflow:visible;
  isolation:isolate;
  corner-shape:round;
}
.card.smooth-ready { filter:drop-shadow(0 1px 1px #0a321e0f) drop-shadow(0 6px 10px #0a321e26); }
.button.smooth-ready { position:relative; filter:drop-shadow(0 4px 5px #0a321e22); }
.card.smooth-ready::before,.button.smooth-ready::before {
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--smooth-fill); clip-path:var(--smooth-clip); pointer-events:none;
}
.card.smooth-ready > .bento,.card.smooth-ready::after {
  clip-path:var(--smooth-clip); border-radius:0;
}
.comparison.smooth-ready,.js .screen.smooth-ready {
  clip-path:var(--smooth-clip); border-radius:0;
}
.mini-card.smooth-ready { filter:none; }

@media(min-width:720px) and (min-height:640px) {
  .device { --smooth-radius:88; }
  .screen { --smooth-radius:67; }
  .js .device.smooth-ready {
    background:transparent; box-shadow:none; border-radius:0;
    isolation:isolate;
    filter:drop-shadow(0 15px 18px #15332330) drop-shadow(0 3px 5px #15332318);
  }
  .js .device.smooth-ready::before {
    content:''; position:absolute; inset:0; z-index:-1;
    background:var(--forest); clip-path:var(--smooth-clip); pointer-events:none;
  }
}
@media(prefers-reduced-motion:no-preference) {
  .js:not(.is-settled) .device.smooth-ready { animation-name:compatible-landing; }
}
@keyframes compatible-landing {
  0% { transform:translateY(-18px) scale(1.025); }
  55% { transform:translateY(2px) scale(.995); }
  100% { transform:none; }
}