/* Phone layout for marketing pages other than the homepage.
   Every rule is inside a max-width query so desktop stays unchanged. */

@media (max-width: 900px) {
  .wrap { padding-left: 18px; padding-right: 18px; }
  nav { padding-left: 18px; padding-right: 18px; }
  img, video, svg { max-width: 100%; height: auto; }
  iframe { max-width: 100%; }
  pre, .cmp-table-wrap, .table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .plan-card.popular { transform: none; }
  .plb-hero-card-back, .wb-card-back, .ev-card-back { display: none; }
  .plb-hero-frame, .wb-frame, .ev-frame,
  .plb-hero-visual:hover .plb-hero-frame,
  .wb-hero-visual:hover .wb-frame,
  .ev-hero-visual:hover .ev-frame { transform: none; }
}

@media (max-width: 720px) {
  nav:has(.nav-mobile) .nav-ctas,
  nav:has(.nav-toggle) .navcta,
  nav:has(.nav-toggle) .nav-signin { display: none; }
  .logo { min-width: 0; }
  .logo-word { font-size: 18px; }
  .logo .mark { width: 34px; height: 34px; border-radius: 10px; font-size: 12px; }
  .announce { font-size: 12.5px; line-height: 1.35; padding: 8px 40px; }

  .hero-cta, .plb-hero-cta, .wb-hero-cta, .ev-hero-cta, .ui-cta, .agi-hero-cta {
    flex-direction: column;
    align-items: stretch;
    max-width: none;
    width: 100%;
  }
  .hero-cta input, .plb-hero-cta input, .wb-hero-cta input, .ev-hero-cta input, .ui-cta input, .agi-hero-cta input,
  .hero-cta .btn, .plb-hero-cta .btn, .wb-hero-cta .btn, .ev-hero-cta .btn, .ui-cta .btn, .agi-hero-cta .btn {
    width: 100%;
    height: 48px;
  }

  .about-hero, .pr-hero, .blog-hero { padding-top: 48px; padding-bottom: 36px; }
  .about-hero h1, .pr-hero h1, .blog-hero h1, .art-hero h1,
  .plb-hero h1, .wb-hero h1, .ev-hero h1, .agi-hero h1, .li-hero h1, .em-hero h1, .ptl-hero h1, .ui-hero h1, .dv-hero h1 {
    font-size: clamp(28px, 8.2vw, 38px);
    overflow-wrap: break-word;
  }

  .feat-body { padding: 22px 18px; }
  .product-story-inner { padding: 28px 18px; }
  article.legal-prose { padding: 22px 16px !important; }
  main.max-w-3xl { padding-left: 16px; padding-right: 16px; }
  body > nav .whitespace-nowrap { font-size: 13px; }
}

@media (max-width: 640px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  nav { padding-left: 16px; padding-right: 16px; gap: 8px; }
  section { padding-top: 48px; padding-bottom: 48px; }
  .foot-top { grid-template-columns: 1fr 1fr !important; gap: 28px 20px !important; }
  .foot-brand { grid-column: 1 / -1 !important; }
  .foot-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
  nav:not(:has(.nav-mobile)):not(:has(.nav-toggle)) { flex-wrap: wrap; row-gap: 10px; }
  nav:not(:has(.nav-mobile)):not(:has(.nav-toggle)) .nav-ctas { flex-wrap: wrap; }
}