/* Interaction polish is independent of JavaScript and never hides content. */
:root {
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-duration: 280ms;
}

.desktop-nav a {
  position: relative;
  padding-block: 8px;
  text-decoration: none;
  transition: color 220ms ease, transform 280ms var(--motion-ease);
}

.desktop-nav a::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: var(--brand-deep);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 340ms var(--motion-ease);
}

.desktop-nav a:hover,
.desktop-nav a:focus-visible {
  color: var(--brand-deep);
  text-decoration: none;
}

.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after {
  transform: scaleX(1);
}

.button, .header-cta, .plan-choose, .menu-toggle {
  font-family: var(--font-ui);
  transition: transform var(--motion-duration) var(--motion-ease),
    background-color var(--motion-duration) ease,
    border-color var(--motion-duration) ease,
    box-shadow var(--motion-duration) ease;
}

.product-tabs button,
.billing-selector button,
.assistant-questions button {
  transition: color 220ms ease, background-color 220ms ease, border-color 220ms ease,
    transform 280ms var(--motion-ease);
}

.faq-list summary,
.comparison-module th button {
  transition: color 200ms ease, background-color 200ms ease;
}

.faq-list summary:hover,
.faq-list summary:focus-visible {
  color: var(--brand-deep);
}

.faq-list summary span {
  transition: transform 220ms var(--motion-ease);
}

.plan-card {
  transition: transform 320ms var(--motion-ease), border-color 240ms ease,
    box-shadow 320ms var(--motion-ease);
}

.plan-card:focus-within {
  border-color: var(--brand-deep);
}

.hero-stage { transform-origin: 50% 50%; }
.hero-system-line, .hero-system-connector { transform-origin: left center; }

.text-link,
.product-window-bar a,
.footer-top nav a,
.footer-bottom a {
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.product-window-bar a:hover,
.product-window-bar a:focus-visible,
.footer-top nav a:hover,
.footer-top nav a:focus-visible,
.footer-bottom a:hover,
.footer-bottom a:focus-visible {
  text-decoration: underline;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .button:hover, .header-cta:hover, .plan-choose:hover {
    transform: translateY(-3px) scale(1.015);
    box-shadow: 0 8px 16px rgb(53 60 68 / 12%);
  }

  .button:active, .header-cta:active, .plan-choose:active {
    transform: translateY(0);
    box-shadow: none;
  }

  .plan-card:hover {
    transform: translateY(-6px);
    border-color: var(--brand-deep);
    box-shadow: 0 15px 28px rgb(53 60 68 / 10%);
  }

  .desktop-nav a:hover {
    transform: translateY(-1px);
  }

  .product-tabs button:hover:not([aria-selected="true"]) {
    color: var(--brand-deep);
    transform: translateY(-2px);
  }

  .assistant-questions button:hover:not([aria-pressed="true"]) {
    transform: translateX(4px);
    border-left-color: var(--brand);
  }

  .hero-stage {
    transform: perspective(1100px)
      translate3d(var(--hero-shift-x, 0px), var(--hero-shift-y, 0px), 0)
      rotateX(var(--hero-rotate-x, 0deg)) rotateY(var(--hero-rotate-y, 0deg));
    transition: transform 360ms var(--motion-ease);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .hero-stage { transform: none; }
  .hero-phone, .hero-capture img, .hero-system-step,
  .hero-system-line, .hero-system-connector {
    animation: none !important;
    transition: none !important;
  }
}