/* Shared conversion controls and responsive header action. */
.conversion-links { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 22px; }
.conversion-links a { display: inline-flex; align-items: center; min-height: 40px; border: 1px solid #9da8b5; background: #fff; padding: 0 12px; color: #123f82; font-size: 13px; font-weight: 600; text-decoration: none; }
.conversion-links a.btn-primary { border-color: #1857b6; background: #1857b6; color: #fff; }
.conversion-links a.btn-primary:hover { border-color: #123f82; background: #123f82; color: #fff; }
.conversion-links a:hover { border-color: #1857b6; background: #eef4fb; }
.conversion-links a:focus-visible, .mobile-sticky-cta:focus-visible, .artifact-doc-link:focus-visible { outline: 3px solid #e0a82e; outline-offset: 3px; }
.artifact-note { border-top: 1px solid #cfd4da; background: #faf9f5; padding: 10px 16px; color: #64748b; font-size: 11px; line-height: 1.5; }
.artifact-doc-link { color: #123f82; font: 500 11px/1.4 "IBM Plex Sans", sans-serif; text-decoration: underline; text-underline-offset: 3px; }
.recovery[hidden], .security-status[hidden], .address-dropdown[hidden] { display: none !important; }
.ask-ai-persona { gap: 24px; }
.ask-ai-persona .ask-ai-intro p:last-child { max-width: 46rem; }
.ask-ai-persona .ask-ai-providers { gap: 8px; }
.ask-ai-persona .ask-ai-providers a { min-height: 48px; }

@media (max-width: 760px) {
  .header-actions .btn { display: inline-flex !important; align-items: center; justify-content: center; min-height: 34px; border-radius: 2px; padding: 0 8px; font-size: 11px; line-height: 1; white-space: nowrap; }
}

@media (max-width: 720px) {
  .site-nav { gap: 8px; }
  .brand { gap: 7px; font-size: 13px; white-space: nowrap; }
  .brand img { width: 26px; height: 26px; }
  .header-actions { gap: 6px; }
  .header-actions .btn { display: inline-flex !important; align-items: center; justify-content: center; min-height: 34px; border-radius: 2px; padding: 0 8px; font-size: 11px; line-height: 1; white-space: nowrap; }
  .mobile-menu-button { padding: 8px 3px; font-size: 10px; }
  .conversion-links { gap: 8px; margin-top: 19px; }
  .hero-grid > *, .artifact, .artifact-body, .code-window, .code-pane { min-width: 0; }
  .conversion-links { min-width: 0; }
  .conversion-links a { flex: 1 1 auto; justify-content: center; min-width: 0; max-width: 100%; min-height: 42px; overflow-wrap: anywhere; text-align: center; white-space: normal; }
  .code-window pre { max-width: 100%; overflow: auto; }
  .artifact-doc-link { font-size: 10px; }
}

@media (max-width: 360px) {
  .brand span { font-size: 11px; }
  .brand img { width: 23px; height: 23px; }
  .header-actions .btn { padding-inline: 6px; font-size: 10px; }
  .mobile-menu-button { font-size: 9px; }
}