/* =========================================================
   WUC Server Maintenance — polish layer
   Scoped to .wuc-sm wrapper on /server-maintenance/
   Deployment pattern mirrors wuc-menu-polish.css
   ========================================================= */

/* ---------- P0 SM-1 — Primary hero CTA elevation ---------- */
html body[class] .wuc-service-hero .wuc-service-hero__btn--primary {
  background: #0070E0 !important;
  color: #ffffff !important;
  border: 0 !important;
  padding: 14px 30px !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 1px 2px rgba(0, 0, 0, 0.12),
    0 6px 18px rgba(0, 0, 0, 0.22) !important;
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, background-color 0.15s ease-out !important;
  will-change: auto;
}
html body[class] .wuc-service-hero .wuc-service-hero__btn--primary:hover {
  background: #005FBF !important;
  transform: translateY(-1px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 2px 4px rgba(0, 0, 0, 0.14),
    0 10px 24px rgba(0, 0, 0, 0.28) !important;
}
html body[class] .wuc-service-hero .wuc-service-hero__btn--primary:active {
  transform: translateY(0) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.18) !important;
}
html body[class] .wuc-service-hero .wuc-service-hero__btn--primary:focus-visible {
  outline: 2px solid #0070E0 !important;
  outline-offset: 3px !important;
}

/* ---------- P0 SM-4 — Hero eyebrow contrast bump (AA) ---------- */
html body[class] .wuc-service-hero .wuc-service-hero__eyebrow {
  color: #B4C1D1 !important;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html body[class] .wuc-service-hero .wuc-service-hero__btn--primary,
  html body[class] .wuc-service-hero .wuc-service-hero__btn--primary:hover,
  html body[class] .wuc-service-hero .wuc-service-hero__btn--primary:active {
    transition: none !important;
    transform: none !important;
  }
}

/* =========================================================
   SM-2: "Why Server Maintenance Matters" — eyebrow/kicker
   Converts former H3 to a styled label above the H2.
   Fixes heading-order violation without semantic inversion.
   ========================================================= */
html body.page .wuc-v4 .sm-over-content .wuc-sm-eyebrow,
html body[class] .wuc-sm-eyebrow {
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #0070E0 !important;
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
  display: block !important;
}

html body[class] .wuc-sm-eyebrow + h2 {
  margin-top: 0 !important;
}

@media (max-width: 640px) {
  html body[class] .wuc-sm-eyebrow {
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
    margin-bottom: 10px !important;
  }
}

/* =========================================================
   SM-6: Hero H1 "Engineered Uptime" gradient text-clip
   Upgrades bland slate-400 italic to premium brand wordmark.
   ========================================================= */
html body[class] .wuc-service-hero h1 em {
  background: linear-gradient(135deg, #3B8BF0 0%, #0070E0 50%, #0B3A8C 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-style: italic !important;
  font-weight: 700 !important;
  display: inline-block !important;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  html body[class] .wuc-service-hero h1 em {
    color: #3B8BF0 !important;
    -webkit-text-fill-color: #3B8BF0 !important;
  }
}

@media (forced-colors: active) {
  html body[class] .wuc-service-hero h1 em {
    color: LinkText !important;
    -webkit-text-fill-color: LinkText !important;
    background: none !important;
  }
}

/* =========================================================
   SM-10: .sm-why-card hover/focus micro-motion
   Activates the already-defined transition (transform .25s,
   box-shadow .25s) with lift + brand-blue border tint.
   ========================================================= */
html body[class] .sm-why-card {
  will-change: transform, box-shadow;
  border-color: rgb(226, 232, 240);
}

html body[class] .sm-why-card:hover,
html body[class] .sm-why-card:focus-within {
  transform: translateY(-4px) !important;
  box-shadow:
    0 10px 24px -8px rgba(11, 58, 140, 0.18),
    0 4px 8px -2px rgba(11, 58, 140, 0.08) !important;
  border-color: rgba(0, 112, 224, 0.35) !important;
}

html body[class] .sm-why-card:hover .sm-why-card-icon,
html body[class] .sm-why-card:focus-within .sm-why-card-icon {
  background-color: rgba(0, 112, 224, 0.12) !important;
  transition: background-color 0.25s ease !important;
}

@media (prefers-reduced-motion: reduce) {
  html body[class] .sm-why-card,
  html body[class] .sm-why-card:hover,
  html body[class] .sm-why-card:focus-within {
    transform: none !important;
    transition: box-shadow 0.15s, border-color 0.15s !important;
  }
}

/* =========================================================
   SM-11: Hero stat count-up preparation
   Values start faded, animate to full opacity when in view.
   Count-up itself is handled by wuc-sm-countup.js.
   ========================================================= */
html body[class] .wuc-service-hero__stat-value {
  opacity: 1;
  transition: opacity 0.4s ease;
}

html body[class] .wuc-service-hero__stat-value.wuc-counting {
  opacity: 0.85;
}

html body[class] .wuc-service-hero__stat-value.wuc-counted {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  html body[class] .wuc-service-hero__stat-value,
  html body[class] .wuc-service-hero__stat-value.wuc-counting,
  html body[class] .wuc-service-hero__stat-value.wuc-counted {
    transition: none !important;
    opacity: 1 !important;
  }
}

/* =========================================================
   SM-12: Vendor Platform Matrix Table — enterprise polish
   Fixes critical contrast failure (1.65:1 -> 16+:1) and
   transforms undelimited model spans into proper pill badges.
   Scope: section#platforms .sm-vendor-table
   ========================================================= */

/* Table shell — clean enterprise card */
html body[class] #platforms .sm-vendor-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 4px 16px -8px rgba(15, 23, 42, 0.06) !important;
}

