/* Magnet Studio M20 — mobile-first public app and compact five-step story. */

html { -webkit-text-size-adjust:100%; }
body { overscroll-behavior-y:none; }
a,button,input,select,summary { -webkit-tap-highlight-color:transparent; }
button,a,summary { touch-action:manipulation; }

/* Five steps become a real visual process rather than five empty full-width rows. */
.m17-process__list {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
}
.m17-process__list article {
  min-height:410px;
  padding:14px;
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:auto 172px auto;
  align-content:start;
  gap:13px;
  position:relative;
  border-radius:26px;
}
.m17-process__number {
  width:42px;
  height:42px;
  position:absolute;
  top:24px;
  left:24px;
  z-index:3;
  box-shadow:0 12px 28px rgba(49,88,255,.28);
}
.m17-process__visual {
  min-height:172px;
  grid-column:1;
  border-radius:19px;
}
.m17-process__visual img {
  width:94%;
  height:168px;
}
.m17-process__copy {
  grid-column:1;
  padding:8px 8px 12px;
}
.m17-process__copy > svg { width:21px; }
.m17-process__copy h3 {
  margin-top:12px;
  font-size:clamp(23px,2vw,31px);
  line-height:1.04;
}
.m17-process__copy p {
  margin-top:10px;
  font-size:12.5px;
  line-height:1.62;
}

