/* Mobile layout for the marketing pages. Desktop inline styles stay as-is. */

html {
  -webkit-text-size-adjust: 100%;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.ua-copy-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap !important;
  min-width: 0;
  width: 100%;
  overflow: visible;
}

.ua-snippet {
  display: block;
  flex: 1 1 0% !important;
  min-width: 0 !important;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

.ua-copy-btn {
  flex: none !important;
  flex-shrink: 0;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  margin-bottom: 3px;
}

.ua-header,
header.ua-bar {
  flex-wrap: nowrap !important;
}

.ua-header > a,
.ua-brand {
  flex: none;
  white-space: nowrap;
}

.ua-brand-name {
  white-space: nowrap;
}

.ua-nav {
  flex-wrap: nowrap !important;
  flex: none;
  white-space: nowrap;
}

.ua-nav-back {
  color: #1273c4 !important;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.ua-nav-extra {
  display: none !important;
}

.ua-header:has(.ua-nav-back) .ua-nav-page,
header.ua-bar:has(.ua-nav-back) .ua-nav-page {
  display: none !important;
}

@media (min-width: 841px) {
  .ua-nav-extra {
    display: inline !important;
  }

  .ua-header:has(.ua-nav-back) .ua-nav-page,
  header.ua-bar:has(.ua-nav-back) .ua-nav-page {
    display: inline !important;
  }
}

@media (max-width: 840px) {
  .ua-header,
  header.ua-bar {
    padding: 12px max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)) !important;
    gap: 12px !important;
  }

  .ua-brand-name {
    font-size: 17px !important;
  }

  .ua-nav {
    gap: 14px !important;
    font-size: 13px !important;
  }

  .ua-hero {
    display: flex !important;
    flex-direction: column;
    min-height: 0 !important;
  }

  .ua-hero-copy {
    padding: 24px 18px 20px !important;
    gap: 14px !important;
  }

  .ua-hero-copy .ua-eyebrow {
    order: 0;
  }

  .ua-hero-copy .ua-h1 {
    order: 1;
  }

  .ua-hero-copy .ua-copy-box {
    order: 2;
  }

  .ua-hero-copy .ua-helper {
    order: 3;
  }

  .ua-hero-copy .ua-lede {
    order: 4;
  }

  .ua-hero-copy .ua-why {
    order: 5;
    margin-top: 4px;
  }

  .ua-hero-art {
    display: block !important;
    position: relative;
    height: 250px;
    min-height: 220px;
    flex: none;
    border-left: none !important;
    border-top: 3px solid #14264A;
  }

  .ua-eyebrow {
    font-size: 11px !important;
    letter-spacing: 1.4px !important;
  }

  .ua-h1 {
    font-size: 34px !important;
    letter-spacing: -0.6px !important;
  }

  .ua-lede,
  .ua-helper {
    font-size: 16px !important;
    max-width: none !important;
  }

  .ua-helper {
    margin-top: 4px;
  }

  .ua-copy-box {
    max-width: none !important;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 14px 18px !important;
    margin-top: 2px !important;
    margin-bottom: 12px !important;
    overflow: visible;
  }

  .ua-copy-label {
    letter-spacing: 1.2px !important;
    font-size: 10.5px !important;
    line-height: 1.35;
  }

  .ua-snippet {
    font-size: 14px !important;
  }

  .ua-copy-btn {
    min-height: 44px;
    padding: 10px 16px !important;
    font-size: 15px !important;
  }

  .ua-name {
    padding: 40px 20px !important;
  }

  .ua-name h2 {
    font-size: 28px !important;
  }

  .ua-name p {
    font-size: 16px !important;
  }

  .ua-name-note {
    font-size: 11px !important;
  }

  .ua-footer {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px 18px !important;
  }

  .ua-footer-tag,
  .ua-footer-brand,
  .ua-footer-social {
    display: none !important;
  }

  .ua-footer-links {
    gap: 14px !important;
    flex: none;
    white-space: nowrap;
  }

  .ua-page-pad {
    padding: 36px 18px 56px !important;
  }

  .ua-title {
    font-size: 30px !important;
  }

  .ua-plans,
  .ua-paths,
  .ua-scope {
    grid-template-columns: 1fr !important;
  }

  .ua-paths,
  .ua-scope {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .ua-plans > div {
    padding: 20px !important;
    min-width: 0;
    box-sizing: border-box;
  }

  .ua-paths h2 {
    font-size: 22px !important;
  }

  .ua-signon-hero {
    padding: 40px 18px 64px !important;
  }

  .ua-signon-hero h1 {
    font-size: 32px !important;
  }

  .ua-signon-hero p {
    font-size: 16px !important;
  }

  .ua-cta {
    padding: 40px 18px 56px !important;
  }

  .ua-cta h2 {
    font-size: 26px !important;
  }

  .ua-billing-toggle {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 400px) {
  .ua-h1 {
    font-size: 30px !important;
  }
}

/* Smallest phones: keep the URL on one line, Copy as a full-width tap target. */
@media (max-width: 380px) {
  .ua-copy-row {
    flex-direction: column;
    align-items: stretch;
    overflow: visible;
    gap: 12px;
  }

  .ua-snippet {
    flex: none !important;
    text-align: left;
    overflow: visible;
    text-overflow: unset;
    font-size: 15px !important;
  }

  .ua-copy-btn {
    width: 100%;
  }
}