/* Header row */
html body[class] #platforms .sm-vendor-table thead th {
  background: #F8FAFC !important;
  color: #475569 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-align: left !important;
  padding: 16px 24px !important;
  border-bottom: 1px solid #E2E8F0 !important;
  white-space: nowrap !important;
}

html body[class] #platforms .sm-vendor-table thead th:first-child {
  width: 180px !important;
}

/* Body rows */
html body[class] #platforms .sm-vendor-table tbody td {
  background: #FFFFFF !important;
  color: #0F172A !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  padding: 18px 24px !important;
  border-bottom: 1px solid #F1F5F9 !important;
  vertical-align: middle !important;
  transition: background-color 0.18s ease !important;
}

html body[class] #platforms .sm-vendor-table tbody tr:last-child td {
  border-bottom: none !important;
}

/* Zebra stripe — subtle */
html body[class] #platforms .sm-vendor-table tbody tr:nth-child(even) td {
  background: #FAFBFC !important;
}

/* Vendor name column — bold anchor */
html body[class] #platforms .sm-vendor-table tbody td:first-child {
  font-weight: 700 !important;
  color: #0F172A !important;
  font-size: 15px !important;
  letter-spacing: -0.005em !important;
  white-space: nowrap !important;
  border-right: 1px solid #F1F5F9 !important;
}

/* Row hover — brand blue affinity */
html body[class] #platforms .sm-vendor-table tbody tr:hover td {
  background: rgba(0, 112, 224, 0.04) !important;
}

html body[class] #platforms .sm-vendor-table tbody tr:hover td:first-child {
  box-shadow: inset 3px 0 0 #0070E0 !important;
}

/* Model-cell: enable wrapping + flex gap between badges */
html body[class] #platforms .sm-vendor-table tbody td:nth-child(2) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
  align-content: center !important;
}

/* Pill badges — the star fix */
html body[class] #platforms .sm-vendor-table .sm-vendor-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 5px 12px !important;
  background: #EFF6FF !important;
  color: #0B3A8C !important;
  border: 1px solid rgba(0, 112, 224, 0.18) !important;
  border-radius: 999px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.005em !important;
  white-space: nowrap !important;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease !important;
}

html body[class] #platforms .sm-vendor-table tbody tr:hover .sm-vendor-badge {
  background: #DBEAFE !important;
  border-color: rgba(0, 112, 224, 0.32) !important;
}

