/* Reserve room for localised prices while the billing period changes. */
.pricing-section .price {
  display: grid;
  grid-template-columns: 7.5ch max-content;
  align-items: baseline;
  gap: 8px;
  font-size: 40px;
}

.pricing-section .price strong {
  font-size: 1em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.pricing-section .price > span {
  white-space: nowrap;
}

@media (max-width: 380px) {
  .pricing-section .price { font-size: 36px; }
}

/* Keep decorative artwork and the longer footer links inside narrow viewports. */
@media (max-width: 380px) {
  .hero-visual { overflow-x: clip; }
  .site-footer nav { flex-wrap: wrap; }
}

/* A quiet heartbeat for the privacy mark; opt in only when motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
  .privacy-section .privacy-mark .brand-mark {
    animation: privacy-pulse 3.2s ease-in-out infinite;
  }
}

@keyframes privacy-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.055); }
}