/* Keep the original site identity; these additions support the static contact
   flow and prevent the existing desktop layout from clipping on small screens. */
button, [data-deployment-request] { cursor: pointer; }
a { text-underline-offset: 0.15em; }
:focus-visible { outline: 3px solid #0747a6; outline-offset: 3px; }
.skip-link { position: absolute; top: -5rem; left: 1rem; z-index: 10; padding: 0.75rem; background: white; }
.skip-link:focus { top: 0.5rem; }
.s-footer-block { flex-wrap: wrap; align-items: center; }
.deployment-open { overflow: hidden; }

/* A native dialog replaces signup without exposing a dead form or calling an
   application API. Size and overflow keep the entire message usable on phones. */
#deployment-dialog {
  width: min(560px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 36px;
  overflow-y: auto;
  border: 0;
  border-radius: 6px;
  color: #172b4d;
  background: #fff;
  font-family: inherit;
}
#deployment-dialog::backdrop { background: rgba(9, 30, 66, 0.6); }
#deployment-dialog h2 { margin: 0 28px 20px 0; font-size: 26px; font-weight: 800; line-height: 1.3; }
#deployment-dialog p { margin: 0 0 18px; line-height: 1.6; }
#deployment-dialog a { overflow-wrap: anywhere; }
#deployment-dialog .btn { margin-top: 6px; white-space: normal; }
/* The new dialog needs readable white button text; use the existing darker
   brand blue rather than Bootstrap's lower-contrast default. */
#deployment-dialog .btn-primary { background-color: #0052cc; border-color: #0052cc; }
#deployment-dialog .btn-primary:hover { background-color: #0747a6; border-color: #0747a6; }
#deployment-dialog p a:hover { color: #0747a6; }
.deployment-close { position: absolute; top: 10px; right: 12px; margin: 0; }
.deployment-close button { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 3px; background: transparent; color: #42526e; font-size: 30px; line-height: 1; }
.deployment-close button:hover { background: #f4f5f7; }
.deployment-page { margin-top: 0; margin-bottom: 60px; }
.deployment-page h2 { margin-top: 0; }
.deployment-docs-note { margin: 24px 0; color: #42526e; font-size: 15px; line-height: 1.6; }
.s-docs-main > div { min-width: 0; }
pre { padding: 12px; overflow-x: auto; background: #fff; border: 1px solid #ebecf0; border-radius: 3px; }
pre code { white-space: pre; overflow-wrap: normal; }

@media (max-width: 767px) {
  .navbar-collapse { padding-top: 12px; }
  .navbar-nav { align-items: stretch; gap: 4px; }
  .navbar-nav .nav-item { margin: 0; }
  .s-landing-nav-link { padding: 8px 0; }
  .home-title-box { padding: 40px 0; }
  .home-title-box h1 { font-size: 34px; }
  .home-title-box .col-md-6 + .col-md-6 { margin-top: 28px; }
  .s-docs-main > .col-sm-3, .s-docs-main > .col-sm-9 { flex: 0 0 100%; max-width: 100%; }
  .s-docs-column { margin-bottom: 16px; }
  .s-docs-image, .s-docs-image-vertical { max-width: 100%; margin: 12px 0 24px; }
}
@media (max-width: 575px) {
  .advantages-block { flex-direction: column; gap: 16px; margin: 32px 0; }
  .advantage { width: 100%; }
  .l-title-block h1 { font-size: 30px; }
  #deployment-dialog { padding: 30px 24px 24px; }
  #deployment-dialog h2 { font-size: 23px; }
  #deployment-dialog .btn { width: 100%; font-size: 16px; }
}