/* Mobile adaptation — stack cells */
@media (max-width: 720px) {
  html body[class] #platforms .sm-vendor-table,
  html body[class] #platforms .sm-vendor-table thead,
  html body[class] #platforms .sm-vendor-table tbody,
  html body[class] #platforms .sm-vendor-table tr,
  html body[class] #platforms .sm-vendor-table td {
    display: block !important;
  }
  html body[class] #platforms .sm-vendor-table thead {
    display: none !important;
  }
  html body[class] #platforms .sm-vendor-table tbody tr {
    border-bottom: 1px solid #E2E8F0 !important;
    padding: 16px 20px !important;
  }
  html body[class] #platforms .sm-vendor-table tbody tr:last-child {
    border-bottom: none !important;
  }
  html body[class] #platforms .sm-vendor-table tbody td {
    padding: 4px 0 !important;
    border-bottom: none !important;
  }
  html body[class] #platforms .sm-vendor-table tbody td:first-child {
    border-right: none !important;
    padding-bottom: 10px !important;
    font-size: 16px !important;
  }
  html body[class] #platforms .sm-vendor-table tbody td:nth-child(2) {
    padding-top: 4px !important;
  }
  html body[class] #platforms .sm-vendor-table tbody tr:nth-child(even) td {
    background: transparent !important;
  }
}

/* Motion accessibility */
@media (prefers-reduced-motion: reduce) {
  html body[class] #platforms .sm-vendor-table tbody td,
  html body[class] #platforms .sm-vendor-table .sm-vendor-badge {
    transition: none !important;
  }
}

/* Forced colors — Windows High Contrast */
@media (forced-colors: active) {
  html body[class] #platforms .sm-vendor-table,
  html body[class] #platforms .sm-vendor-table td,
  html body[class] #platforms .sm-vendor-table th {
    border-color: CanvasText !important;
  }
  html body[class] #platforms .sm-vendor-table .sm-vendor-badge {
    border: 1px solid CanvasText !important;
    background: Canvas !important;
    color: CanvasText !important;
  }
}

/* =========================================================
   SM-C1: COMPREHENSIVE COVERAGE — center alignment upgrade
   Scope: #coverage .sm-caps-grid .sm-cap
   Centers icon + text, adds premium card polish, brand-blue
   icon tint, generous whitespace.
   ========================================================= */
html body[class] #coverage .sm-caps-grid {
  gap: 32px !important;
}

html body[class] #coverage .sm-cap {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 20px !important;
  padding: 40px 32px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 16px !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 4px 16px -8px rgba(15, 23, 42, 0.06) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

html body[class] #coverage .sm-cap:hover,
html body[class] #coverage .sm-cap:focus-within {
  transform: translateY(-4px) !important;
  border-color: rgba(0, 112, 224, 0.28) !important;
  box-shadow:
    0 12px 32px -8px rgba(11, 58, 140, 0.14),
    0 4px 12px -4px rgba(11, 58, 140, 0.08) !important;
}

html body[class] #coverage .sm-cap .sm-cap-icon {
  width: 64px !important;
  height: 64px !important;
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%) !important;
  border: 1px solid rgba(0, 112, 224, 0.18) !important;
  border-radius: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 4px auto !important;
  transition: background 0.25s ease, transform 0.25s ease !important;
}

html body[class] #coverage .sm-cap:hover .sm-cap-icon {
  background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%) !important;
  transform: scale(1.05) !important;
}

html body[class] #coverage .sm-cap .sm-cap-icon svg {
  width: 28px !important;
  height: 28px !important;
  color: #0070E0 !important;
  stroke: #0070E0 !important;
}

html body[class] #coverage .sm-cap h3 {
  text-align: center !important;
  color: #0F172A !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin: 4px 0 0 0 !important;
  letter-spacing: -0.01em !important;
}

html body[class] #coverage .sm-cap p {
  text-align: center !important;
  color: #475569 !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  max-width: 320px !important;
}

@media (prefers-reduced-motion: reduce) {
  html body[class] #coverage .sm-cap,
  html body[class] #coverage .sm-cap .sm-cap-icon {
    transition: none !important;
    transform: none !important;
  }
}

/* =========================================================
   SM-C2: HOW IT WORKS — premium step card polish
   Scope: #how-it-works .sm-timeline .sm-step
   ========================================================= */
html body[class] #how-it-works .sm-timeline {
  gap: 24px !important;
}

html body[class] #how-it-works .sm-step {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 20px !important;
  padding: 36px 32px !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 4px 16px -8px rgba(15, 23, 42, 0.06) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
  position: relative !important;
}