@media (max-width:1180px) and (min-width:769px) {
  .m17-process__list { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .m17-process__list article { grid-column:span 2; }
  .m17-process__list article:nth-child(4),
  .m17-process__list article:nth-child(5) { grid-column:span 3; }
}

/* Mobile Liquid Glass shell: controls float above content, content remains readable. */
@media (max-width:768px) {
  :root {
    --m20-safe-top:max(10px,env(safe-area-inset-top));
    --m20-safe-bottom:max(14px,env(safe-area-inset-bottom));
    --m20-page-pad:14px;
    --m20-radius:28px;
  }

  body {
    min-width:320px;
    padding-bottom:var(--m20-safe-bottom);
    background:
      radial-gradient(circle at 0 2%,rgba(49,88,255,.12),transparent 31%),
      radial-gradient(circle at 100% 18%,rgba(234,59,168,.08),transparent 26%),
      linear-gradient(180deg,#f7f8fc,#f1f4fa 62%,#f8f9fc);
  }

  .ms-topbar { display:none; }
  .ms-container { width:calc(100% - 2 * var(--m20-page-pad)); }

  .ms-header {
    width:calc(100% - 20px)!important;
    min-height:62px!important;
    padding:8px 9px 8px 12px!important;
    top:var(--m20-safe-top)!important;
    margin:0 auto!important;
    border:1px solid rgba(255,255,255,.78)!important;
    border-radius:22px!important;
    background:linear-gradient(112deg,rgba(255,255,255,.82),rgba(246,248,255,.72))!important;
    box-shadow:0 18px 42px rgba(26,40,78,.16),inset 0 1px 0 rgba(255,255,255,.9)!important;
    -webkit-backdrop-filter:blur(24px) saturate(155%);
    backdrop-filter:blur(24px) saturate(155%);
  }
  .ms-brand__mark { width:40px; height:40px; border-radius:14px; }
  .ms-brand > span:last-child b { font-size:12px; }
  .ms-brand > span:last-child small { font-size:7px; }
  .ms-nav,
  .ms-account-link,
  .ms-cart-link span,
  .ms-header__actions > .ms-button { display:none!important; }
  .ms-cart-link {
    width:44px;
    min-width:44px;
    height:44px;
    padding:0!important;
    display:grid!important;
    place-items:center;
    border-radius:15px!important;
  }
  .ms-menu {
    width:44px!important;
    height:44px!important;
    display:grid!important;
    place-items:center;
    border:1px solid rgba(26,39,76,.1)!important;
    border-radius:15px!important;
    color:#17213d;
    background:rgba(255,255,255,.72)!important;
  }
  .ms-mobile-nav {
    width:calc(100% - 20px);
    max-height:calc(100dvh - 96px);
    padding:12px;
    top:calc(var(--m20-safe-top) + 68px);
    left:10px;
    right:10px;
    overflow:auto;
    border:1px solid rgba(255,255,255,.8);
    border-radius:24px;
    background:rgba(249,250,255,.86);
    box-shadow:0 24px 54px rgba(24,38,75,.2);
    -webkit-backdrop-filter:blur(28px) saturate(155%);
    backdrop-filter:blur(28px) saturate(155%);
  }
  .ms-mobile-nav a {
    min-height:52px;
    padding:0 16px;
    display:flex;
    align-items:center;
    border-radius:16px;
    font-size:15px;
    font-weight:800;
  }
  .ms-mobile-nav a:active { background:#edf1ff; }

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

  /* Homepage */
  .m16-hero {
    min-height:auto!important;
    grid-template-columns:1fr!important;
    overflow:hidden;
    border-radius:var(--m20-radius)!important;
  }
  .m16-hero__copy {
    padding:38px 25px 30px!important;
  }
  .m16-hero h1 {
    font-size:clamp(47px,14vw,68px)!important;
    line-height:.91!important;
    letter-spacing:-.065em!important;
  }
  .m16-hero__copy > p { font-size:15px!important; line-height:1.7!important; }
  .m16-actions { align-items:stretch!important; }
  .m16-primary { width:100%; min-height:54px; justify-content:center; }
  .m16-text-link { min-height:44px; justify-content:center; }
  .m16-hero__micro {
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:8px!important;
  }
  .m16-hero__micro span:last-child { grid-column:1 / -1; }
  .m16-hero__stage { min-height:520px!important; }
  .m16-hero__studio-card {
    width:calc(100% - 32px)!important;
    left:16px!important;
    right:16px!important;
    bottom:18px!important;
  }
  .m16-trust,
  .m18-rail {
    margin-inline:var(--m20-page-pad)!important;
    width:auto!important;
    display:flex!important;
    overflow-x:auto!important;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    border-radius:22px!important;
  }
  .m16-trust::-webkit-scrollbar,
  .m18-rail::-webkit-scrollbar { display:none; }
  .m16-trust article,
  .m18-rail article {
    min-width:78vw;
    border-right:1px solid rgba(22,35,73,.08)!important;
    scroll-snap-align:center;
  }
  .m16-manifesto,
  .m16-section-head { grid-template-columns:1fr!important; gap:20px!important; }
  .m16-manifesto h2,
  .m16-section-head h2 { font-size:clamp(42px,12vw,58px)!important; }
  .m16-smartcut__flow,
  .m16-products__grid { grid-template-columns:1fr!important; }
  .m16-dark-story,
  .m16-production,
  .m16-sheet-story { grid-template-columns:1fr!important; }

  /* Page heroes */
  .m17-page { overflow:hidden; }
  .m17-hero {
    min-height:auto!important;
    grid-template-columns:1fr!important;
    border-radius:var(--m20-radius)!important;
  }
  .m17-hero__copy {
    padding:38px 24px 28px!important;
  }
  .m17-hero h1 {
    font-size:clamp(46px,13.8vw,66px)!important;
    line-height:.91!important;
  }
  .m17-hero__copy > p { font-size:15px!important; line-height:1.68!important; }
  .m17-hero__actions { display:grid!important; grid-template-columns:1fr; }
  .m17-hero__actions .ms-button { width:100%; justify-content:center; }
  .m17-hero__visual { min-height:380px!important; }
  .m17-hero__visual img { width:92%!important; max-height:350px!important; }
  .m17-hero__badge { right:14px!important; top:14px!important; }

  .m17-section-head {
    margin-bottom:26px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:16px!important;
  }
  .m17-section-head h2,
  .m17-deep-dive h2,
  .m17-proof-story h2,
  .m17-volume h2,
  .m17-photo-guide h2,
  .m17-support-human h2,
  .m17-b2b-workspace h2,
  .m17-b2b-volume h2 {
    font-size:clamp(39px,11.5vw,55px)!important;
    line-height:.96!important;
  }
  .m17-section-head > p,
  .m17-page p { font-size:14px; }

  /* Five-step horizontal iOS carousel. */
  .m17-process { padding-top:62px!important; }
  .m17-process__list {
    width:calc(100% + var(--m20-page-pad));
    margin-right:calc(-1 * var(--m20-page-pad));
    padding:4px var(--m20-page-pad) 18px 0;
    display:flex!important;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-left:var(--m20-page-pad);
    scrollbar-width:none;
  }
  .m17-process__list::-webkit-scrollbar { display:none; }
  .m17-process__list article {
    min-width:min(84vw,360px);
    min-height:390px;
    grid-template-columns:1fr!important;
    grid-template-rows:auto 178px auto!important;
    scroll-snap-align:center;
    scroll-snap-stop:always;
  }
  .m17-process__visual,
  .m17-process__copy { grid-column:1!important; }
  .m17-process__visual img { height:176px!important; }
  .m17-process__copy { padding:8px 8px 12px!important; }
  .m17-process__copy h3 { font-size:29px!important; }
  .m17-process__copy p { font-size:13px!important; }

  .m17-product-row,
  .m17-dark-story,
  .m17-deep-dive,
  .m17-proof-story,
  .m17-calculator,
  .m17-volume,
  .m17-photo-guide,
  .m17-support-human,
  .m17-b2b-workspace,
  .m17-b2b-volume {
    grid-template-columns:1fr!important;
    gap:28px!important;
    border-radius:var(--m20-radius)!important;
  }
  .m17-product-row { padding:14px!important; }
  .m17-product-row__visual { min-height:330px!important; }
  .m17-product-row__copy { padding:16px 10px 24px!important; }

  .m17-deep-dive { padding:34px 18px!important; }
  .m17-before-after { grid-template-columns:1fr!important; }
  .m17-before-after > svg { justify-self:center; transform:rotate(90deg); }
  .m17-before-after img { height:280px!important; }
  .m17-mini-grid { grid-template-columns:1fr!important; }
  .m17-mini-grid span { min-height:86px!important; }

  /* Pricing */
  .m17-calculator { margin-top:62px!important; }
  .m17-calculator__controls,
  .m17-calculator__summary { padding:27px 18px!important; border-radius:var(--m20-radius)!important; }
  .m17-calculator__controls h2 { font-size:44px!important; }
  .m17-control {
    padding:16px!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  .m17-control > div { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  .m17-control button {
    min-height:54px!important;
    padding:0 13px!important;
    justify-content:center!important;
  }
  .m17-price-preview { min-height:230px!important; }
  .m18-price-included { grid-template-columns:1fr!important; }
  .m17-price-includes > div:last-child,
  .m17-help-topics > div:last-child,
  .m17-b2b-benefits > div:last-child,
  .m17-b2b-uses > div:last-child { grid-template-columns:1fr!important; }
  .m17-volume__tiers {
    display:flex!important;
    overflow-x:auto!important;
    scroll-snap-type:x mandatory;
  }
  .m17-volume__tiers article { min-width:58vw; scroll-snap-align:center; }

  .m17-compare__table { overflow-x:auto; }
  .m17-compare__table > div { min-width:720px; }
  .m17-faq > div:last-child { grid-template-columns:1fr!important; }

  /* Account, cart and dashboard */
  .ms-dashboard-hero,
  .ms-panel,
  .ms-empty,
  .ms-commerce > section { border-radius:var(--m20-radius)!important; }
  .ms-dashboard-hero { padding:34px 22px!important; }
  .ms-dashboard-hero h1,
  .ms-commerce-head h1 { font-size:clamp(42px,12vw,58px)!important; }
  .ms-account-layout,
  .ms-cart-layout,
  .ms-checkout-layout { grid-template-columns:1fr!important; }
  .ms-footer {
    grid-template-columns:1fr 1fr!important;
    gap:30px 18px!important;
    padding-inline:8px!important;
  }
  .ms-footer > div:first-child { grid-column:1 / -1; }
}

@media (max-width:390px) {
  .ms-brand > span:last-child { display:none; }
  .m16-hero h1,
  .m17-hero h1 { font-size:45px!important; }
  .m17-control > div { grid-template-columns:1fr!important; }
  .ms-footer { grid-template-columns:1fr!important; }
  .ms-footer > div:first-child { grid-column:auto; }
}

@media (max-width:900px) and (orientation:landscape) and (max-height:540px) {
  .m16-home,
  .m17-page,
  .ms-dashboard,
  .ms-commerce { padding-top:80px!important; }
  .ms-header { top:6px!important; }
}

@media (prefers-reduced-transparency:reduce) {
  .ms-header,
  .ms-mobile-nav { background:#f9faff!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto!important; }
  .m17-process__list { scroll-snap-type:none; }
}