/* Magnet Studio — unified application design pass across all routes. */

:root {
  --msu-ink:#111a38;
  --msu-copy:#667087;
  --msu-blue:#3158ff;
  --msu-violet:#7854ff;
  --msu-pink:#ef3aa8;
  --msu-line:rgba(18,30,65,.095);
  --msu-soft:#f5f7fc;
  --msu-shadow:0 22px 58px rgba(32,45,84,.09);
}

body {
  background:#fff;
  color:var(--msu-ink);
}

.ms-container {
  width:min(1420px,calc(100vw - 40px));
}

.ms-nav a.is-active {
  position:relative;
  color:var(--msu-ink) !important;
  background:transparent !important;
  box-shadow:none !important;
  outline:0 !important;
}
.ms-nav a.is-active::after {
  content:'';
  height:2px;
  position:absolute;
  left:10px;
  right:10px;
  bottom:3px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--msu-blue),var(--msu-pink));
}

/* Shared editorial hero for every secondary route. */
.ms-page-hero {
  min-height:420px;
  margin-top:24px;
  padding:54px 54px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,.72fr);
  gap:36px;
  align-items:center;
  border:1px solid rgba(255,255,255,.9);
  border-radius:32px;
  background:
    radial-gradient(circle at 82% 16%,rgba(120,84,255,.12),transparent 32%),
    linear-gradient(120deg,#fbfcff 0%,#f1f4ff 62%,#f9f6ff 100%);
  box-shadow:var(--msu-shadow);
  overflow:hidden;
}
.ms-page-hero > div:first-child { position:relative; z-index:2; }
.ms-page-hero > div:first-child > span {
  margin-bottom:18px;
  color:var(--msu-blue);
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
}
.ms-page-hero h1 {
  max-width:860px;
  font-size:clamp(48px,5vw,78px);
  line-height:.98;
  letter-spacing:-.055em;
}
.ms-page-hero p {
  max-width:720px;
  margin-top:20px;
  color:var(--msu-copy);
  font-size:16px;
  line-height:1.62;
}
.ms-page-hero__visual {
  min-height:310px;
  position:relative;
  border-radius:28px;
  background-image:url('/assets/magnet/homepage/hero-magnets-cutout.webp');
  background-position:center;
  background-repeat:no-repeat;
  background-size:82% auto;
  filter:drop-shadow(0 24px 26px rgba(40,52,88,.16));
}
.ms-page-hero__visual::before {
  content:'';
  position:absolute;
  inset:13% 10%;
  z-index:-1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(49,88,255,.16),rgba(239,58,168,.06) 46%,transparent 70%);
  filter:blur(10px);
}
.ms-page-hero__visual > * { display:none !important; }

/* Shared section rhythm. */
.ms-page-hero + .ms-section,
.ms-page-hero + section.ms-section {
  padding-top:84px;
  padding-bottom:100px;
}
.ms-section h2,
.ms-panel h2,
.ms-commerce h2,
.ms-dashboard h2 {
  letter-spacing:-.035em;
}