html body[class] #how-it-works .sm-step:hover,
html body[class] #how-it-works .sm-step:focus-within {
  transform: translateY(-4px) !important;
  border-color: rgba(0, 112, 224, 0.28) !important;
  box-shadow:
    0 14px 32px -8px rgba(11, 58, 140, 0.16),
    0 4px 12px -4px rgba(11, 58, 140, 0.08) !important;
}

/* The numeric step badge */
html body[class] #how-it-works .sm-step .sm-step-line {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  background: linear-gradient(135deg, #0070E0 0%, #0B3A8C 100%) !important;
  color: #FFFFFF !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  margin: 0 0 20px 0 !important;
  box-shadow:
    0 4px 10px -2px rgba(0, 112, 224, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  letter-spacing: 0 !important;
  font-feature-settings: "tnum" 1 !important;
}

html body[class] #how-it-works .sm-step h3 {
  color: #0F172A !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin: 0 0 12px 0 !important;
  letter-spacing: -0.01em !important;
}

html body[class] #how-it-works .sm-step p {
  color: #475569 !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  html body[class] #how-it-works .sm-step {
    transition: none !important;
    transform: none !important;
  }
}

/* =========================================================
   SM-C3: SLAs / OUR COMMITMENTS — contrast rescue
   Scope: #slas .sm-sla-card
   Critical: .sm-sla-val ("4hr" / "99.9%" / "1st") was
   rendering slate-200 #E2E8F0 on white (~1.32:1 contrast,
   invisible).
   ========================================================= */
html body[class] #slas .sm-sla-grid {
  gap: 32px !important;
}

html body[class] #slas .sm-sla-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 20px !important;
  padding: 44px 32px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 4px 16px -8px rgba(15, 23, 42, 0.06) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

html body[class] #slas .sm-sla-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, #0070E0 0%, #0B3A8C 100%) !important;
  opacity: 0.9 !important;
}

html body[class] #slas .sm-sla-card:hover,
html body[class] #slas .sm-sla-card:focus-within {
  transform: translateY(-4px) !important;
  border-color: rgba(0, 112, 224, 0.3) !important;
  box-shadow:
    0 16px 36px -8px rgba(11, 58, 140, 0.18),
    0 4px 12px -4px rgba(11, 58, 140, 0.1) !important;
}

/* The big numerals — contrast rescue to brand-blue gradient */
html body[class] #slas .sm-sla-card .sm-sla-val {
  background: linear-gradient(135deg, #3B8BF0 0%, #0070E0 50%, #0B3A8C 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-size: 56px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  margin: 4px 0 10px 0 !important;
  font-feature-settings: "tnum" 1 !important;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  html body[class] #slas .sm-sla-card .sm-sla-val {
    color: #0070E0 !important;
    -webkit-text-fill-color: #0070E0 !important;
  }
}

html body[class] #slas .sm-sla-card .sm-sla-title {
  color: #0F172A !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  letter-spacing: -0.005em !important;
}

html body[class] #slas .sm-sla-card .sm-sla-desc {
  color: #475569 !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  margin: 8px 0 0 0 !important;
  max-width: 320px !important;
}

@media (prefers-reduced-motion: reduce) {
  html body[class] #slas .sm-sla-card {
    transition: none !important;
    transform: none !important;
  }
}

@media (forced-colors: active) {
  html body[class] #slas .sm-sla-card .sm-sla-val {
    color: LinkText !important;
    -webkit-text-fill-color: LinkText !important;
    background: none !important;
  }
}

/* =========================================================
   SM-C4: EXPLORE MORE / RELATED — enterprise card treatment
   Scope: #related .sm-rel-grid .sm-rel-card
   Was: <a> rendering display:inline with no card styling.
   Now: full enterprise card with image, body, hover motion.
   ========================================================= */
html body[class] #related .sm-rel-grid {
  gap: 28px !important;
}

html body[class] #related .sm-rel-card {
  display: flex !important;
  flex-direction: column !important;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  color: inherit !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 4px 16px -8px rgba(15, 23, 42, 0.06) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

