html[data-runtime="ios"] {
  --mobile-safe-top: env(safe-area-inset-top, 0px);
  --mobile-safe-right: env(safe-area-inset-right, 0px);
  --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-safe-left: env(safe-area-inset-left, 0px);
  background: var(--brand-page, #eaf5f2);
}

html[data-runtime="ios"] body {
  min-height: 100dvh;
  padding-bottom: var(--mobile-safe-bottom);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

html[data-runtime="ios"] .topbar {
  top: calc(var(--mobile-safe-top) + 6px);
  width: calc(100% - var(--mobile-safe-left) - var(--mobile-safe-right) - 18px);
  margin-top: calc(var(--mobile-safe-top) + 6px);
}

html[data-runtime="ios"] .shell {
  padding-right: max(14px, var(--mobile-safe-right));
  padding-left: max(14px, var(--mobile-safe-left));
}

html[data-runtime="ios"] body[data-public-route="login"] .hero-copy,
html[data-runtime="ios"] body[data-public-route="login"] .landing-sections,
html[data-runtime="ios"] body[data-public-route="login"] .launch-rollout,
html[data-runtime="ios"] #publicNav,
html[data-runtime="ios"] #publicActions,
html[data-runtime="ios"] #publicFooter,
html[data-runtime="ios"] a[href="/setup"],
html[data-runtime="ios"] a[href="/#pricing"],
html[data-runtime="ios"] [data-mobile-purchase-action],
html[data-runtime="ios"] #manageSubscriptionOpen,
html[data-runtime="ios"] #subscriptionManageAction,
html[data-runtime="ios"] #subscribeButton {
  display: none !important;
}

html[data-runtime="ios"] body[data-public-route="login"] .hero-grid {
  display: block;
  min-height: auto;
  padding-top: 22px;
}

html[data-runtime="ios"] body[data-public-route="login"] #account {
  width: min(100%, 620px);
  margin: 0 auto;
}

html[data-runtime="ios"] input,
html[data-runtime="ios"] select,
html[data-runtime="ios"] textarea,
html[data-runtime="ios"] button {
  font-size: max(16px, 1em);
}

html[data-runtime="ios"] .mobile-only {
  display: initial;
}

html:not([data-runtime="ios"]) .mobile-only {
  display: none !important;
}

html[data-runtime="ios"] .account-danger-zone {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--brand-border-subtle);
}

html[data-runtime="ios"] .account-danger-zone p {
  color: var(--brand-text-soft);
}