/* Layout safeguards while preserving the supplied design and breakpoints. */
html, body, #root { width: 100%; min-width: 0; }
body { overflow-x: clip; }
main, section, header, footer { min-width: 0; }
img { max-width: 100%; }
.flex-1 { min-width: 0; }
button { white-space: normal; overflow-wrap: anywhere; }
h1, h2, h3, h4, p { overflow-wrap: break-word; }
button:focus-visible { outline: 3px solid #0284c7; outline-offset: 4px; }
@media (max-width: 639px) {
  #carousel-cta-button { padding-inline: 1rem; gap: .5rem; }
  section .flex.gap-4.mt-3\.5 { flex-wrap: wrap; row-gap: .5rem; }
  [id^="plan-card-"] { scroll-margin-block: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .animate-marquee-left, .animate-marquee-right { transform: none; }
}
.bonus-art { aspect-ratio: 1; max-width: 320px; } .bonus-art > img { display: block; width: 100%; height: auto; max-height: 100%; object-fit: contain; }

a:focus-visible, summary:focus-visible { outline: 3px solid #0284c7; outline-offset: 4px; }
summary { list-style: none; } summary::-webkit-details-marker { display:none; }
details[open] summary { color:#0369a1; } details[open] summary svg { transform:rotate(45deg); }
#plan-card-premium { scroll-margin-block:24px; }
#legal-dialog { margin:auto; max-width: min(90vw, 32rem); padding:2rem; border-radius:1rem; color:#334155; }
#legal-dialog::backdrop { background:rgb(0 0 0 / .65); }
#legal-dialog h2 { font-size:1.25rem;font-weight:800;margin-bottom:1rem; }
#legal-dialog button { margin-top:1rem;padding:.6rem 1rem;background:#0369a1;color:white;border-radius:.5rem; }