html body[class] #related .sm-rel-card:hover,
html body[class] #related .sm-rel-card:focus-visible {
  transform: translateY(-4px) !important;
  border-color: rgba(0, 112, 224, 0.3) !important;
  box-shadow:
    0 16px 36px -8px rgba(11, 58, 140, 0.18),
    0 4px 12px -4px rgba(11, 58, 140, 0.08) !important;
  outline: none !important;
}

html body[class] #related .sm-rel-card .sm-rel-img {
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 50%, #BFDBFE 100%) !important;
  aspect-ratio: 16 / 9 !important;
  min-height: 160px !important;
  position: relative !important;
  overflow: hidden !important;
}

html body[class] #related .sm-rel-card .sm-rel-img::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 80% 20%, rgba(0, 112, 224, 0.25) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(11, 58, 140, 0.15) 0%, transparent 50%) !important;
  pointer-events: none !important;
}

html body[class] #related .sm-rel-card .sm-rel-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  position: relative !important;
  z-index: 1 !important;
}

html body[class] #related .sm-rel-card .sm-rel-body {
  padding: 28px 28px 32px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  flex: 1 !important;
}

html body[class] #related .sm-rel-card .sm-rel-body h3,
html body[class] #related .sm-rel-card .sm-rel-body h4 {
  color: #0F172A !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
  transition: color 0.2s ease !important;
}

html body[class] #related .sm-rel-card:hover .sm-rel-body h3,
html body[class] #related .sm-rel-card:hover .sm-rel-body h4 {
  color: #0070E0 !important;
}

html body[class] #related .sm-rel-card .sm-rel-body p {
  color: #475569 !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* Read-more affordance — arrow that slides on hover */
html body[class] #related .sm-rel-card .sm-rel-body::after {
  content: "Read more →" !important;
  color: #0070E0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin-top: auto !important;
  padding-top: 8px !important;
  transition: transform 0.2s ease, color 0.2s ease !important;
  letter-spacing: 0.005em !important;
}

html body[class] #related .sm-rel-card:hover .sm-rel-body::after {
  color: #0B3A8C !important;
  transform: translateX(4px) !important;
}

@media (prefers-reduced-motion: reduce) {
  html body[class] #related .sm-rel-card,
  html body[class] #related .sm-rel-card .sm-rel-body h3,
  html body[class] #related .sm-rel-card .sm-rel-body::after {
    transition: none !important;
    transform: none !important;
  }
}

/* ============================================================
 * SM-C2.1 — How It Works step number specificity bump
 * Force WUC brand-blue gradient on .sm-step-num (was losing
 * cascade to a slate gradient earlier in the stylesheet).
 * ============================================================ */
html body[class] #how-it-works .sm-timeline .sm-step .sm-step-num {
    background: linear-gradient(135deg, #3B8BF0 0%, #0070E0 50%, #0B3A8C 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(0, 112, 224, 0.28) !important;
}

/* ============================================================
 * SM-C5 — How It Works: horizontal process rail
 * Reduces section from 1.62 screens → ~0.5 screens.
 * Sidebar copy lifted above rail (centered headline + subhead + CTA).
 * 5-column grid with connecting line behind step number pills.
 * Mobile (<900px): collapses to vertical stack.
 * ============================================================ */