/* Products page gets the same real imagery as homepage. */
.ms-page-hero + .ms-section .ms-product-grid {
  gap:22px;
}
.ms-page-hero + .ms-section .ms-product-grid > article {
  min-height:430px;
  padding:0 22px 24px;
  position:relative;
  border:0;
  border-radius:28px;
  background:#fff;
  box-shadow:0 18px 46px rgba(32,45,84,.075);
  transition:transform .25s ease,box-shadow .25s ease;
  overflow:hidden;
}
.ms-page-hero + .ms-section .ms-product-grid > article:hover {
  transform:translateY(-6px);
  box-shadow:0 28px 60px rgba(32,45,84,.12);
}
.ms-page-hero + .ms-section .ms-product-grid__top {
  padding-top:18px;
}
.ms-page-hero + .ms-section .ms-product-grid__art {
  min-height:250px;
  margin:10px -22px 0;
  border-radius:0;
  background-position:center;
  background-repeat:no-repeat;
  background-size:80% auto;
}
.ms-page-hero + .ms-section .ms-product-grid > article:nth-child(1) .ms-product-grid__art { background-image:url('/assets/magnet/homepage/product-custom-shape.webp'); background-color:#fbf2ed; }
.ms-page-hero + .ms-section .ms-product-grid > article:nth-child(2) .ms-product-grid__art { background-image:url('/assets/magnet/homepage/product-photo-magnet.webp'); background-color:#eaf7ff; }
.ms-page-hero + .ms-section .ms-product-grid > article:nth-child(3) .ms-product-grid__art { background-image:url('/assets/magnet/homepage/product-magnetic-sheet.webp'); background-color:#fff0fa; }
.ms-page-hero + .ms-section .ms-product-grid > article:nth-child(4) .ms-product-grid__art { background-image:url('/assets/magnet/homepage/product-business-magnet.webp'); background-color:#fbf5e8; }
.ms-page-hero + .ms-section .ms-product-grid__art > * { display:none !important; }
.ms-page-hero + .ms-section .ms-product-grid h3 { margin-top:20px; font-size:25px; }
.ms-page-hero + .ms-section .ms-product-grid p { font-size:13px; line-height:1.55; }
.ms-page-hero + .ms-section .ms-product-grid > article > a { color:var(--msu-blue); }

/* Finishes: calmer, more tactile material cards. */
.ms-finish-grid {
  gap:22px;
}
.ms-finish-grid > article {
  min-height:390px;
  padding:18px 18px 26px;
  border:0;
  border-radius:28px;
  background:#fff;
  box-shadow:0 18px 46px rgba(32,45,84,.075);
  transition:transform .25s ease,box-shadow .25s ease;
}
.ms-finish-grid > article:hover {
  transform:translateY(-5px);
  box-shadow:0 26px 56px rgba(32,45,84,.11);
}
.ms-finish-swatch {
  min-height:205px;
  border-radius:22px;
  background:linear-gradient(145deg,#eef2ff,#faf6ec);
}
.ms-finish-swatch span {
  width:78%;
  height:58%;
  border-radius:20px;
  box-shadow:12px 14px 0 #687b9f,0 22px 30px rgba(37,51,91,.14),inset 0 1px 0 rgba(255,255,255,.8);
}
.ms-finish-grid > article:nth-child(1) .ms-finish-swatch span { background:linear-gradient(135deg,#fff,#eaf0ff); }
.ms-finish-grid > article:nth-child(2) .ms-finish-swatch span { background:linear-gradient(135deg,#e9ddff,#a992ff); }
.ms-finish-grid > article:nth-child(3) .ms-finish-swatch span { background:linear-gradient(135deg,#f0ffb1,#cfff67); }
.ms-finish-grid > article:nth-child(4) .ms-finish-swatch span { background:linear-gradient(135deg,#ffd9cb,#ff9b83); }
.ms-finish-grid small { margin-top:18px; color:var(--msu-blue); font-weight:800; }
.ms-finish-grid h2 { margin-top:8px; font-size:25px; }
.ms-finish-grid p { color:var(--msu-copy); line-height:1.58; }

/* Inspiration page: real image-led editorial cards. */
.ms-inspiration-grid {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
}
.ms-inspiration-grid > article {
  min-height:330px;
  padding:34px;
  position:relative;
  border:0;
  border-radius:30px;
  background:#fff;
  box-shadow:0 18px 48px rgba(32,45,84,.08);
  overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease;
}
.ms-inspiration-grid > article:hover {
  transform:translateY(-5px);
  box-shadow:0 28px 60px rgba(32,45,84,.115);
}
.ms-inspiration-grid > article > div:first-child {
  max-width:48%;
  position:relative;
  z-index:2;
}
.ms-inspiration-grid > article:nth-child(1) { background:linear-gradient(135deg,#edf8ff,#fff); }
.ms-inspiration-grid > article:nth-child(2) { background:linear-gradient(135deg,#fff5ee,#fff); }
.ms-inspiration-grid > article:nth-child(3) { background:linear-gradient(135deg,#fff1fb,#fff); }
.ms-inspiration-grid > article:nth-child(4) { background:linear-gradient(135deg,#f1f5ff,#fff); }
.ms-inspiration-grid > article:nth-child(5) { background:linear-gradient(135deg,#fff8e9,#fff); }
.ms-inspiration-grid > article:nth-child(6) { background:linear-gradient(135deg,#f3edff,#fff); }
.ms-inspiration-grid .ms-magnet-preview {
  width:52%;
  position:absolute;
  right:2%;
  top:50%;
  transform:translateY(-50%);
  filter:none;
}
.ms-inspiration-grid .ms-magnet-preview::after,
.ms-inspiration-grid .ms-magnet-preview > span,
.ms-inspiration-grid .ms-magnet-preview img { display:none !important; }
.ms-inspiration-grid .ms-magnet-preview {
  min-height:240px;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
}
.ms-inspiration-grid > article:nth-child(1) .ms-magnet-preview { background-image:url('/assets/magnet/homepage/product-photo-magnet.webp'); }
.ms-inspiration-grid > article:nth-child(2) .ms-magnet-preview { background-image:url('/assets/magnet/homepage/product-custom-shape.webp'); }
.ms-inspiration-grid > article:nth-child(3) .ms-magnet-preview { background-image:url('/assets/magnet/homepage/product-magnetic-sheet.webp'); }
.ms-inspiration-grid > article:nth-child(4) .ms-magnet-preview { background-image:url('/assets/magnet/homepage/hero-magnets-cutout.webp'); }
.ms-inspiration-grid > article:nth-child(5) .ms-magnet-preview { background-image:url('/assets/magnet/homepage/product-business-magnet.webp'); }
.ms-inspiration-grid > article:nth-child(6) .ms-magnet-preview { background-image:url('/assets/magnet/homepage/product-magnetic-sheet.webp'); }
.ms-inspiration-grid h2 { font-size:29px; }
.ms-inspiration-grid p { color:var(--msu-copy); line-height:1.56; }

/* How it works: one connected process, not isolated dashboard boxes. */
.ms-step-grid {
  gap:0;
  position:relative;
  overflow:visible;
}
.ms-step-grid::before {
  content:'';
  height:2px;
  position:absolute;
  left:9%;
  right:9%;
  top:68px;
  background:linear-gradient(90deg,rgba(49,88,255,.12),rgba(120,84,255,.32),rgba(239,58,168,.12));
}
.ms-step-grid > article {
  min-height:300px;
  padding:34px 22px 28px;
  position:relative;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  text-align:left;
}
.ms-step-grid > article + article { border-left:1px solid var(--msu-line); }
.ms-step-grid > article > span {
  margin-bottom:18px;
  color:var(--msu-blue);
  font-size:11px;
  font-weight:800;
}
.ms-step-grid > article > svg {
  width:48px;
  height:48px;
  padding:13px;
  position:relative;
  z-index:2;
  border-radius:16px;
  color:#fff;
  background:linear-gradient(135deg,var(--msu-blue),var(--msu-violet));
  box-shadow:0 12px 24px rgba(49,88,255,.18);
}
.ms-step-grid h2 { margin-top:24px; font-size:24px; }
.ms-step-grid p { color:var(--msu-copy); line-height:1.56; }

/* Pricing: balanced configurator and clear summary. */
.ms-pricing {
  gap:26px;
  align-items:stretch;
}
.ms-pricing > div,
.ms-pricing > aside {
  padding:34px;
  border:1px solid var(--msu-line);
  border-radius:28px;
  background:#fff;
  box-shadow:0 18px 48px rgba(32,45,84,.07);
}
.ms-pricing > div {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
}
.ms-pricing label {
  padding:20px;
  border-radius:20px;
  background:#f8f9fd;
}
.ms-pricing label > span { display:block; margin-bottom:14px; font-weight:800; }
.ms-pricing label > div { display:flex; flex-wrap:wrap; gap:9px; }
.ms-pricing button {
  min-height:42px;
  padding:9px 14px;
  border:1px solid rgba(18,30,65,.12);
  border-radius:13px;
  background:#fff;
}
.ms-pricing button.is-selected {
  color:var(--msu-blue);
  border-color:var(--msu-blue);
  background:#eef2ff;
  box-shadow:0 0 0 3px rgba(49,88,255,.08);
}
.ms-pricing > aside {
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:linear-gradient(145deg,#f5f7ff,#fff8fd);
}
.ms-pricing > aside strong { font-size:clamp(46px,4vw,68px); letter-spacing:-.05em; }
.ms-pricing > aside .ms-button { width:100%; margin-top:24px; }

/* Support: fewer generic cards, stronger hierarchy. */
.ms-support-grid {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
}
.ms-support-grid > article {
  min-height:250px;
  padding:32px;
  border:0;
  border-radius:28px;
  background:linear-gradient(145deg,#fff,#f8f9ff);
  box-shadow:0 18px 46px rgba(32,45,84,.075);
  transition:transform .25s ease,box-shadow .25s ease;
}
.ms-support-grid > article:hover {
  transform:translateY(-5px);
  box-shadow:0 26px 56px rgba(32,45,84,.11);
}
.ms-support-grid > article > svg {
  width:48px;
  height:48px;
  padding:13px;
  border-radius:16px;
  color:#fff;
  background:linear-gradient(135deg,var(--msu-blue),var(--msu-violet));
}
.ms-support-grid h2 { margin-top:24px; font-size:28px; }
.ms-support-grid p { color:var(--msu-copy); line-height:1.58; }
.ms-support-grid button {
  margin-top:22px;
  padding:10px 14px;
  border:0;
  border-radius:12px;
  color:#69738a;
  background:#eef1f7;
  font-weight:700;
}

/* Customer account: lighter hierarchy and real product imagery. */
.ms-dashboard-hero {
  min-height:240px;
  padding:42px 44px;
  border-radius:30px;
  background:linear-gradient(120deg,#fbfcff,#f1f4ff 68%,#f9f5ff);
  box-shadow:var(--msu-shadow);
}
.ms-dashboard-hero h1 {
  max-width:980px;
  font-size:clamp(44px,4.5vw,70px);
}
.ms-dashboard-grid { gap:18px; }
.ms-dashboard-nav {
  border:1px solid var(--msu-line);
  border-radius:26px;
  background:#fff;
  box-shadow:0 16px 42px rgba(32,45,84,.065);
}
.ms-profile { background:linear-gradient(145deg,#f1f4ff,#fbf8ff); }
.ms-dashboard-main { gap:18px; }
.ms-quick-actions { gap:14px; }
.ms-quick-actions button {
  min-height:118px;
  border:1px solid var(--msu-line);
  border-radius:22px;
  background:#fff;
  box-shadow:0 12px 32px rgba(32,45,84,.055);
}
.ms-panel {
  border:1px solid var(--msu-line);
  border-radius:26px;
  background:#fff;
  box-shadow:0 16px 42px rgba(32,45,84,.06);
}
.ms-project-grid { gap:16px; }
.ms-project-grid > article {
  border:0;
  border-radius:22px;
  background:#f7f8fc;
}
.ms-project-grid > article > div:first-child {
  min-height:190px;
  background-position:center;
  background-repeat:no-repeat;
  background-size:82% auto;
}
.ms-project-grid > article:nth-child(1) > div:first-child { background-image:url('/assets/magnet/homepage/product-custom-shape.webp'); }
.ms-project-grid > article:nth-child(2) > div:first-child { background-image:url('/assets/magnet/homepage/product-magnetic-sheet.webp'); }
.ms-project-grid > article:nth-child(3) > div:first-child { background-image:url('/assets/magnet/homepage/hero-magnets-cutout.webp'); }
.ms-project-grid > article:nth-child(4) > div:first-child { background-image:url('/assets/magnet/homepage/product-business-magnet.webp'); }
.ms-project-grid > article > div:first-child > * { display:none !important; }

/* Commerce surfaces. */
.ms-commerce-head {
  padding:42px 44px;
  border-radius:30px;
  background:linear-gradient(120deg,#fbfcff,#f1f4ff 68%,#f9f5ff);
  box-shadow:var(--msu-shadow);
}
.ms-cart-list > article,
.ms-summary,
.ms-checkout > section,
.ms-choice,
.ms-empty,
.ms-confirmation {
  border:1px solid var(--msu-line);
  border-radius:24px;
  background:#fff;
  box-shadow:0 14px 38px rgba(32,45,84,.06);
}
.ms-summary { background:linear-gradient(145deg,#f8faff,#fff8fd); }

/* Studio remains functional but visually belongs to the same system. */
.ms-studio-head {
  min-height:170px;
  padding:38px 38px;
  border-radius:30px 30px 0 0;
  background:linear-gradient(120deg,#fbfcff,#f1f4ff 68%,#f9f5ff);
}
.ms-studio-head h1 { font-size:clamp(42px,4vw,62px); letter-spacing:-.045em; }
.ms-studio-layout { box-shadow:0 22px 58px rgba(32,45,84,.08); }
.ms-tool-rail button.is-active {
  color:var(--msu-blue);
  background:#eef2ff;
  box-shadow:inset 0 0 0 1px rgba(49,88,255,.15);
}
.ms-canvas-toolbar,
.ms-canvas-legend { color:#5f6980; }
.ms-inspector__eyebrow { color:var(--msu-blue); }
.ms-segmented button.is-selected {
  color:var(--msu-blue);
  background:#eef2ff;
  box-shadow:inset 0 0 0 1px rgba(49,88,255,.15);
}
.ms-order-card { border-radius:20px !important; }

/* Motion and interaction consistency. */
.ms-button,
.ms-cart-link,
.ms-account-link,
.ms-product-grid > article,
.ms-finish-grid > article,
.ms-inspiration-grid > article,
.ms-support-grid > article,
.ms-quick-actions button {
  transition:transform .24s ease,box-shadow .24s ease,background-color .24s ease,border-color .24s ease;
}

@media (max-width:1100px) {
  .ms-page-hero { grid-template-columns:1fr .72fr; padding:44px 36px; }
  .ms-page-hero h1 { font-size:clamp(46px,6vw,66px); }
  .ms-pricing > div { grid-template-columns:1fr; }
  .ms-inspiration-grid { grid-template-columns:1fr; }
}

@media (max-width:820px) {
  .ms-container { width:min(100% - 28px,1420px); }
  .ms-page-hero {
    min-height:0;
    padding:38px 24px 24px;
    grid-template-columns:1fr;
    border-radius:26px;
  }
  .ms-page-hero__visual { min-height:260px; background-size:70% auto; }
  .ms-page-hero + .ms-section { padding-top:54px; padding-bottom:70px; }
  .ms-page-hero + .ms-section .ms-product-grid,
  .ms-finish-grid,
  .ms-support-grid { grid-template-columns:1fr 1fr; }
  .ms-step-grid { grid-template-columns:1fr 1fr; }
  .ms-step-grid::before { display:none; }
  .ms-step-grid > article + article { border-left:0; }
  .ms-step-grid > article { border-bottom:1px solid var(--msu-line); }
  .ms-pricing { grid-template-columns:1fr; }
  .ms-dashboard-grid { grid-template-columns:1fr; }
  .ms-dashboard-nav { display:grid; grid-template-columns:repeat(3,1fr); }
  .ms-profile { grid-column:1 / -1; }
}

@media (max-width:560px) {
  .ms-page-hero h1 { font-size:42px; }
  .ms-page-hero__visual { min-height:210px; background-size:88% auto; }
  .ms-page-hero + .ms-section .ms-product-grid,
  .ms-finish-grid,
  .ms-support-grid,
  .ms-step-grid { grid-template-columns:1fr; }
  .ms-inspiration-grid > article { min-height:420px; }
  .ms-inspiration-grid > article > div:first-child { max-width:none; }
  .ms-inspiration-grid .ms-magnet-preview {
    width:80%;
    top:auto;
    right:10%;
    bottom:10px;
    transform:none;
  }
  .ms-dashboard-hero,
  .ms-commerce-head { padding:32px 24px; }
  .ms-dashboard-nav { grid-template-columns:1fr 1fr; }
}