/* Magnet Studio M32 — iPhone-first native web app layer.
   The public website, Account Center and editor keep their visual identity,
   but use iOS-sized copy, touch targets, safe areas and bottom-sheet behavior. */

:root {
  --m32-safe-top: max(10px, env(safe-area-inset-top));
  --m32-safe-right: max(12px, env(safe-area-inset-right));
  --m32-safe-bottom: max(14px, env(safe-area-inset-bottom));
  --m32-safe-left: max(12px, env(safe-area-inset-left));
  --m32-native-radius: 30px;
  --m32-native-copy: 16.5px;
  --m32-native-small: 13px;
  --m32-native-micro: 11px;
  --m32-native-control: 56px;
}

html[data-display-mode='standalone'] {
  background: #f4f6fb;
}

html[data-display-mode='standalone'] body {
  min-height: 100dvh;
  overscroll-behavior-y: none;
}

@media (max-width: 780px) {
  html {
    min-width: 320px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--m32-safe-top) + 86px);
  }

  body {
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overscroll-behavior-y: contain;
  }

  button,
  a,
  summary,
  input,
  select,
  textarea {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Floating public app bar. */
  .ms-header {
    min-height: 68px !important;
    padding: 9px 10px 9px 12px !important;
    top: var(--m32-safe-top) !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 52px rgba(25,39,80,.17), inset 0 1px 0 rgba(255,255,255,.95) !important;
  }
  .ms-brand { gap: 9px !important; }
  .ms-brand__mark { width: 43px !important; height: 43px !important; }
  .ms-brand > span:last-child { display: flex !important; align-items: baseline !important; gap: 4px !important; }
  .ms-brand > span:last-child b { font-size: 13.5px !important; }
  .ms-brand > span:last-child small { display: inline !important; margin: 0 !important; font-size: 8px !important; letter-spacing: .04em !important; }
  .ms-header__actions { gap: 7px !important; }
  .ms-cart-link,
  .ms-menu {
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    border-radius: 16px !important;
  }
  .ms-cart-link svg,
  .ms-menu svg { width: 21px !important; height: 21px !important; }
  .ms-mobile-nav {
    top: calc(var(--m32-safe-top) + 74px) !important;
    padding: 13px !important;
    border-radius: 27px !important;
    box-shadow: 0 28px 70px rgba(21,35,75,.23), inset 0 1px 0 rgba(255,255,255,.92) !important;
  }
  .ms-mobile-nav a {
    min-height: 58px !important;
    padding: 0 17px !important;
    border-radius: 18px !important;
    font-size: 17px !important;
    font-weight: 780 !important;
  }

  .m16-home,
  .m17-page,
  .ms-dashboard,
  .ms-commerce {
    padding-top: calc(var(--m32-safe-top) + 92px) !important;
  }

  .ms-button,
  .m16-primary,
  .m23-primary,
  .m23-secondary {
    min-height: var(--m32-native-control) !important;
    padding-inline: 19px !important;
    border-radius: 18px !important;
    font-size: 15px !important;
  }
  .ms-button svg,
  .m16-primary svg,
  .m23-primary svg,
  .m23-secondary svg { width: 20px !important; height: 20px !important; }

  /* Public homepage — preserve hero scale, enlarge everything supporting it. */
  .m16-eyebrow,
  .m16-section-label,
  .m17-label {
    font-size: 11.5px !important;
    letter-spacing: .13em !important;
  }
  .m16-eyebrow svg,
  .m17-label svg { width: 18px !important; height: 18px !important; }
  .m16-hero__copy > p,
  .m17-hero__copy > p {
    font-size: 17px !important;
    line-height: 1.68 !important;
  }
  .m16-text-link,
  .m17-link {
    min-height: 48px !important;
    font-size: 15px !important;
  }
  .m16-text-link svg,
  .m17-link svg { width: 19px !important; height: 19px !important; }
  .m16-hero__micro {
    gap: 9px !important;
    font-size: 12.5px !important;
  }
  .m16-hero__micro span {
    min-height: 38px;
    padding: 7px 10px;
    border: 1px solid rgba(35,52,94,.08);
    border-radius: 999px;
    background: rgba(255,255,255,.62);
  }
  .m16-hero__micro svg { width: 16px !important; height: 16px !important; }
  .m16-hero__badge,
  .m17-hero__badge { font-size: 11px !important; padding: 10px 13px !important; }
  .m16-hero__badge svg,
  .m17-hero__badge svg { width: 17px !important; height: 17px !important; }
  .m16-hero__studio-card header span { font-size: 10px !important; }
  .m16-hero__studio-card header b { font-size: 17px !important; }
  .m16-hero__studio-card footer { font-size: 10.5px !important; }
  .m16-hero__studio-card footer svg { width: 14px !important; height: 14px !important; }

  .m16-trust,
  .m23-trust-strip,
  .m18-rail {
    scroll-padding-inline: var(--m32-safe-left);
  }
  .m16-trust article,
  .m18-rail article {
    min-width: 84vw !important;
    min-height: 94px !important;
    padding: 18px !important;
    gap: 14px !important;
  }
  .m16-trust article > span,
  .m18-rail article > span {
    width: 46px !important;
    height: 46px !important;
    border-radius: 15px !important;
  }
  .m16-trust svg,
  .m18-rail svg { width: 23px !important; height: 23px !important; }
  .m16-trust b,
  .m18-rail b { font-size: 15px !important; }
  .m16-trust small,
  .m18-rail small { font-size: 12.5px !important; line-height: 1.42 !important; }

  .m16-manifesto p,
  .m16-section-head > p,
  .m16-studio-story__copy > p,
  .m16-sheet-story__copy > p,
  .m16-production__copy > p,
  .m16-final p,
  .m17-section-head > p,
  .m17-product-row__copy > p,
  .m17-dark-story p,
  .m17-deep-dive__copy > p,
  .m17-proof-story__copy > p,
  .m17-volume__copy > p,
  .m17-photo-guide__copy > p,
  .m17-support-human__copy > p,
  .m17-b2b-workspace__copy > p,
  .m17-b2b-volume__copy > p {
    font-size: var(--m32-native-copy) !important;
    line-height: 1.68 !important;
  }

  .m16-smartcut__steps article,
  .m16-products__grid > article,
  .m17-product-row,
  .m17-process__list article,
  .m17-mini-grid span,
  .m17-faq details {
    border-radius: 24px !important;
  }
  .m16-smartcut__steps article > div:last-child { padding: 20px 10px 12px !important; }
  .m16-smartcut__steps b { font-size: 19px !important; }
  .m16-smartcut__steps p { font-size: 15px !important; line-height: 1.58 !important; }
  .m16-step-number { width: 42px !important; height: 42px !important; font-size: 11px !important; }
  .m16-smartcut__promise {
    grid-template-columns: auto 1fr !important;
    padding: 17px !important;
    border-radius: 20px !important;
  }
  .m16-smartcut__promise > svg { width: 28px !important; height: 28px !important; }
  .m16-smartcut__promise b { font-size: 14.5px !important; }
  .m16-smartcut__promise span { font-size: 12.5px !important; line-height: 1.48 !important; }
  .m16-smartcut__promise a {
    grid-column: 1 / -1;
    min-height: 48px;
    justify-content: center;
    border-radius: 15px;
    background: rgba(255,255,255,.66);
    font-size: 14px !important;
  }

  .m16-product__copy { padding: 22px 12px 14px !important; }
  .m16-product__copy > small,
  .m16-product__visual > span { font-size: 11px !important; }
  .m16-product__visual > span svg { width: 17px !important; height: 17px !important; }
  .m16-product__copy p { font-size: 15.5px !important; line-height: 1.62 !important; }
  .m16-product__copy a { min-height: 48px; font-size: 14.5px !important; }
  .m16-product__copy a svg { width: 18px !important; }
  .m16-studio-story li { font-size: 14.5px !important; line-height: 1.45 !important; }
  .m16-studio-story li svg { width: 20px !important; flex: 0 0 auto; }
  .m16-sheet-facts span { min-height: 76px !important; padding: 14px !important; }
  .m16-sheet-facts b { font-size: 15px !important; }
  .m16-sheet-facts small { font-size: 12px !important; }
  .m16-production__points span { min-height: 48px; font-size: 14px !important; }
  .m16-production__points svg { width: 21px !important; height: 21px !important; }

  /* Public information pages. */
  .m17-product-row__copy { padding: 20px 12px 27px !important; }
  .m17-product-row__visual > span { font-size: 11px !important; padding: 9px 12px !important; }
  .m17-product-row__visual > span svg { width: 17px !important; }
  .m17-product-facts { gap: 8px !important; }
  .m17-product-facts span { min-height: 38px; padding: 8px 11px !important; font-size: 12px !important; }
  .m17-product-facts svg { width: 16px !important; }
  .m17-process__list article { min-width: min(88vw,390px) !important; min-height: 430px !important; }
  .m17-process__number { width: 44px !important; height: 44px !important; font-size: 11.5px !important; }
  .m17-process__copy > svg { width: 27px !important; height: 27px !important; }
  .m17-process__copy p { font-size: 15px !important; line-height: 1.6 !important; }
  .m17-mini-grid span { min-height: 100px !important; padding: 17px !important; }
  .m17-mini-grid svg { width: 23px !important; height: 23px !important; }
  .m17-mini-grid b { font-size: 14px !important; }
  .m17-mini-grid small { font-size: 12px !important; }
  .m17-dark-story li,
  .m17-proof-story__copy li { min-height: 42px; font-size: 14px !important; }
  .m17-dark-story li svg,
  .m17-proof-story__copy li svg { width: 20px !important; flex: 0 0 auto; }
  .m17-proof-card > span { font-size: 10.5px !important; }
  .m17-proof-card b { font-size: 16px !important; }
  .m17-proof-card small { font-size: 12px !important; }
  .m17-local-strip {
    grid-template-columns: auto 1fr !important;
    padding: 18px !important;
  }
  .m17-local-strip b { font-size: 14.5px !important; }
  .m17-local-strip span { font-size: 12.5px !important; }
  .m17-local-strip > svg { width: 28px !important; height: 28px !important; }
  .m17-local-strip > a { grid-column: 1 / -1; }
  .m17-control > b { font-size: 14px !important; }
  .m17-control button { min-height: 54px !important; font-size: 14px !important; }
  .m17-calculator__summary > span { font-size: 11.5px !important; }
  .m17-calculator__summary > p { font-size: 14.5px !important; }
  .m17-calculator__summary > em { min-height: 40px; font-size: 12px !important; }
  .m17-compare__table > div.is-head { font-size: 10.5px !important; }
  .m17-compare__table span { font-size: 13px !important; }
  .m17-faq summary {
    min-height: 68px;
    padding: 18px !important;
    font-size: 16px !important;
  }
  .m17-faq details p { padding: 0 18px 20px !important; font-size: 15px !important; }

  /* Account Center becomes a native, thumb-friendly workspace. */
  .m23-account-shell {
    width: 100% !important;
    margin: 8px auto calc(80px + var(--m32-safe-bottom)) !important;
    padding: 0 var(--m32-safe-right) 0 var(--m32-safe-left) !important;
  }
  .m23-kicker { font-size: 11.5px !important; }
  .m23-kicker svg { width: 19px !important; height: 19px !important; }
  .m23-account-hero { padding: 34px 22px 26px !important; border-radius: 31px !important; }
  .m23-account-hero__copy > p { font-size: 16.5px !important; line-height: 1.68 !important; }
  .m23-account-hero__actions { gap: 10px !important; }
  .m23-security-card { min-height: 116px; padding: 16px !important; border-radius: 23px !important; }
  .m23-security-card small { font-size: 10px !important; }
  .m23-security-card b { font-size: 15px !important; }
  .m23-security-card p { font-size: 12px !important; line-height: 1.42 !important; }
  .m23-security-card > button { min-height: 44px; font-size: 12.5px !important; }
  .m23-trust-strip article {
    min-width: 82vw !important;
    min-height: 98px !important;
    padding: 18px !important;
  }
  .m23-trust-strip article > span { width: 46px !important; height: 46px !important; }
  .m23-trust-strip svg { width: 22px !important; }
  .m23-trust-strip b { font-size: 14.5px !important; }
  .m23-trust-strip small { font-size: 12px !important; }

  .m23-account-layout { margin-top: 14px !important; }
  .m23-account-nav {
    position: sticky !important;
    top: calc(var(--m32-safe-top) + 78px) !important;
    z-index: 45 !important;
    padding: 8px !important;
    border-radius: 22px !important;
    background: rgba(249,251,255,.88) !important;
    box-shadow: 0 16px 38px rgba(30,44,84,.12), inset 0 1px 0 #fff !important;
    -webkit-backdrop-filter: blur(25px) saturate(160%);
    backdrop-filter: blur(25px) saturate(160%);
  }
  .m23-account-nav nav button {
    min-width: 124px !important;
    min-height: 52px !important;
    padding: 0 13px !important;
    border-radius: 16px !important;
    font-size: 13.5px !important;
  }
  .m23-account-nav nav button svg { width: 20px !important; height: 20px !important; }
  .m23-account-content { margin-top: 14px !important; }
  .m23-kpi-grid {
    display: flex !important;
    gap: 10px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .m23-kpi-grid::-webkit-scrollbar { display: none; }
  .m23-kpi-grid article,
  .m23-kpi-grid article:nth-child(3),
  .m23-kpi-grid article:nth-child(4) {
    display: block !important;
    min-width: 66vw !important;
    min-height: 154px !important;
    padding: 20px !important;
    scroll-snap-align: start;
  }
  .m23-kpi-grid article > span { width: 44px !important; height: 44px !important; }
  .m23-kpi-grid svg { width: 21px !important; }
  .m23-kpi-grid small { font-size: 10.5px !important; }
  .m23-kpi-grid strong { font-size: 34px !important; }
  .m23-kpi-grid p { font-size: 11.5px !important; }
  .m23-panel { padding: 21px 17px !important; border-radius: 27px !important; }
  .m23-panel-head > div > span { font-size: 10px !important; }
  .m23-panel-head h2 { font-size: 30px !important; }
  .m23-panel-head p { font-size: 14px !important; line-height: 1.58 !important; }
  .m23-panel-head > button:not(.m23-primary) { min-height: 44px; font-size: 13px !important; }
  .m23-project-grid > .m23-project-card,
  .m23-project-grid.is-full > .m23-project-card { min-width: 88% !important; }
  .m23-project-card__visual > span { font-size: 10.5px !important; }
  .m23-project-card__meta { font-size: 9.5px !important; }
  .m23-project-card__body { padding: 19px !important; }
  .m23-project-card__body h3 { font-size: 21px !important; }
  .m23-project-card__body > p { font-size: 13px !important; }
  .m23-status,
  .m23-project-card footer button,
  .m23-project-card footer button b { font-size: 11.5px !important; }
  .m23-project-card footer button { min-height: 44px; }
  .m23-empty p { font-size: 14px !important; line-height: 1.6 !important; }
  .m23-proof-flow > span b { font-size: 11.5px !important; }
  .m23-proof-flow > span small { display: block !important; font-size: 9.5px !important; }
  .m23-proof-overview > p,
  .m23-account-roadmap > p { font-size: 13px !important; }
  .m23-order-list article { min-height: 98px !important; padding: 17px !important; }
  .m23-order-list small { font-size: 10px !important; }
  .m23-order-list b { font-size: 14px !important; }
  .m23-order-list p { font-size: 11px !important; }
  .m23-proof-list small { font-size: 9.5px !important; }
  .m23-proof-list h3 { font-size: 18px !important; }
  .m23-proof-list p { font-size: 11px !important; }
  .m23-account-shell label > span { font-size: 12.5px !important; }
  .m23-account-shell input { min-height: 56px !important; font-size: 16px !important; }
  .m23-account-modal {
    max-height: min(92dvh, var(--m32-viewport-height, 92dvh)) !important;
    border-radius: 32px 32px 0 0 !important;
  }
  .m23-account-modal__visual p,
  .m23-account-modal__form > p { font-size: 14px !important; line-height: 1.58 !important; }
  .m23-account-modal__form label > span { font-size: 12.5px !important; }

  /* Editor: larger type and controls, same compact bottom-sheet architecture. */
  .m11-studio {
    --m11-appbar: 66px !important;
    --m11-dock: 78px !important;
    --m11-sheet-expanded: min(59dvh, 610px) !important;
  }
  .m11-studio.is-step-proof { --m11-sheet-expanded: min(70dvh, 720px) !important; }
  .m11-studio .m2-project-bar {
    min-height: var(--m11-appbar) !important;
    padding: calc(env(safe-area-inset-top) + 8px) 10px 8px !important;
    grid-template-columns: 44px minmax(0,1fr) auto auto !important;
    border-radius: 0 0 22px 22px !important;
  }
  .m11-studio .m2-back { width: 44px !important; min-height: 44px !important; }
  .m11-studio .m2-title-field input { font-size: 15.5px !important; }
  .m11-mobile-price { min-width: 74px !important; padding: 7px 9px !important; font-size: 12px !important; }
  .m11-studio .m2-canvas-toolbar { min-height: 54px !important; padding: 6px !important; border-radius: 19px !important; }
  .m11-studio .m4-preview-tabs,
  .m11-studio .m2-zoom-controls { height: 42px !important; }
  .m11-studio .m4-preview-tabs button,
  .m11-studio .m2-zoom-controls button { width: 38px !important; height: 38px !important; }
  .m11-studio .m4-preview-tabs svg,
  .m11-studio .m2-zoom-controls svg { width: 19px !important; height: 19px !important; }
  .m11-studio .m2-zoom-controls strong { font-size: 12px !important; }
  .m11-studio .m2-outline-label,
  .m11-studio .m3-pending-pill { font-size: 11px !important; }
  .m11-studio .m2-inspector {
    left: 6px !important;
    right: 6px !important;
    bottom: calc(var(--m11-dock) + env(safe-area-inset-bottom) + 6px) !important;
    border-radius: 34px 34px 23px 23px !important;
  }
  .m11-studio .m11-sheet-grabber { min-height: 66px !important; padding: 10px 18px 9px !important; }
  .m11-studio .m11-sheet-grabber > span small { font-size: 9.5px !important; }
  .m11-studio .m11-sheet-grabber > span b { font-size: 15px !important; }
  .m11-studio .m2-inspector-panel { padding: 12px 17px 22px !important; }
  .m11-studio .m2-panel-heading { margin-bottom: 16px !important; }
  .m11-studio .m2-panel-heading > span { font-size: 10.5px !important; letter-spacing: .14em !important; }
  .m11-studio .m2-panel-heading h2 { margin-top: 5px !important; font-size: 28px !important; line-height: 1 !important; }
  .m11-studio .m2-panel-heading p {
    display: block !important;
    margin-top: 8px !important;
    font-size: 13px !important;
    line-height: 1.48 !important;
  }
  .m11-studio .m2-mode-list button {
    min-width: 84vw !important;
    min-height: 76px !important;
    padding: 13px !important;
    border-radius: 20px !important;
  }
  .m11-studio .m2-mode-list button b { font-size: 15px !important; }
  .m11-studio .m2-mode-list button small { font-size: 12.5px !important; line-height: 1.4 !important; }
  .m11-studio .m2-mode-list button > span { width: 36px !important; height: 36px !important; }
  .m11-studio .m6-cut-presets button,
  .m11-studio .m3-tool-grid button,
  .m11-studio .m7-art-presets button {
    min-width: 50vw !important;
    min-height: 66px !important;
    padding: 12px !important;
    border-radius: 18px !important;
  }
  .m11-studio .m6-cut-presets button b,
  .m11-studio .m3-tool-grid button b,
  .m11-studio .m7-art-presets button b { font-size: 14px !important; }
  .m11-studio .m6-cut-presets button small,
  .m11-studio .m3-tool-grid button small,
  .m11-studio .m7-art-presets button small { font-size: 11.5px !important; }
  .m11-studio .m2-range { padding: 13px 14px !important; border-radius: 18px !important; }
  .m11-studio .m2-range > span { font-size: 13px !important; }
  .m11-studio .m2-range input[type='range'] { min-height: 34px; }
  .m11-studio .m2-process-state { padding: 13px !important; border-radius: 18px !important; }
  .m11-studio .m2-process-state b { font-size: 13.5px !important; }
  .m11-studio .m4-smart-cut-action {
    min-height: 58px !important;
    border-radius: 18px !important;
    font-size: 14px !important;
  }
  .m11-studio .m4-smart-cut-action svg { width: 21px !important; height: 21px !important; }
  .m11-studio .m6-cut-compare__grid button { min-height: 116px !important; border-radius: 18px !important; }
  .m11-studio .m5-mask-edit-card { padding: 13px !important; border-radius: 20px !important; }
  .m11-studio .m5-mask-edit-card__heading b { font-size: 14px !important; }
  .m11-studio .m5-mask-edit-card__heading small { display: block !important; font-size: 11px !important; }
  .m11-studio .m5-mask-edit-action { min-height: 58px !important; border-radius: 17px !important; }
  .m11-studio .m5-mask-edit-action b { font-size: 13.5px !important; }
  .m11-studio .m5-mask-edit-action small { font-size: 10.5px !important; }
  .m11-studio .m2-order-summary { min-height: 76px !important; padding: 11px 13px 13px !important; }
  .m11-studio .m6-price-head strong { font-size: 26px !important; }
  .m11-studio .m2-primary-button { min-width: 158px !important; min-height: 52px !important; font-size: 12.5px !important; border-radius: 16px !important; }
  .m11-studio .m7-step-progress { min-height: var(--m11-dock) !important; padding-bottom: calc(7px + env(safe-area-inset-bottom)) !important; }
  .m11-studio .m7-step-progress button { min-height: 60px !important; border-radius: 17px !important; }
  .m11-studio .m7-step-progress button > svg { width: 22px !important; height: 22px !important; }
  .m11-studio .m7-step-progress button > small { font-size: 9.5px !important; }

  /* Admin remains information-dense, but no longer microscopic on a phone. */
  .m27-login-shell { padding: calc(var(--m32-safe-top) + 14px) 12px calc(var(--m32-safe-bottom) + 24px) !important; }
  .m27-login-shell > header { margin-bottom: 20px !important; }
  .m27-login-grid { border-radius: 30px !important; }
  .m27-login-story { padding: 38px 24px !important; }
  .m27-login-story > p { font-size: 16px !important; }
  .m27-login-points b { font-size: 14px !important; }
  .m27-login-points small { font-size: 11.5px !important; }
  .m27-login-card { margin: 12px !important; padding: 30px 22px !important; border-radius: 26px !important; }
  .m27-login-card > p { font-size: 14px !important; }
  .m27-login-card label > span { font-size: 12px !important; }
  .m27-login-card label > div { height: 58px !important; }
  .m27-login-card > button { min-height: 58px !important; font-size: 15px !important; }
  .m27-login-foot { font-size: 10px !important; }
  .m27-topbar { height: 70px !important; padding: 0 12px !important; }
  .m27-search { height: 48px !important; }
  .m27-search input { font-size: 16px !important; }
  .m27-admin-content { padding: 26px 13px calc(70px + var(--m32-safe-bottom)) !important; }
  .m27-kicker { font-size: 11px !important; }
  .m27-admin-intro p { font-size: 15px !important; line-height: 1.6 !important; }
  .m27-sidebar nav button { min-height: 54px !important; font-size: 14px !important; }
  .m27-sidebar nav button svg { width: 21px !important; height: 21px !important; }
}

/* Installation helper shared by iPhone and browsers with an install prompt. */
.m32-install-pill {
  min-height: 50px;
  padding: 0 16px 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + 8px);
  z-index: 950;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 18px;
  color: #122044;
  background: rgba(251,252,255,.89);
  box-shadow: 0 20px 55px rgba(21,34,76,.22), inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  backdrop-filter: blur(26px) saturate(170%);
  font: 800 13px/1.2 Inter, Manrope, system-ui, sans-serif;
  cursor: pointer;
  animation: m32-install-in .45s cubic-bezier(.2,.8,.2,1) both;
}
.m32-install-pill > span:first-child {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(145deg,#3158ff,#7a50f4 58%,#e632ad);
  box-shadow: 0 9px 20px rgba(72,72,218,.25);
}
.m32-install-pill svg { width: 17px; height: 17px; }

.m32-install-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  align-items: end;
  padding: 12px max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
  background: rgba(13,23,52,.34);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  backdrop-filter: blur(18px) saturate(115%);
  animation: m32-fade-in .22s ease both;
}
.m32-install-sheet {
  width: min(560px,100%);
  max-height: min(88dvh,var(--m32-viewport-height,88dvh));
  margin: 0 auto;
  padding: 12px 20px calc(20px + env(safe-area-inset-bottom));
  overflow: auto;
  border: 1px solid rgba(255,255,255,.94);
  border-radius: 34px;
  background: linear-gradient(155deg,rgba(255,255,255,.98),rgba(244,247,255,.96));
  box-shadow: 0 34px 90px rgba(17,29,67,.3), inset 0 1px 0 #fff;
  animation: m32-sheet-in .36s cubic-bezier(.2,.8,.2,1) both;
}
.m32-install-grabber { width: 46px; height: 5px; margin: 0 auto 18px; border-radius: 99px; background: #c8cedd; }
.m32-install-heading { display: grid; grid-template-columns: 54px 1fr auto; gap: 14px; align-items: start; }
.m32-install-mark { width: 54px; height: 54px; border-radius: 18px; background: url('/assets/magnet/brand/magnet-studio-mark.svg') center/cover no-repeat; box-shadow: 0 14px 32px rgba(68,73,218,.24); }
.m32-install-heading small { color: #3158ff; font: 900 10px/1.2 Inter,Manrope,system-ui,sans-serif; letter-spacing: .14em; }
.m32-install-heading h2 { margin: 6px 0 0; color: #101c3c; font: 820 29px/.98 Inter,Manrope,system-ui,sans-serif; letter-spacing: -.05em; }
.m32-install-close { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(30,45,89,.1); border-radius: 15px; color: #56627b; background: rgba(255,255,255,.78); cursor: pointer; }
.m32-install-close svg { width: 20px; }
.m32-install-sheet > p { margin: 17px 2px 0; color: #69748a; font: 500 15px/1.58 Inter,Manrope,system-ui,sans-serif; }
.m32-install-steps { margin: 20px 0 0; padding: 0; display: grid; gap: 9px; list-style: none; }
.m32-install-steps li { min-height: 72px; padding: 13px; display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; border: 1px solid rgba(39,57,110,.09); border-radius: 20px; background: rgba(255,255,255,.74); }
.m32-install-steps li > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px; color: #3158ff; background: #edf2ff; font: 900 13px/1 Inter,system-ui,sans-serif; }
.m32-install-steps b { display: block; color: #172344; font: 800 15px/1.25 Inter,Manrope,system-ui,sans-serif; }
.m32-install-steps small { display: block; margin-top: 4px; color: #7a8498; font: 500 12.5px/1.4 Inter,Manrope,system-ui,sans-serif; }
.m32-install-steps svg { width: 22px; height: 22px; color: #3158ff; }
.m32-install-done { width: 100%; min-height: 56px; margin-top: 18px; border: 0; border-radius: 18px; color: #fff; background: linear-gradient(110deg,#3158ff,#7750f4 62%,#e632ad); box-shadow: 0 16px 34px rgba(68,73,218,.24); font: 850 15px/1 Inter,Manrope,system-ui,sans-serif; cursor: pointer; }

html[data-display-mode='standalone'] .m32-install-pill { display: none !important; }

@keyframes m32-install-in { from { opacity: 0; transform: translateY(16px) scale(.96); } }
@keyframes m32-fade-in { from { opacity: 0; } }
@keyframes m32-sheet-in { from { opacity: 0; transform: translateY(34px) scale(.98); } }

@media (min-width: 781px) {
  .m32-install-pill,
  .m32-install-backdrop { display: none !important; }
}

@media (max-width: 370px) {
  .ms-brand > span:last-child b { font-size: 12px !important; }
  .ms-brand > span:last-child small { font-size: 7px !important; }
  .m11-studio .m2-primary-button { min-width: 144px !important; padding-inline: 10px !important; }
  .m32-install-heading h2 { font-size: 26px; }
}

@media (prefers-reduced-transparency: reduce) {
  .m32-install-pill,
  .m32-install-sheet,
  .m23-account-nav { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: #f9faff !important; }
}

@media (prefers-reduced-motion: reduce) {
  .m32-install-pill,
  .m32-install-backdrop,
  .m32-install-sheet { animation: none !important; }
}