@media (min-width: 900px) {

    /* Lift sidebar copy ABOVE the rail by promoting its parent into a single full-width column */
    html body[class] #how-it-works > .elementor-container,
    html body[class] #how-it-works .elementor-row {
        flex-direction: column !important;
        gap: 32px !important;
    }
    html body[class] #how-it-works .elementor-column {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Sidebar block: center the headline/subhead/CTA */
    html body[class] #how-it-works .elementor-column:first-child {
        text-align: center !important;
    }
    html body[class] #how-it-works .elementor-column:first-child .elementor-widget-wrap {
        align-items: center !important;
        max-width: 760px !important;
        margin: 0 auto !important;
    }
    html body[class] #how-it-works .elementor-column:first-child .elementor-button-wrapper {
        text-align: center !important;
    }

    /* The rail itself: 5 equal columns with connector line */
    html body[class] #how-it-works .sm-timeline {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 20px !important;
        width: 100% !important;
        max-width: 1320px !important;
        margin: 0 auto !important;
        position: relative !important;
        padding: 0 !important;
    }

    /* Connector line behind the number pills */
    html body[class] #how-it-works .sm-timeline::before {
        content: "" !important;
        position: absolute !important;
        top: 22px !important;
        left: calc(10% + 22px) !important;
        right: calc(10% + 22px) !important;
        height: 2px !important;
        background: linear-gradient(90deg,
            rgba(0, 112, 224, 0.15) 0%,
            rgba(0, 112, 224, 0.45) 50%,
            rgba(0, 112, 224, 0.15) 100%) !important;
        z-index: 0 !important;
    }

    /* Each step: vertical stack, content below the number pill */
    html body[class] #how-it-works .sm-timeline .sm-step {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        width: auto !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        position: relative !important;
        z-index: 1 !important;
    }

    /* Number pill on top, no longer inline with title */
    html body[class] #how-it-works .sm-timeline .sm-step .sm-step-num {
        margin: 0 0 20px 0 !important;
        flex-shrink: 0 !important;
    }

    /* Hide the legacy connector line div if present (we use ::before now) */
    html body[class] #how-it-works .sm-timeline .sm-step .sm-step-line {
        display: none !important;
    }

    /* Content block: card surface for readability */
    html body[class] #how-it-works .sm-timeline .sm-step .sm-step-content {
        background: #ffffff !important;
        border: 1px solid rgba(15, 23, 42, 0.06) !important;
        border-radius: 16px !important;
        padding: 24px 20px !important;
        width: 100% !important;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
        transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
    }

    html body[class] #how-it-works .sm-timeline .sm-step .sm-step-content:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 8px 24px rgba(0, 112, 224, 0.12) !important;
        border-color: rgba(0, 112, 224, 0.18) !important;
    }

    html body[class] #how-it-works .sm-timeline .sm-step h4 {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #0F172A !important;
        margin: 0 0 10px 0 !important;
        line-height: 1.35 !important;
    }

    html body[class] #how-it-works .sm-timeline .sm-step p {
        font-size: 13.5px !important;
        line-height: 1.55 !important;
        color: #475569 !important;
        margin: 0 !important;
    }

}

/* Mobile: keep the original vertical stack — no changes */
@media (max-width: 899px) {
    html body[class] #how-it-works .sm-timeline {
        display: block !important;
    }
}

/* ============================================================
 * SM-C6 — Explore More: compact 3-column grid + brand-blue icon squares
 * Reduces section from 2.82 screens → ~0.5 screens.
 * Replaces empty .sm-rel-img placeholder with a 56×56 brand-blue
 * gradient icon square (different SVG per card via nth-child).
 * ============================================================ */
