/* V2.9 production QA refinements: focus visibility, tablet/mobile navigation,
   small form ergonomics, and narrow-screen verification polish. */

h1,h2{text-wrap:balance}
.lead,p{text-wrap:pretty}

.btn{min-height:44px}
.btn:focus-visible,
.menu-toggle:focus-visible,
.primary-nav a:focus-visible,
.site-footer a:focus-visible,
.card-link:focus-visible,
.faq-item button:focus-visible{
  outline:3px solid rgba(100,181,246,.38);
  outline-offset:3px;
}
.btn:disabled{opacity:.68;cursor:wait;transform:none;box-shadow:none}

.form-title{margin-top:0}
.field input,.field select{min-height:46px}
.field textarea{min-height:150px}

.thanks-actions{justify-content:center}

/* Keep the mobile/tablet brand genuinely centered. The earlier Menu text could
   overflow its narrow grid track between 621px and 900px. */
@media (max-width:900px){
  .menu-toggle-label{display:none}
  .menu-toggle{width:44px;height:44px;padding:0;justify-content:center}
}

/* Preserve the horizontal scope treatment on desktop, but avoid three cramped
   mini-columns on very small phones. */
@media (max-width:480px){
  .verification-scope-grid{grid-template-columns:1fr;gap:8px}
  .verification-scope-item{
    min-height:0;
    flex-direction:row;
    justify-content:flex-start;
    text-align:left;
    gap:12px;
    padding:12px 14px;
  }
  .verification-scope-item::before{
    top:10px;bottom:10px;left:0;right:auto;width:3px;height:auto;border-radius:0 8px 8px 0;
  }
  .verification-scope-icon{margin:0;width:38px;height:38px;flex-basis:38px}
  .verification-scope-item h3{font-size:.95rem}
}