/* The subscription's card (15.1053, 15.1067, 15.1083) — the kit's `metalPlate()` (/kit/metalcard.js); moved from the
   subscription's module by 15.1171: the landing's tariff shows the same card */
/* the card: a plate with its own dark ground and white ink in both themes (contrast at its lightest corner — 7.9),
   a thickness under it, the glare after the pointer */
.sub-card-holder { position: relative; display: grid; place-items: center; perspective: 1100px; padding-block: var(--sp-200); }
/* 15.1083: the metal card (ui/metal.js) — a canvas over the place, the page's own drawing kept as the place */
.sub-metal { position: absolute; left: 50%; top: 50%; translate: -50% -50%; pointer-events: none;
             filter: drop-shadow(0 22px 28px rgba(8, 10, 30, 0.45)); }
.sub-card.sub-card-cast { visibility: hidden; animation: none; }
.sub-card {
  --lean-x: 0deg; --lean-y: 0deg; --glare-x: 30%; --glare-y: 20%;
  position: relative; width: 100%; max-width: 440px; aspect-ratio: 1.586;
  border-radius: 24px; /* вне шкалы: a card's corner as a payment card's */
  color: #fff;
  transform-style: preserve-3d;
  transform: rotateX(var(--lean-x)) rotateY(var(--lean-y));
  transition: transform 0.7s var(--ease-out);
  animation: sub-card-float 7s ease-in-out infinite;
}
.sub-card.held { transition: transform 0.12s linear; }
@keyframes sub-card-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}
.sub-card-depth, .sub-card-face, .sub-card-glare { position: absolute; inset: 0; border-radius: inherit; }
.sub-card-depth {
  transform: translateZ(-10px);
  background: color-mix(in srgb, var(--acc-solid) 30%, #05060a);
  box-shadow: 0 34px 60px -24px rgba(8, 10, 30, 0.6), 0 14px 26px -14px rgba(8, 10, 30, 0.45);
}
.sub-card-face {
  display: flex; flex-direction: column; gap: var(--sp-100); padding: var(--sp-300);
  background:
    linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.10) 44%, transparent 58%),
    radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--acc) 72%, transparent) 0%, transparent 62%),
    radial-gradient(70% 90% at 0% 100%, color-mix(in srgb, var(--acc-solid) 40%, transparent) 0%, transparent 70%),
    linear-gradient(140deg, color-mix(in srgb, var(--acc-solid) 62%, #07080d) 0%, #0b0c13 82%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.sub-card-glare {
  transform: translateZ(1px); pointer-events: none;
  background: radial-gradient(circle at var(--glare-x) var(--glare-y), rgba(255, 255, 255, 0.30), transparent 46%);
  mix-blend-mode: soft-light;
}
.sub-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-200); }
.sub-card-mark { display: block; color: #fff; }
.sub-card-mark > svg { display: block; width: 104px; height: auto; }
.sub-card-plan {
  padding: var(--sp-050) var(--sp-150); border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.14); color: #fff; font-size: var(--fs-s); line-height: var(--lh-s);
}
.sub-card-company {
  margin-top: auto; color: #fff;
  font-family: Manrope, Inter, sans-serif; font-weight: var(--fw-semi); font-size: var(--fs-num-s); line-height: 1.2;
  overflow-wrap: anywhere;
}
.sub-card-foot { display: flex; justify-content: space-between; gap: var(--sp-200); }
.sub-card-label { color: rgba(255, 255, 255, 0.72); font-size: var(--fs-s); line-height: var(--lh-s); }
.sub-card-value { color: #fff; font-size: var(--fs-l); line-height: var(--lh-l); font-weight: var(--fw-semi); }

@media (prefers-reduced-motion: reduce) { .sub-card { animation: none; } }
[data-motion="calm"] .sub-card { animation: none; }