/* The language switcher, the footer's language list, and the suggestion bar. */

.lang-menu{position:relative;flex:none;margin-left:-16px}
.lang-button{display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 4px;border:0;background:none;color:var(--signal-text,#e8e8e8);font:600 13px/1 Hanken,Arial,sans-serif;letter-spacing:.06em;cursor:pointer}
.lang-button:hover,.lang-button[aria-expanded="true"]{color:var(--signal-yellow,#ffc629)}
.lang-button svg{display:block}
.lang-list{position:absolute;right:0;top:calc(100% + 10px);z-index:40;min-width:176px;margin:0;padding:6px 0;list-style:none;background:var(--signal-panel,#252525);border:1px solid var(--signal-line,#474747);box-shadow:0 18px 40px rgb(0 0 0/.35)}
.lang-list[hidden]{display:none}
.site-header .lang-list a{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:0 18px;font:400 15px/1.3 Hanken,Arial,sans-serif;color:var(--signal-text,#e8e8e8)}
.site-header .lang-list a:hover{color:var(--signal-yellow,#ffc629)}
.site-header .lang-list a[aria-current]{color:var(--signal-yellow,#ffc629)}
.site-header .lang-list a[aria-current]::after{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}

.nav-langs{display:none}

.foot-langs{display:flex;flex-wrap:wrap;gap:6px 16px}
.release-footer-bottom .foot-langs a{text-decoration:none;color:var(--signal-muted,#aeaeae)}
.release-footer-bottom .foot-langs a:hover{color:var(--signal-text,#e8e8e8)}
.release-footer-bottom .foot-langs a[aria-current]{color:var(--signal-text,#e8e8e8)}

.lang-bar{background:var(--signal-panel,#252525);border-bottom:1px solid var(--signal-line,#474747);color:var(--signal-text,#e8e8e8);font:400 14px/1.4 Hanken,Arial,sans-serif}
.lang-bar-inner{max-width:1440px;margin:auto;padding:8px var(--signal-gutter,22px);display:flex;align-items:center;gap:20px}
.lang-bar p{margin:0;margin-right:auto}
.lang-bar a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;background:var(--signal-yellow,#ffc629);color:var(--signal-bg,#1c1c1c);font-weight:650;text-decoration:none;white-space:nowrap}
.lang-bar a:hover{background:#ffd75e}
.lang-bar button{flex:none;width:36px;height:36px;margin-right:-8px;border:0;background:none;color:var(--signal-muted,#aeaeae);font-size:20px;line-height:1;cursor:pointer}
.lang-bar button:hover{color:var(--signal-text,#e8e8e8)}
.lang-bar :focus-visible{outline:2px solid var(--signal-yellow,#ffc629);outline-offset:3px}

/* Longer labels and the globe need room the English header never did. */
@media(max-width:1240px){.site-header .header-inner{gap:24px}.site-header .header-inner nav{gap:20px}.lang-menu{margin-left:-6px}}
@media(max-width:1000px) and (min-width:701px){
  .site-header .header-inner nav{gap:16px;font-size:13px}
  .site-header .header-download{gap:10px;padding:12px}
  .site-header .header-download span{font-size:0}
  .site-header .header-download span[data-short]::after{content:attr(data-short);font-size:12px}
}
@media(max-width:820px) and (min-width:701px){.site-header .header-inner{gap:14px}.site-header .header-inner nav{gap:11px;font-size:12px}.site-header .header-download{padding:11px 10px}.lang-button span{display:none}}
@media(max-width:700px){
  .lang-menu{display:none}
  .site-header nav.is-open .nav-langs{display:flex;gap:22px;padding-top:16px}
  .site-header nav.is-open .nav-langs a{border:0;padding:0;font-size:15px;color:var(--signal-muted,#aeaeae)}
  .site-header nav.is-open .nav-langs a[aria-current]{color:var(--signal-yellow,#ffc629)}
  .site-header .header-download span[data-short]::after{content:attr(data-short)}
  .lang-bar-inner{gap:12px;padding-block:8px;flex-wrap:wrap}
  .lang-bar p{flex:1 1 100%;margin-right:0;padding-right:28px}
  .lang-bar{position:relative}
  .lang-bar button{position:absolute;top:4px;right:10px;margin:0}
}

.lang-note{margin:16px 0 0;padding:12px 16px;border-left:2px solid var(--signal-yellow,#ffc629);background:var(--signal-panel,#252525);color:var(--signal-muted,#aeaeae);font:400 14px/1.5 Hanken,Arial,sans-serif}
.lang-note a{color:var(--signal-text,#e8e8e8)}

/* The homepage headline is sized for "MUTE A PART." on one line. Longer
   translations wrap onto balanced lines instead of running off the edge. */
html:not([lang="en"]) .hero h1 .hero-fit{white-space:normal;text-wrap:balance}
html:not([lang="en"]) .hero h1 .hero-fit span{display:block}
html[lang="es"] .hero h1 .hero-fit{font-size:.72em}
html[lang="fr"] .hero h1 .hero-fit{font-size:.62em}
html[lang="de"] .hero h1 .hero-fit{font-size:.76em}

/* Long French and German words (PROGRESSEZ., AUFNEHMEN., COMMENCER.) overrun a phone at the English sizes. */

@media(max-width:700px){html[lang="fr"] .practice-intro h2{font-size:17.5vw}html[lang="de"] .practice-intro h2{font-size:18.5vw}html:not([lang="en"]) .faq h2{font-size:min(65px,17vw)}}

/* The Tone page's download button is set never to wrap, which overruns a phone. */

@media(max-width:700px){.btn--lg[style*="nowrap"]{white-space:normal!important;flex:1 1 auto!important;max-width:100%;text-align:center}}

/* The longer translated Get Afinar labels push the menu button off a 320px screen, so the header button drops its icon. */

@media(max-width:370px){html:not([lang="en"]) .site-header .header-download .fi{display:none}html:not([lang="en"]) .site-header .header-download{gap:0}}

/* Long Spanish, French and German words keep narrow table cells from shrinking. */

@media(max-width:700px){html:not([lang="en"]) main td{hyphens:auto;-webkit-hyphens:auto}}