/* Reflujo cuando crece el tamaño de texto del navegador.
   Solo evita cortes y desbordes: no redefine ninguna proporción del grid. */

/* break-word y no anywhere: anywhere entra en el cálculo de min-content
   y parte los titulares a mitad de palabra aunque quepan de sobra. */
h1,h2,h3,.wordmark,.footer-wordmark,.card-heading h3{overflow-wrap:break-word}
summary > span:not(.faq-symbol){min-width:0;overflow-wrap:break-word}

.header-inner > *,.hero-copy,.demo-title,.demo-buy,.bundle-copy,.custom-copy,
.requirements-copy,.faq-list,.faq-intro,.resource-card,.product-card,.listening-head{min-width:0}

.nav-cta,.button,.card-cta,.text-link,.upcoming-more > summary{overflow-wrap:break-word;max-width:100%}
.button svg,.card-cta svg,.text-link svg,.nav-cta svg,.hero-secondary svg{flex-shrink:0}

.demo-head,.demo-player,.hero-player,.hero-actions,.hero-trust,.custom-buy,.custom-concepts,
.bundle-price,.community,.closing-main,.footer-top,.footer-bottom,.collection-label,
.upcoming-head,.listening-foot,.card-meta,.upcoming-more > summary{flex-wrap:wrap}

.demo-time{min-width:6rem}
.wave-seek{flex-basis:7rem}
.hero-feature,.bundle-art,.custom-art{min-width:0}

.site-header a:focus-visible,.menu-toggle:focus-visible{outline-offset:3px}