/* Shared mobile navigation, footer and gallery controls on all public pages. */
.mobile-menu-backdrop { position: fixed; z-index: 19; inset: 0; padding: 0; border: 0; background: rgba(0, 9, 20, .65); }
.mobile-menu-backdrop[hidden] { display: none; }
html.is-mobile-menu-open, body.is-mobile-menu-open { overflow: hidden; overscroll-behavior: none; }
@media (max-width: 767px) {
  /* Burger menu (mockup «Component 12»): a 250px panel, rows centred like on tablets (requested
     23.10), plain chevrons, the open section tinted and its models indented under it. */
  .mobile-site-nav {
    margin-top: 0;
  }

  .mobile-site-nav__inner {
    width: 250px;
    padding: 20px 16px;
  }

  .mobile-site-nav__list {
    gap: 16px;
  }

  .mobile-site-nav__item a,
  .mobile-site-nav__item.is-active a {
    justify-content: center;
    min-height: 40px;
    padding: 10px 16px;
    border-radius: 16px;
    text-align: center;
  }

  .mobile-site-nav__item.is-active a {
    background-color: rgba(0, 188, 138, 0.2);
  }

  /* Only the label opens the Work Area; the rest of the row is the toggle underneath it, so a near miss
     expands the models instead of navigating away. The label keeps 40px clear of the chevron on both sides. */
  .mobile-site-nav__item--model-menu {
    row-gap: 16px;
  }

  .mobile-site-nav__item--model-menu > a,
  .mobile-site-nav__item--model-menu.is-active > a {
    position: relative;
    z-index: 1;
    justify-self: center;
    max-width: calc(100% - 80px);
    min-height: 40px;
    padding: 10px 16px;
    border-radius: 16px;
  }

  .mobile-site-nav__models-toggle {
    justify-self: stretch;
    width: 100%;
    height: 40px;
    padding-right: 12px;
    justify-items: end;
    background: transparent;
    border: 0;
    border-radius: 16px;
  }

  .mobile-site-nav__item--model-menu:has(> [aria-expanded="true"]) > a,
  .mobile-site-nav__item--model-menu:has(> [aria-expanded="true"]) > .mobile-site-nav__models-toggle {
    color: #48deaa;
  }

  .mobile-site-nav__item--model-menu:has(> [aria-expanded="true"]) > .mobile-site-nav__models-toggle {
    background-color: rgba(0, 188, 138, 0.2);
  }

  .mobile-site-nav__dropdown {
    padding: 0 0 0 32px;
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  .mobile-site-nav__dropdown-group + .mobile-site-nav__dropdown-group {
    margin-top: 8px;
    padding-top: 8px;
  }

  .mobile-site-nav__dropdown-provider {
    padding: 8px 0 4px;
  }

  .mobile-site-nav__list .mobile-site-nav__dropdown-model,
  .mobile-site-nav__list .mobile-site-nav__item.is-active .mobile-site-nav__dropdown-model {
    padding: 12px 0;
    color: var(--lp-on-surface-variant, #a8b3c2);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
  }

  /* Home and top creators: gallery tabs, type filter, cards */
  .features-video-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin-bottom: 32px;
  }

  /* Tabs share the row with one fixed gap, so wide phones get wider chips instead of wider gaps. */
  .features-video-tabs {
    flex-wrap: nowrap;
    gap: 8px;
  }

  .features-video-tab {
    flex: 1 1 auto;
  }

  .features-video-tab {
    background-color: var(--lp-surface-bright, #1a2a3b);
    color: var(--lp-on-surface, #e6e9ed);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.1px;
  }

  .features-video-tab.is-active {
    border-color: var(--lp-on-surface-variant, #a8b3c2);
    background: linear-gradient(rgba(230, 233, 237, 0.2), rgba(230, 233, 237, 0.2)), var(--lp-surface-bright, #1a2a3b);
    color: var(--lp-on-surface, #e6e9ed);
  }

  .features-media-filter {
    flex: none;
    margin-left: 0;
  }

  .features-media-filter__toggle {
    min-height: 36px;
    padding: 8px 16px;
    border-radius: 8px;
    background: var(--lp-surface-bright, #1a2a3b);
    color: var(--lp-on-surface, #e6e9ed);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.1px;
  }

  .features-grid,
  .features-grid__column {
    gap: 8px;
  }

  .features-grid.section-bottom-gradient {
    --gallery-gap: 8;
    row-gap: 0;
  }

  /* Footer: menu rows 36 apart, social buttons 32 apart, as in «Footer 375». */
  .footer-menu {
    row-gap: 0;
  }

  .footer-socials {
    gap: 32px;
  }

}