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);

  /* Native visual language: subdued sea glass wrapped in polished steel. */
  --pm-foundation: #d7dfe1;
  --pm-foundation-raised: #f4f7f7;
  --pm-foundation-soft: #a9b5b8;
  --pm-foundation-text: #263b40;
  --pm-steel: #53676b;
  --pm-steel-muted: #9caaad;
  --brand-background-start: #e6eceb;
  --brand-background-middle: #f5f7f6;
  --brand-background-end: #dbe4e3;
  --brand-surface: rgba(247, 249, 249, 0.93);
  --brand-surface-strong: #f8faf9;
  --brand-surface-subtle: #e9efee;
  --brand-surface-tint: #dfe9e7;
  --brand-input-background: rgba(250, 252, 251, 0.92);
  --brand-text: #263a3f;
  --brand-text-muted: #6b7c80;
  --brand-text-soft: #4b6064;
  --brand-accent: #4b7778;
  --brand-accent-hover: #3d6264;
  --brand-accent-soft: rgba(75, 119, 120, 0.16);
  --brand-service: #5c8580;
  --brand-service-dark: #436762;
  --brand-service-soft: #dce9e6;
  --brand-highlight: #567d78;
  --brand-review: #ba9d64;
  --brand-review-dark: #80683d;
  --brand-review-soft: #eee7d8;
  --brand-badge-background: #dce9e6;
  --brand-badge-text: #436762;
  --brand-border: rgba(54, 74, 79, 0.25);
  --brand-border-input: rgba(54, 74, 79, 0.34);
  --brand-border-subtle: rgba(54, 74, 79, 0.15);
  --brand-grid-line: rgba(66, 89, 94, 0.09);
  --brand-overlay-soft: rgba(249, 251, 250, 0.72);
  --brand-shadow: 0 22px 52px rgba(36, 54, 59, 0.14);
  --brand-shadow-soft: 0 12px 30px rgba(36, 54, 59, 0.10);
  --brand-shadow-button: 0 7px 16px rgba(53, 81, 84, 0.19);
  --brand-shadow-review: 0 9px 22px rgba(92, 76, 45, 0.15);
  --brand-primary-gradient: linear-gradient(145deg, #5f8582, #41696b);
  --brand-service-gradient: linear-gradient(145deg, #6b908b, #4c716d);
  --brand-review-gradient: linear-gradient(145deg, #d5c39e, #ae9059);
  --brand-background-gradient: linear-gradient(155deg, #e6eceb, #f5f7f6 48%, #dbe4e3);
  --brand-radius-control: 14px;
  --brand-radius-card: 22px;
  --brand-radius-panel: 30px;
  --brand-radius-large: 40px;
  background: #e6eceb;
}

html[data-runtime="ios"] body {
  min-height: 100dvh;
  padding-bottom: var(--mobile-safe-bottom);
  background:
    radial-gradient(circle at 14% 4%, rgba(255, 255, 255, 0.82), transparent 28%),
    radial-gradient(circle at 90% 20%, rgba(116, 153, 149, 0.12), transparent 34%),
    var(--brand-background-gradient);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

html[data-runtime="ios"] .app-frame::before {
  height: calc(var(--mobile-safe-top) + 82px);
  background: rgba(232, 238, 238, 0.78);
  -webkit-backdrop-filter: blur(22px) saturate(112%);
  backdrop-filter: blur(22px) saturate(112%);
}

html[data-runtime="ios"] .topbar {
  position: sticky;
  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);
  border-color: rgba(62, 81, 85, 0.42);
  border-radius: 24px;
  background:
    linear-gradient(104deg, rgba(255, 255, 255, 0.66), transparent 34%, rgba(73, 94, 99, 0.10) 56%, rgba(255, 255, 255, 0.40) 82%),
    linear-gradient(180deg, #f7f9f9 0%, #d5dddf 46%, #b8c4c7 54%, #e9eeee 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -1px 0 rgba(55, 75, 80, 0.18),
    0 7px 20px rgba(37, 55, 60, 0.14);
}

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"] .landing-discovery-bar,
html[data-runtime="ios"] a[href="/setup"],
html[data-runtime="ios"] a[href="/#pricing"],
html[data-runtime="ios"] [data-mobile-purchase-action] {
  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"] .auth-shell,
html[data-runtime="ios"] .panel,
html[data-runtime="ios"] .metric,
html[data-runtime="ios"] .tenantbar,
html[data-runtime="ios"] .prose-card,
html[data-runtime="ios"] .support-card,
html[data-runtime="ios"] .legal-modal,
html[data-runtime="ios"] .support-dialog {
  border-color: rgba(65, 86, 91, 0.25);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(230, 236, 236, 0.58)),
    var(--brand-surface);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.90),
    0 12px 30px rgba(36, 54, 59, 0.10);
  -webkit-backdrop-filter: blur(20px) saturate(108%);
  backdrop-filter: blur(20px) saturate(108%);
}

html[data-runtime="ios"] .auth-shell,
html[data-runtime="ios"] .panel,
html[data-runtime="ios"] .tenantbar,
html[data-runtime="ios"] .legal-modal,
html[data-runtime="ios"] .support-dialog {
  border-radius: var(--brand-radius-panel);
}

html[data-runtime="ios"] .metric,
html[data-runtime="ios"] .customer,
html[data-runtime="ios"] .message-history-entry,
html[data-runtime="ios"] .workspace-details-card {
  border-color: rgba(65, 86, 91, 0.20);
  border-radius: var(--brand-radius-card);
  background: linear-gradient(145deg, rgba(250, 252, 251, 0.92), rgba(229, 236, 235, 0.84));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 6px 16px rgba(36, 54, 59, 0.07);
}

html[data-runtime="ios"] input,
html[data-runtime="ios"] select,
html[data-runtime="ios"] textarea {
  border-color: rgba(63, 84, 89, 0.30);
  border-radius: var(--brand-radius-control);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(239, 244, 243, 0.92));
  box-shadow:
    inset 0 1px 2px rgba(38, 56, 61, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.72);
}

html[data-runtime="ios"] .button,
html[data-runtime="ios"] button,
html[data-runtime="ios"] .workspace-action-pill {
  border-radius: var(--brand-radius-control);
}

html[data-runtime="ios"] .button-primary,
html[data-runtime="ios"] button[type="submit"]:not(.button-secondary):not(.button-quiet) {
  border: 1px solid rgba(42, 69, 71, 0.38);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 48%),
    var(--brand-primary-gradient);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 6px 14px rgba(48, 75, 77, 0.18);
}

html[data-runtime="ios"] .button-secondary,
html[data-runtime="ios"] .workspace-action-pill,
html[data-runtime="ios"] .modal-close {
  border: 1px solid rgba(65, 86, 91, 0.30);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(219, 227, 228, 0.90));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 3px 8px rgba(36, 54, 59, 0.10);
}

html[data-runtime="ios"] .message-editor-tabs {
  border-radius: var(--brand-radius-control);
  background: rgba(220, 228, 227, 0.76);
  box-shadow: inset 0 1px 3px rgba(44, 63, 68, 0.10);
}

html[data-runtime="ios"] .message-editor-tab.is-active {
  margin: 3px;
  min-height: 38px;
  border-radius: 11px;
  background: linear-gradient(180deg, #f9fbfa, #dce4e4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 2px 7px rgba(38, 56, 61, 0.14);
  color: var(--brand-text);
}

html[data-runtime="ios"] .billing-banner,
html[data-runtime="ios"] .security-banner {
  border: 1px solid rgba(128, 104, 61, 0.25);
  border-radius: var(--brand-radius-card);
  background: rgba(238, 231, 216, 0.88);
}

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);
}