/*
 * The public pages share a layout, but their desktop art direction is deliberately
 * different. Keep their narrow-screen rules here so a page can never leave a
 * fixed desktop element (or footer) over its scrollable content.
 */
@media (max-width: 760px) {
  html:has(.blob-home),
  body:has(.blob-home) {
    width: 100%;
    min-height: 100%;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body:has(.blob-home) {
    display: block !important;
  }

  .blob-home {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100svh;
    height: auto !important;
    overflow: visible !important;
  }

  .blob-home-header,
  .blob-commands-page .blob-home-header,
  .blob-pricing-page .blob-home-header {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    width: 100%;
    min-height: 68px;
    padding: max(0px, env(safe-area-inset-top)) 16px 0;
    overflow: visible;
    background: #121317;
  }

  .blob-home-brand {
    min-width: 0;
    flex: 1 1 auto;
  }

  .blob-home-menu {
    position: static;
    display: block;
    flex: 0 0 36px;
    margin: 0 8px 0 0;
  }

  .blob-home-menu summary {
    position: relative;
    z-index: 101;
  }

  .blob-home-menu nav {
    /* Anchor to the full-width sticky header, not the 36px details element.
       This also avoids fixed-position containment while a route is animating. */
    position: absolute;
    top: 100%;
    right: 16px;
    left: auto;
    z-index: 100;
    width: min(280px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    margin: 0;
    padding: 8px;
    border-color: #2b3348;
    border-radius: 12px;
    background: #1b2231;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .42);
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  .blob-home-menu nav a {
    min-height: 42px;
    padding: 11px 12px;
    border-radius: 8px;
    color: #b3bdd6;
  }

  .blob-home-menu nav a:hover,
  .blob-home-menu nav a[aria-current="page"] {
    background: rgba(122, 155, 252, .12);
    color: #fff;
  }

  .blob-home-header .btn-login {
    flex: 0 0 82px;
    width: 82px;
    min-width: 82px;
    margin-left: 0;
  }

  /* Home: all previously absolute desktop areas become normal document flow. */
  .blob-home:not(.blob-commands-page):not(.blob-pricing-page) .blob-home-hero,
  .blob-home:not(.blob-commands-page):not(.blob-pricing-page) .blob-home-cta,
  .blob-home:not(.blob-commands-page):not(.blob-pricing-page) .blob-home-footer {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    transform: none;
  }

  .blob-home:not(.blob-commands-page):not(.blob-pricing-page) .blob-home-hero {
    width: calc(100% - 32px);
    margin: clamp(48px, 11vh, 84px) auto 0;
  }

  .blob-home:not(.blob-commands-page):not(.blob-pricing-page) .blob-home-carousel {
    flex: none;
    margin-top: 40px;
  }

  .blob-home:not(.blob-commands-page):not(.blob-pricing-page) .blob-home-cta {
    width: calc(100% - 32px);
    min-height: 0;
    margin: 48px auto 0;
  }

  .blob-home-decor {
    pointer-events: none;
  }

  /* Commands and pricing should grow naturally; neither their content nor the
     footer can be covered by a viewport-bound desktop decoration. */
  .blob-commands-page .commands-page-content {
    flex: none;
    padding-top: 44px;
    padding-bottom: 48px;
  }

  .blob-pricing-page .pricing-main {
    flex: none;
    width: 100%;
    padding: 42px 16px 52px;
  }

  .blob-pricing-page .pricing-waves {
    position: absolute;
    z-index: 0;
    bottom: 0;
    pointer-events: none;
  }

  .blob-pricing-page .pricing-plan {
    min-height: 0;
    height: auto;
    overflow: visible;
    padding-bottom: 98px;
  }

  .blob-pricing-page .pricing-feature-list {
    padding-bottom: 0;
  }

  .blob-pricing-page .pricing-plan-action {
    position: absolute;
    bottom: 18px;
  }

  .blob-home-footer,
  .blob-commands-page .blob-home-footer,
  .blob-pricing-page .blob-home-footer {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    flex: none;
    width: calc(100% - 32px);
    min-height: 104px;
    height: auto;
    margin: 56px 16px 0;
    padding: 28px 12px 14px;
  }

  .blob-commands-page .blob-home-footer,
  .blob-pricing-page .blob-home-footer {
    margin-top: auto;
  }
}

@media (max-width: 380px) {
  .blob-home-brand {
    gap: 7px;
    font-size: 24px;
  }

  .blob-home-mark {
    width: 32px;
    height: 31px;
  }

  .blob-home-menu {
    margin-right: 4px;
  }

  .blob-home-header .btn-login {
    flex-basis: 74px;
    width: 74px;
    min-width: 74px;
    padding-right: 8px;
    padding-left: 8px;
    font-size: 14px;
  }
}