/* Partner Studio public landing page: small-iPhone containment. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

@media (max-width: 680px) {
  .marketing-view,
  .hero-section,
  .hero-copy,
  .hero-product {
    min-width: 0;
    max-width: 100%;
  }

  .hero-section {
    overflow: clip;
  }

  .hero-copy {
    width: 100%;
  }

  .hero-copy .eyebrow {
    max-width: 100%;
    justify-content: center;
    white-space: normal;
    font-size: 9px;
    line-height: 1.5;
    letter-spacing: 0.12em;
  }

  .hero-copy h1 {
    width: 100%;
    max-width: 100%;
    font-size: clamp(1.72rem, 8.75vw, 2.35rem);
    line-height: 1.04;
    letter-spacing: -0.055em;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }

  .hero-copy h1 span {
    display: inline;
  }

  .hero-copy > p {
    width: 100%;
    max-width: 34rem;
    font-size: 14px;
    line-height: 1.6;
    overflow-wrap: anywhere;
  }

  .hero-actions {
    width: 100%;
  }

  .hero-product {
    width: 100%;
    height: auto;
    margin-top: 34px;
    overflow: visible;
    transform: none;
  }

  .mobile-product-card {
    width: min(100%, 385px);
    min-width: 0;
    transform: none;
  }
}

@media (max-width: 360px) {
  .public-header {
    padding-left: 11px;
    gap: 10px;
  }

  .brand {
    min-width: 0;
  }

  .brand strong {
    font-size: 14px;
  }

  .brand small {
    font-size: 9px;
  }

  .hero-section {
    padding-inline: 14px;
  }

  .hero-copy h1 {
    font-size: clamp(1.62rem, 8.6vw, 1.92rem);
  }

  .hero-copy > p {
    font-size: 13px;
  }

  .mobile-product-card {
    min-height: 650px;
    padding: 16px 12px 14px;
    border-width: 6px;
    border-radius: 38px;
  }

  .phone-ambient {
    width: 100%;
  }

  .mobile-head {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 7px;
  }

  .mobile-head strong {
    font-size: 13px;
  }

  .mobile-head small {
    font-size: 9px;
  }

  .balance-card {
    padding: 16px 13px;
  }

  .balance-card strong {
    font-size: clamp(24px, 9vw, 29px);
  }

  .mobile-actions {
    gap: 2px;
  }

  .mobile-actions button {
    min-width: 0;
    font-size: 9px;
  }

  .mobile-actions i {
    width: clamp(42px, 14vw, 48px);
    height: clamp(42px, 14vw, 48px);
  }

  .mobile-list {
    padding-inline: 9px;
  }

  .mobile-dock {
    left: 10px;
    right: 10px;
    padding-inline: 7px;
  }

  .trust-row {
    font-size: 11px;
  }
}