@charset "utf-8";
/* CSS Document */
/* ─────────────────────────────────────────────────────────────
   Scoped styles – ONLY affect content inside .msw
   No :root, no global element selectors.
   ──────────────────────────────────────────────────────────── */
.msw{
  /* local “theme” variables (custom properties) are scoped here */
  --bg: #ffffff;
  --text: #1a1a1a;
  --muted: #4b5563;
  --card-bg: #fff;
  --ring: #e5e7eb;
  --c-blue:  #b3cde0;
  --c-green: #6497b1;
  --c-orange: #005b96;
  --c-red:   #03396c;
  --c-purple: #011f4b;
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background: transparent; /* don’t disturb page background */
}

.msw .wrap{
  max-width: 1200px;
  margin: 48px auto 96px;
  padding: 0 20px;
}

.msw .heading{
  font-weight: 700;
  font-size: 200% /* clamp(28px, 4vw, 56px)**/;
  letter-spacing: -0.02em;
  text-align: center;
  margin: 0 0 28px;
}

.msw .flow{
  display:grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 28px;
  align-items: stretch;
  position: relative;
}

.msw .step{
  background: var(--card-bg);
  border: 8px solid var(--ring); /****controlls thickness of border around cards****/
  border-radius: 14px;
  padding: 22px 18px 20px;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  position: relative;
  display:flex;
  flex-direction: column;
  align-items: center;
  text-align:center;
  isolation: isolate;
}

.msw .icon{
  width: 52px;
  height: 52px;
  margin-bottom: 10px;
  display:inline-flex;
}

.msw .kicker{
  display:flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: 10px;
}
.msw .num{ font-weight: 800; font-size: 22px; line-height: 1; }
.msw .title{ font-weight: 700; }

.msw .desc{
  color: var(--muted);
  font-size: 15px;
  margin-top: 10px;
}

/* colored borders per step */
.msw .step--1{ border-color: #b3cde0; }
.msw .step--2{ border-color: #6497b1; }
.msw .step--3{ border-color: #005b96; }
.msw .step--4{ border-color: #03396c; }
.msw .step--5{ border-color: #011f4b; }

/* title color accents */
.msw .step--1 .num, .msw .step--1 .title{ color: var(--c-blue); }
.msw .step--2 .num, .msw .step--2 .title{ color: var(--c-green); }
.msw .step--3 .num, .msw .step--3 .title{ color: var(--c-orange); }
.msw .step--4 .num, .msw .step--4 .title{ color: var(--c-red); }
.msw .step--5 .num, .msw .step--5 .title{ color: var(--c-purple); }

/* connectors between cards (decorative) */
/*.msw .connector{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 0 0 4px #ffffff, 0 0 0 1px #00000020;
  z-index: 0;
}
.msw .connector:after{
  content: '';
  position: absolute;
  top: 50%; left: 100%;
  width: 26px; height: 2px;
  background: #00000035;
  transform: translateY(-50%);
}
.msw .c1{ left: calc(20% - 18px); }
.msw .c2{ left: calc(40% - 18px); }
.msw .c3{ left: calc(60% - 18px); }
.msw .c4{ left: calc(80% - 18px); }

/* responsive */
@media (max-width: 980px){
  .msw .flow{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 20px;
  }
  .msw .connector{ display:none; }
}
@media (max-width: 540px){
  .msw .flow{ grid-template-columns: 1fr; }
  .msw .step{ text-align:left; align-items:flex-start; }
  .msw .kicker{ align-items:flex-start; }
  .msw .desc{ font-size: 14px; }
}

/* keyboard focus only within the component */
.msw .step:focus-within, .msw .step:focus{
  outline: 3px solid currentColor;
  outline-offset: 2px;
}