/* Shared mobile polish for cosmos marketing pages (index, demo, research, etc.) */

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

body.public-mobile-chrome {
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

body.sticky-cta-visible {
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}

/* Nav chrome lives in site-nav.css */

@media (max-width: 720px) {
  body:not(.cosmos-app) main {
    padding-left: max(18px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(18px, env(safe-area-inset-right, 0px)) !important;
  }

  footer {
    padding-left: max(18px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(18px, env(safe-area-inset-right, 0px)) !important;
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Landing-specific mobile */
@media (max-width: 720px) {
  .landing-page .section {
    padding: 64px 0;
  }

  .landing-page .hero {
    padding: 100px 0 56px;
  }

  .landing-page .hero-kicker {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.16em;
    line-height: 1.5;
    padding: 0 8px;
  }

  .landing-page .hero-beta {
    margin-left: 0;
  }

  .landing-page .hero-sub {
    font-size: clamp(15px, 4.2vw, 17px);
    line-height: 1.5;
    padding: 0 2px;
  }

  .landing-page .hero-tagline {
    font-size: clamp(20px, 5.5vw, 26px);
    padding: 0 4px;
  }

  .landing-page .hero-graph-caption {
    letter-spacing: 0.14em;
    padding: 0 12px;
    line-height: 1.5;
  }

  .landing-page .hero-actions {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }

  .landing-page .hero-auth {
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  .landing-page .hero-auth::before {
    display: none;
  }

  .landing-page .hero-btn {
    width: 100%;
    max-width: 300px;
    min-height: 48px;
    padding: 12px 16px;
  }

  .landing-page .cred-strip {
    gap: 8px;
    padding: 0 4px;
  }

  .landing-page .cred-pill {
    font-size: 8px;
    letter-spacing: 0.1em;
    padding: 12px 14px;
    min-height: 44px;
    text-align: center;
    justify-content: center;
    flex: 1 1 calc(50% - 8px);
    max-width: 100%;
  }

  .landing-page .tracks {
    grid-template-columns: 1fr;
  }

  .landing-page .track .actions {
    flex-direction: column;
    align-items: stretch;
  }

  .landing-page .track .btn {
    width: 100%;
    text-align: center;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .landing-page .eco-grid,
  .landing-page .involve-grid {
    grid-template-columns: 1fr;
  }

  .landing-page .preview-frame {
    padding: 18px 16px;
  }

  .landing-page .preview-headline {
    font-size: 17px;
    line-height: 1.35;
  }

  .landing-page .install-wrap {
    padding: 0;
  }

  .landing-page .install-card {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .landing-page .install-card code {
    white-space: normal;
    word-break: break-all;
    font-size: 11px;
    line-height: 1.45;
  }

  .landing-page .install-copy {
    min-height: 44px;
    min-width: 64px;
  }

  .landing-page .sticky-cta {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 10px 16px max(12px, env(safe-area-inset-bottom, 0px));
  }

  .landing-page .sticky-cta a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 120px;
  }

  .landing-page .narrative {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .landing-page .narrative-stage {
    min-height: 220px;
    aspect-ratio: 4 / 3;
  }

  .landing-page .narrative-caption {
    min-height: auto;
    font-size: 15px;
  }

  .landing-page .example-cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .landing-page .cards {
    grid-template-columns: 1fr;
  }

  .landing-page .brief p {
    font-size: 16px;
  }

  .landing-page .faq-q {
    font-size: 17px;
  }

  .landing-page .lf-row {
    flex-direction: column;
    align-items: stretch;
  }

  .landing-page .lf-btn {
    width: 100%;
    min-height: 48px;
  }

  .landing-page .lf-input {
    min-height: 44px;
  }
}

@media (max-width: 720px) {
  body.sticky-cta-visible .release-badge {
    bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  }
}

/* Demo page */
@media (max-width: 720px) {
  .demo-page .week-grid {
    grid-template-columns: repeat(26, 1fr);
    gap: 1px;
  }

  .demo-page .demo-panel {
    padding: 18px 16px;
  }

  .demo-page .gps-heading {
    font-size: 19px;
    line-height: 1.3;
  }

  .demo-page .story-body {
    font-size: 15px;
  }

  .demo-page .cta-row {
    flex-direction: column;
  }

  .demo-page .cta-row .btn {
    width: 100%;
    text-align: center;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .demo-page .cards {
    grid-template-columns: 1fr;
  }
}

/* Docs + legacy prose pages */
@media (max-width: 720px) {
  body.cosmos-docs .docs-cta .btn,
  body.cosmos-docs .docs-cta .btn-pill {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }

  body.cosmos-docs .docs-chips {
    flex-direction: column;
  }

  body.cosmos-docs .docs-chip {
    justify-content: center;
    min-height: 44px;
  }

  body.cosmos-docs .docs-section pre {
    font-size: 11px;
    padding: 14px 16px;
    -webkit-overflow-scrolling: touch;
  }

  body.cosmos-docs .tiles {
    grid-template-columns: 1fr;
  }

  .prose-page .cred-row {
    flex-direction: column;
  }

  .prose-page .cred-pill {
    width: 100%;
    justify-content: center;
    min-height: 44px;
    text-align: center;
  }

  .prose-page .page-title {
    font-size: clamp(24px, 7vw, 32px);
  }

  .prose-page .lede,
  .prose-page .page-sub {
    font-size: 16px;
  }

  .prose-page h2 {
    margin-top: 40px;
    font-size: 18px;
  }

  .prose-page .cta-box {
    padding: 22px 18px;
  }

  .prose-page pre {
    font-size: 12px;
    padding: 14px 16px;
    -webkit-overflow-scrolling: touch;
  }

  .changelog-page .cl-head {
    padding: 112px 0 48px;
  }

  .changelog-page h1 {
    font-size: clamp(32px, 9vw, 48px);
  }

  .changelog-page nav {
    padding-top: max(12px, env(safe-area-inset-top, 0px)) !important;
  }
}

@media (max-width: 720px) {
  .scanlines {
    opacity: 0.35;
  }
}