/* ASTC performance & small UX overrides — split out from an inline <style>
   block into its own cached file (SEO audit: "Excessive Inline CSS/JS").
   - progress bar animates with transform instead of width (no layout per scroll)
   - hero "pulse" dot animates transform/opacity instead of box-shadow
     (fixes "Avoid non-composited animations")
   - <picture> wrapper around the header logo
   - popup close is now a <button>; reset its default styles
   - larger tap areas for small text links (breadcrumb, profile links, footer,
     in-page section nav, and the practice-comparison table links)
*/
.brand picture{display:flex}
.progress{width:100%;transform:scaleX(0);transform-origin:0 50%;will-change:transform}
.pill{isolation:isolate}
.dot{position:relative;box-shadow:none;animation:none}
.dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;z-index:-1;
  background:rgba(32,125,181,.22);animation:astc-pulse 2.4s ease-in-out infinite;will-change:transform,opacity}
.highlight-line .dot::after{background:rgba(255,255,255,.35)}
@keyframes astc-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.2}}
button.close-popup{border:0;padding:0;font-family:inherit;z-index:2}
.crumb a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.member-meta a{display:inline-flex;align-items:center;min-height:44px}
.site-foot li{margin-bottom:2px}
.site-foot li a,.foot-bot a,.fline a{display:inline-flex;align-items:center;min-height:40px}
.soc{width:44px;height:44px}
.pagenav a{min-height:44px;display:inline-flex;align-items:center}
.tbl th a{display:inline-flex;align-items:center;min-height:40px}

/* 404 page — moved out of an inline <style> block on 404.php */
.error-page{text-align:center;padding:60px 0}
.error-page h1{font-size:160px;line-height:1;color:#207db6;font-weight:700}
.error-page h2{font-size:36px;margin:20px 0 10px}
.error-page p{font-size:18px;color:#666;max-width:550px;margin:0 auto 35px;line-height:1.7}
.error-btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 32px;font-size:18px;
  background:#207db6;color:#fff;text-decoration:none;border-radius:50px;transition:.3s;font-weight:400;width:auto}
.error-btn:hover{background:#000}
.error-links{max-width:520px;margin:0 auto;text-align:left}
@media(max-width:767px){
  .error-page h1{font-size:100px}
  .error-page h2{font-size:28px}
  .error-page p{font-size:16px}
}