.hero {
  position: relative;
  isolation: isolate;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 76% 44%, #f46a3526, transparent 57%);
  transform-origin: 76% 44%;
}

.button > span[aria-hidden],
.text-link > span[aria-hidden] {
  display: inline-block;
  transition: transform 200ms ease;
}

.price-card,
.extra-card {
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.price-card:focus-within,
.extra-card:focus-within {
  border-color: var(--accent);
  box-shadow: 0 10px 28px #20252b0d;
}

.price-card.featured:focus-within {
  box-shadow: 0 0 0 1px var(--accent), 0 10px 28px #20252b0d;
}

@media (prefers-reduced-motion: no-preference) {
  .hero::before {
    animation: hero-light-in 1400ms cubic-bezier(.22, 1, .36, 1) both;
  }

  .inquiry-dialog[open] {
    animation: inquiry-in 200ms cubic-bezier(.22, 1, .36, 1);
  }

  .inquiry-dialog[open]::backdrop {
    animation: backdrop-in 200ms ease-out;
  }
}

@media (hover: hover) and (pointer: fine) {
  .price-card:hover,
  .extra-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: 0 12px 30px #20252b12;
  }

  .price-card.featured:hover {
    box-shadow: 0 0 0 1px var(--accent), 0 12px 30px #20252b12;
  }

  .button:hover > span[aria-hidden],
  .text-link:hover > span[aria-hidden] {
    transform: translateX(3px);
  }
}

@media (hover: none), (pointer: coarse) {
  .button:hover { transform: none; }
}

@media (max-width: 560px) {
  .hero::before {
    background: radial-gradient(ellipse at 100% 30%, #f46a351a, transparent 68%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .button:hover,
  .price-card:hover,
  .extra-card:hover,
  .button > span[aria-hidden],
  .text-link > span[aria-hidden] {
    transform: none !important;
  }
}

@keyframes hero-light-in {
  from { opacity: 0; transform: scale(.94); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes inquiry-in {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to { opacity: 1; transform: none; }
}

@keyframes backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}