@media (min-width: 900px) {

    /* Grid layout */
    html body[class] #related .sm-rel-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 24px !important;
        max-width: 1280px !important;
        margin: 0 auto !important;
    }

    /* Card structure */
    html body[class] #related .sm-rel-grid .sm-rel-card {
        display: flex !important;
        flex-direction: column !important;
        background: #ffffff !important;
        border: 1px solid rgba(15, 23, 42, 0.08) !important;
        border-radius: 20px !important;
        padding: 32px 28px !important;
        text-decoration: none !important;
        transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
        height: auto !important;
        min-height: auto !important;
        position: relative !important;
    }

    html body[class] #related .sm-rel-grid .sm-rel-card:hover {
        transform: translateY(-4px) !important;
        box-shadow: 0 12px 28px rgba(0, 112, 224, 0.14) !important;
        border-color: rgba(0, 112, 224, 0.24) !important;
    }

    /* Kill the empty image placeholder */
    html body[class] #related .sm-rel-grid .sm-rel-card .sm-rel-img {
        display: none !important;
    }

    /* Inject brand-blue icon square via ::before */
    html body[class] #related .sm-rel-grid .sm-rel-card::before {
        content: "" !important;
        display: block !important;
        width: 56px !important;
        height: 56px !important;
        border-radius: 14px !important;
        margin: 0 0 20px 0 !important;
        background: linear-gradient(135deg, #3B8BF0 0%, #0070E0 50%, #0B3A8C 100%) !important;
        box-shadow: 0 6px 16px rgba(0, 112, 224, 0.22) !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 28px 28px, 100% 100% !important;
    }

    /* Card 1 — Storage Maintenance — disk/database icon */
    html body[class] #related .sm-rel-grid .sm-rel-card:nth-child(1)::before {
        background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='9' ry='3'/%3E%3Cpath d='M3 5v14a9 3 0 0 0 18 0V5'/%3E%3Cpath d='M3 12a9 3 0 0 0 18 0'/%3E%3C/svg%3E"),
            linear-gradient(135deg, #3B8BF0 0%, #0070E0 50%, #0B3A8C 100%) !important;
    }

    /* Card 2 — Network Maintenance — network/share icon */
    html body[class] #related .sm-rel-grid .sm-rel-card:nth-child(2)::before {
        background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5' r='2.5'/%3E%3Ccircle cx='5' cy='19' r='2.5'/%3E%3Ccircle cx='19' cy='19' r='2.5'/%3E%3Cpath d='M12 7.5v3'/%3E%3Cpath d='M10.5 12L6.5 17'/%3E%3Cpath d='M13.5 12l4 5'/%3E%3C/svg%3E"),
            linear-gradient(135deg, #3B8BF0 0%, #0070E0 50%, #0B3A8C 100%) !important;
    }

    /* Card 3 — Data Center Guide — document icon */
    html body[class] #related .sm-rel-grid .sm-rel-card:nth-child(3)::before {
        background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M8 13h8'/%3E%3Cpath d='M8 17h5'/%3E%3C/svg%3E"),
            linear-gradient(135deg, #3B8BF0 0%, #0070E0 50%, #0B3A8C 100%) !important;
    }

    /* Card body: tight, scannable */
    html body[class] #related .sm-rel-grid .sm-rel-card .sm-rel-body {
        height: auto !important;
        padding: 0 !important;
        background: transparent !important;
    }

    /* "Service" / "Resource" eyebrow */
    html body[class] #related .sm-rel-grid .sm-rel-card .sm-rel-eyebrow,
    html body[class] #related .sm-rel-grid .sm-rel-card .sm-rel-body > span:first-child {
        display: inline-block !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 1.4px !important;
        text-transform: uppercase !important;
        color: #0070E0 !important;
        margin: 0 0 10px 0 !important;
    }

    /* Title */
    html body[class] #related .sm-rel-grid .sm-rel-card h3,
    html body[class] #related .sm-rel-grid .sm-rel-card .sm-rel-title {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #0F172A !important;
        line-height: 1.3 !important;
        margin: 0 0 10px 0 !important;
    }

    /* Body copy */
    html body[class] #related .sm-rel-grid .sm-rel-card p {
        font-size: 13.5px !important;
        line-height: 1.55 !important;
        color: #475569 !important;
        margin: 0 0 16px 0 !important;
    }

    /* Arrow CTA at bottom */
    html body[class] #related .sm-rel-grid .sm-rel-card::after {
        content: "Learn more →" !important;
        display: inline-block !important;
        margin-top: auto !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #0070E0 !important;
        letter-spacing: 0.2px !important;
        transition: transform .25s ease !important;
    }

    html body[class] #related .sm-rel-grid .sm-rel-card:hover::after {
        transform: translateX(4px) !important;
    }

}

/* Mobile: stack to single column */
@media (max-width: 899px) {
    html body[class] #related .sm-rel-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    html body[class] #related .sm-rel-grid .sm-rel-card .sm-rel-img {
        display: none !important;
    }
}

/* ============================================================
 * SM-C5.1 — How It Works parent grid override
 * .sm-proc-grid wraps sidebar + timeline in a 2-column grid with
 * max-width: 900px. To let the 5-column rail expand full width,
 * collapse .sm-proc-grid to single-column block at ≥900px.
 * ============================================================ */
@media (min-width: 900px) {
    html body[class] #how-it-works .sm-proc-grid {
        display: block !important;
        max-width: 1200px !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    /* Sidebar intro block — center above the rail */
    html body[class] #how-it-works .sm-proc-grid > *:first-child,
    html body[class] #how-it-works .sm-proc-intro,
    html body[class] #how-it-works .sm-proc-sidebar {
        text-align: center !important;
        max-width: 720px !important;
        margin: 0 auto 40px auto !important;
    }

    /* Rail wrapper: full width */
    html body[class] #how-it-works .sm-timeline {
        max-width: 1200px !important;
        width: 100% !important;
    }
}