/* Magnet Studio M19 — pricing configurator, process density and Smart Cut storytelling. */

/* Keep oversized editorial headings optically safe on Chromium. */
.m16-hero h1,
.m17-page h1,
.m17-page h2 {
  padding-right:.04em;
  text-wrap:balance;
}

/* Five-step story: less empty card surface, stronger images and clearer information flow. */
.m17-process__list { gap:20px; }
.m17-process__list article {
  min-height:196px;
  padding:18px 18px 18px 16px;
  grid-template-columns:56px minmax(320px,.72fr) minmax(420px,1.28fr);
  gap:28px;
  border-color:rgba(255,255,255,.96);
  box-shadow:0 20px 58px rgba(31,45,83,.075);
  transition:transform .28s ease,box-shadow .28s ease;
}
.m17-process__list article:hover {
  transform:translateX(4px);
  box-shadow:0 25px 66px rgba(31,45,83,.105);
}
.m17-process__number {
  width:52px;
  height:52px;
  font-size:11px;
}
.m17-process__visual {
  min-height:188px;
  border-radius:22px;
  background:
    radial-gradient(circle at 28% 22%,rgba(122,141,255,.18),transparent 34%),
    linear-gradient(145deg,#eef2fb,#f8f4ed);
}
.m17-process__visual img {
  width:92%;
  height:228px;
  object-fit:contain;
  filter:drop-shadow(0 18px 20px rgba(31,45,83,.18));
}
.m17-process__copy {
  padding:8px 8px 8px 4px;
  align-self:center;
}
.m17-process__copy h3 { font-size:clamp(29px,2.75vw,42px); }
.m17-process__copy p {
  max-width:58ch;
  font-size:15px;
  line-height:1.74;
}

/* Smart Cut under the hood: the before/after result now carries the visual message. */
.m17-deep-dive {
  margin-top:94px;
  padding:clamp(42px,6vw,80px);
  grid-template-columns:minmax(430px,.8fr) minmax(620px,1.2fr);
  gap:54px;
}
.m17-deep-dive__copy > p {
  max-width:46ch;
  font-size:15px;
}
.m17-mini-grid {
  margin-top:30px;
  gap:12px;
}
.m17-mini-grid span {
  min-height:124px;
  padding:18px 16px;
  border-radius:18px;
  background:linear-gradient(180deg,#fbfcff,#f6f8fc);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82);
}
.m17-mini-grid svg { width:19px; }
.m17-mini-grid b { font-size:12px; }
.m17-mini-grid small {
  font-size:9px;
  line-height:1.45;
}
.m17-before-after {
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:20px;
}
.m17-before-after > svg {
  width:28px;
  color:var(--m17-blue);
}
.m17-before-after article {
  padding:16px;
  border-radius:24px;
  background:linear-gradient(180deg,#fafcff,#f6f8fc);
}
.m17-before-after article small {
  padding:4px 4px 12px;
  font-size:9px;
}
.m17-before-after img {
  height:390px;
  border-radius:18px;
}

/* Pricing: replace loose toggle rows with compact, structured configurator cards. */
.m17-calculator { margin-top:86px; gap:28px; }
.m17-calculator__controls {
  padding:52px;
  display:grid;
  gap:14px;
  box-shadow:var(--m18-shadow);
}
.m17-control {
  margin:0;
  padding:18px 20px;
  display:grid;
  grid-template-columns:140px 1fr;
  gap:18px;
  align-items:start;
  border:1px solid rgba(224,229,241,.96);
  border-radius:22px;
  background:linear-gradient(180deg,#fff,#fafbfe);
}
.m17-control > b {
  margin:9px 0 0;
  font-size:13px;
  line-height:1.35;
}
.m17-control > div {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(92px,1fr));
  gap:10px;
}
.m17-control button {
  min-height:54px;
  padding:0 16px;
  justify-content:flex-start;
  border-radius:16px;
  color:#42506a;
  background:#fff;
  font-size:12px;
  font-weight:850;
  box-shadow:0 6px 18px rgba(31,45,83,.045);
}
.m17-control button:hover {
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(31,45,83,.08);
}
.m17-control button.is-selected {
  color:#fff;
  background:linear-gradient(135deg,var(--m17-blue),var(--m17-violet));
  box-shadow:0 12px 26px rgba(49,88,255,.22);
}

/* Whole public app: preserve calm depth without adding visual noise. */
.m16-smartcut article,
.m16-products article,
.m17-product-row,
.m17-process__list article { backface-visibility:hidden; }

@media (max-width:1024px) {
  .m17-process__list article {
    grid-template-columns:56px minmax(260px,.78fr) minmax(300px,1.22fr);
  }
  .m17-control {
    grid-template-columns:1fr;
    gap:12px;
  }
  .m17-control > b { margin:0; }
  .m17-deep-dive { grid-template-columns:1fr; }
}

@media (max-width:768px) {
  .m17-process__list article {
    min-height:auto;
    padding:14px;
    grid-template-columns:44px 1fr;
    gap:12px;
  }
  .m17-process__visual,
  .m17-process__copy { grid-column:2; }
  .m17-process__visual { min-height:174px; }
  .m17-process__visual img {
    width:94%;
    height:210px;
  }
  .m17-before-after { grid-template-columns:1fr; }
  .m17-before-after > svg {
    justify-self:center;
    transform:rotate(90deg);
  }
  .m17-before-after img { height:260px; }
  .m17-control > div {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (prefers-reduced-motion:reduce) {
  .m17-process__list article,
  .m17-control button { transition:none !important; transform:none !important; }
}