/* Mobile polish for long-page screenshots and real smartphone viewing. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.form-field select {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: #10253d;
  font: inherit;
  padding: 11px 12px;
}

body,
main,
section,
.wrap,
.hero,
.hero-grid,
.hero-visual,
.hero-device,
.device-body,
.bubble-stack,
.card,
.price-card,
.final-cta,
.world-card,
.screen-card {
  min-width: 0;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

.screen-shot img,
.world-img img,
.final-visual img,
.cotoa-hero {
  object-fit: contain;
}

.hero h1,
.hero-lead,
.lead,
.assist-note,
.section h2,
.card h3,
.card p,
.bubble,
.task-card,
.price,
.spec-item,
.addon,
.details-body,
.law-row,
.footer {
  overflow-wrap: anywhere;
  word-break: normal;
}

.screen-shot img {
  object-fit: contain;
  object-position: top center;
}

@media (max-width: 640px) {
  .topbar-inner,
  .brand,
  .brand-title {
    min-width: 0;
  }

  .brand {
    flex: 1 1 auto;
    overflow: hidden;
  }

  .brand strong,
  .brand small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .brand small,
  .top-actions .btn-small {
    display: none;
  }

  .top-actions {
    flex: 0 0 auto;
  }

  .hero h1 {
    font-size: clamp(38px, 10.6vw, 48px);
    letter-spacing: -.07em;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  .hero-lead {
    font-size: 15px;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  .chips {
    max-width: 100%;
  }

  .chip {
    max-width: 100%;
  }

  .device-body {
    grid-template-columns: minmax(0, 1fr) 88px;
  }

  .bubble {
    max-width: 100%;
  }

  .spec-item,
  .addon {
    min-width: 0;
  }

  .spec-item b,
  .addon span {
    min-width: 0;
  }
}

@media (max-width: 430px) {
  .world-img {
    display: none;
  }

  .screen-head {
    align-items: flex-start;
  }

  .screen-shot img {
    height: 360px;
    object-fit: contain;
    object-position: top center;
  }

  .final-visual {
    display: none;
  }

  .final-cta {
    padding: 20px;
  }

  .sticky-cta .wrap {
    grid-template-columns: 1fr 1fr;
  }

  .sticky-cta .btn {
    min-height: 44px;
    padding: 0 12px;
    font-size: 13px;
  }
}

@media (max-width: 360px) {
  .hero h1 {
    font-size: 35px;
  }

  .device-body {
    grid-template-columns: minmax(0, 1fr) 74px;
  }

  .cotoa-hero {
    max-height: 200px;
  }
}