/* Responsive controls and readable long translations. */
.topbar { height: auto; min-height: 79px; }
.top-inner { min-height: 79px; }
.top-inner > *, .hero-grid > *, .duo > *, .download-layout > * { min-width: 0; }
button, select, .faq-reset, .faq-viewall, .nav a { min-height: 44px; }
input, select { font-size: 16px; }
.btn, button, .faq-list summary, .faq-featured summary, .verification-hint {
  overflow-wrap: anywhere;
}
.modalhead { gap: 12px; }
.modalhead > :first-child { min-width: 0; overflow-wrap: anywhere; }
#closeModal { flex: 0 0 auto; min-width: 44px; min-height: 44px; }
.modal-content { max-height: calc(100dvh - 24px); }
.certificate-inline-view { min-height: 0; overflow: auto; overscroll-behavior: contain; }
html[dir="rtl"] .cs-support-fab { right: auto; left: 15px; align-items: flex-start; }
@media (max-width: 820px) {
  .top-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-height: 0; padding-block: 10px; gap: 8px 12px; }
  .top-inner > .logo { grid-column: 1; font-size: 19px; }
  .top-inner > .menu { grid-column: 2; grid-row: 1; margin: 0; }
  .top-inner > .app-entry, .top-inner > a:not(.logo) { grid-column: 1; grid-row: 2; justify-self: start; max-width: 100%; white-space: normal; }
  .top-inner > .lang, .top-inner > select { grid-column: 2; grid-row: 2; min-width: 0; max-width: 145px; width: 100%; }
  .top-inner > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .nav { top: 100%; max-height: calc(100dvh - 130px); margin: 0 !important; }
  .nav a { display: flex; align-items: center; }
  .hero { padding-top: 48px; }
  .hero-actions, .verification-actions { flex-wrap: wrap; }
  .hero-actions > *, .verification-actions > * { max-width: 100%; }
  .faq-tools { display: grid; grid-template-columns: minmax(0, 1fr); }
  .faq-tools input, .faq-tools select { width: 100%; min-width: 0; }
  .modal { padding: 12px; }
  .modalhead { padding: 10px; }
  .cs-support-options { max-width: calc(100vw - 30px); min-width: 0; }
  .cs-support-toggle { max-width: calc(100vw - 30px); }
  .verification-facts strong, .verification-facts small { overflow-wrap: anywhere; }
  html { scroll-padding-top: 140px; }
}
@media (max-width: 374px) {
  .top-inner > .logo { font-size: 16px; gap: 5px; }
  .top-inner > .logo .mark { width: 30px; height: 30px; }
  .top-inner > .menu { padding-inline: 8px; }
  .top-inner > .lang, .top-inner > select { max-width: 125px; }
  .hero h1 { font-size: clamp(30px, 9vw, 38px); }
}