/* ──────────────────────────────────────────────────────────────
   Mobile-first responsive layer — AI App Store marketing site
   Loaded after styles.css, royal.css, configurator.css
   ────────────────────────────────────────────────────────────── */

/* ── Nav chrome: icon-first CTAs, consistent Inter / Space Grotesk ── */
.nav-inner--royal {
  flex-wrap: nowrap;
  gap: clamp(0.5rem, 2vw, 1rem);
}

.nav-inner--royal .logo--royal {
  flex-shrink: 0;
  min-width: 0;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  margin-left: auto;
}

.nav-actions .btn--nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.8125rem;
  line-height: 1;
  padding: 0.5rem 0.875rem;
  white-space: nowrap;
  min-height: 40px;
  border-radius: var(--radius-pill);
}

.nav-actions .btn--nav svg,
.nav-actions .btn--nav i svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke-width: 2;
}

.nav-actions .btn--nav-icon svg {
  width: 20px;
  height: 20px;
}

.nav-actions .btn--nav-icon {
  width: 40px;
  min-width: 40px;
  padding: 0;
}

.nav-actions .btn--nav-cta .nav-btn__label {
  display: inline;
}

.mobile-menu nav a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  text-transform: none;
}

.btn--mobile-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 500;
  white-space: nowrap;
  width: 100%;
}

.btn--mobile-action svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .desktop-nav--royal {
    display: flex !important;
    flex: 1 1 auto;
    justify-content: center;
    align-items: center;
    gap: clamp(0.65rem, 1.8vw, 1.5rem);
    min-width: 0;
    margin-inline: 0.25rem;
  }

  .menu-toggle {
    display: none !important;
  }

  .mobile-menu {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .menu-toggle {
    display: flex;
    flex-shrink: 0;
  }
}

@media (min-width: 768px) and (max-width: 960px) {
  .nav-actions .btn--nav-cta .nav-btn__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .nav-actions .btn--nav-cta {
    width: 40px;
    min-width: 40px;
    padding: 0;
  }
}

/* Main: room for fixed mobile CTA + home indicator */
#main-content {
  padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 768px) {
  #main-content {
    padding-bottom: 0;
  }
}

/* Section rhythm — full-screen panels use immersive-sections.css */
.workloads-light:not(.section-panel),
.hero:not(.section-panel),
.logo-cloud:not(.section-panel),
.categories:not(.section-panel),
.apps:not(.section-panel),
.why:not(.section-panel),
.how:not(.section-panel),
.stats:not(.section-panel),
.code-showcase-section.section-panel,
.reviews:not(.section-panel),
.pricing:not(.section-panel),
.faq:not(.section-panel),
.cta-final:not(.section-panel) {
  padding-block: var(--space-section-y);
}

.hero:not(.section-panel) {
  padding-block-start: clamp(4.5rem, 14vw, 6rem);
}

#hero.section-panel {
  padding-block-start: clamp(5.5rem, 16vw, 8.5rem);
}

/* Typography: prevent overflow on narrow viewports */
h1, h2, h3 {
  overflow-wrap: break-word;
  hyphens: auto;
}

p {
  max-width: min(var(--line-prose), 100%);
}

/* Nav mobile: theme + menu; auth in drawer */
@media (max-width: 767px) {
  .nav-inner {
    gap: 0.5rem;
  }

  .nav-actions .btn--nav {
    display: none;
  }

  .logo__tagline--royal {
    display: none;
  }

  .logo__wordmark--royal {
    font-size: clamp(1rem, 4.2vw, 1.125rem);
  }

  .logo__crest.brand-mark {
    width: 38px;
    height: 38px;
    box-shadow:
      0 0 0 3px rgba(124, 58, 237, 0.15),
      0 0 24px rgba(34, 211, 238, 0.3);
  }

  .logo__crest:not(.brand-mark) svg {
    width: 18px;
    height: 18px;
  }
}

/* Category pills: horizontal scroll on small screens */
.category-pills {
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  gap: 0.5rem;
  padding-bottom: 0.35rem;
  margin-inline: calc(-1 * var(--space-page-x));
  padding-inline: max(var(--space-page-x), env(safe-area-inset-left, 0px));
  scrollbar-width: thin;
}

.category-pills .pill {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

@media (min-width: 640px) {
  .category-pills {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
}

/* App cards */
.app-card__footer {
  flex-wrap: wrap;
  gap: 0.75rem;
}

.app-card__footer .btn {
  width: 100%;
}

@media (min-width: 400px) {
  .app-card__footer .btn {
    width: auto;
  }
}

/* Hero CTAs: full-width buttons on narrow phones */
.hero__ctas {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.hero__ctas .btn {
  width: 100%;
}

@media (min-width: 480px) {
  .hero__ctas {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    width: auto;
  }

  .hero__ctas .btn {
    width: auto;
    flex: 1 1 auto;
    min-width: min(100%, 12rem);
  }
}

/* Pricing toggle & billing */
.pricing-toggle,
.pricing__billing {
  flex-wrap: wrap;
  row-gap: 0.5rem;
}

.pricing__billing button {
  min-height: 44px;
}

/* Forms: stack on mobile */
.cta-form,
.newsletter-form {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
}

.cta-form input[type="email"],
.newsletter-form input[type="email"] {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

.cta-form .btn,
.newsletter-form .btn {
  width: 100%;
}

@media (min-width: 480px) {
  .cta-form,
  .newsletter-form {
    flex-direction: row;
    max-width: 480px;
  }

  .cta-form .btn,
  .newsletter-form .btn {
    width: auto;
    flex-shrink: 0;
  }
}

/* FAQ */
.faq__question {
  font-size: clamp(0.9rem, 2.8vw, 1rem);
  padding: 1rem 1rem;
}

/* Carousel */
.carousel__slide p {
  font-size: clamp(1rem, 3.5vw, 1.1rem);
}

/* Footer newsletter */
.footer__newsletter .newsletter-form {
  max-width: 100%;
}

/* Sticky CTA respects safe area */
.mobile-sticky-cta {
  padding: 0.75rem max(1rem, env(safe-area-inset-right, 0px))
    calc(0.75rem + env(safe-area-inset-bottom, 0px))
    max(1rem, env(safe-area-inset-left, 0px));
}

.mobile-sticky-cta .btn {
  flex: 1 1 0;
  min-width: 0;
}

/* Timeline stays vertical until tablet landscape */
@media (min-width: 768px) and (max-width: 1023px) {
  .timeline {
    flex-direction: column;
    gap: 2rem;
  }

  .timeline__item {
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
  }
}

/* Stat numbers scale down slightly on phones */
@media (max-width: 479px) {
  .stat-card__number {
    font-size: 1.75rem;
  }

  .stat-card {
    padding: 1.25rem;
  }
}

/* Reduced horizontal bleed from orbit scroll */
.apps--royal .container {
  overflow: visible;
}