/* Shared refinements for the System Integration and Business Process Automation pages. */
.svc-page section[id] { scroll-margin-top: 100px; }
.svc-page .svc-hero h1 { max-width: none; text-wrap: balance; }
.svc-page .svc-hero .sms-button svg { flex: none; }
@media (max-width: 767px) {
  .svc-page .svc-hero .sms-hero__photo { opacity: .48; }
}
@media (min-width: 1280px) {
  .svc-page .svc-hero .sms-hero__copy { max-width: 44rem; }
  .svc-page .svc-hero--automation h1 { font-size: 54px; }
}

.svc-page .sms-section-heading h2 { text-wrap: balance; }
.svc-muted { background: #f6f7f8; }
.svc-split { display: grid; gap: 36px; }
@media (min-width: 1024px) {
  .svc-split {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: clamp(44px, 6vw, 88px);
    align-items: start;
  }
}

/* SaaS-style numbered lists and Mobile App-style reason rows. */
.svc-page .svc-rows,
.svc-page .svc-reasons { padding: 0; border-top: 1px solid #d8dce3; list-style: none; }
.svc-page .svc-reasons { margin-top: 42px; }
.svc-rows li,
.svc-reasons li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid #d8dce3;
}
.svc-rows li > span,
.svc-reasons li > span { color: var(--sms-red); font-size: 26px; font-weight: 600; line-height: 1.2; }
.svc-rows h3,
.svc-reasons h3 { color: var(--sms-navy); font-size: 22px; font-weight: 600; line-height: 1.25; }
.svc-page .svc-rows p,
.svc-page .svc-reasons p { margin-top: 7px; color: #596477; font-size: 16px; line-height: 1.6; }
@media (min-width: 1024px) {
  .svc-reasons li > div { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: 32px; }
  .svc-page .svc-reasons p { margin-top: 0; }
}

/* Numbered capability tiles based on the Mobile App page. */
.svc-grid { display: grid; gap: 1px; margin-top: 40px; background: #d8dce3; }
.svc-card { min-width: 0; padding: 28px; background: #f7f8f9; }
.svc-card__number { display: flex; align-items: center; justify-content: space-between; color: var(--sms-red); font-size: 28px; font-weight: 600; line-height: 1; }
.svc-card__number::after { width: 40px; height: 1px; background: currentColor; opacity: .5; content: ""; }
.svc-card h3 { margin-top: 26px; color: var(--sms-navy); font-size: 23px; font-weight: 600; line-height: 1.25; }
.svc-page .svc-card p { margin-top: 10px; color: #596477; font-size: 16px; line-height: 1.6; }
.svc-page .svc-card ul { margin-top: 16px; padding: 14px 0 0 17px; border-top: 1px solid #d8dce3; color: #475467; font-size: 15px; }
.svc-card li + li { margin-top: 6px; }
.svc-card li::marker { color: var(--sms-red); }
.svc-dark { background: var(--sms-navy); color: #fff; }
.svc-dark .sms-section-heading h2,
.svc-dark .svc-card h3 { color: #fff; }
.svc-dark .sms-section-heading h2 em,
.svc-dark .svc-card__number { color: #ff667e; }
.svc-page .svc-dark .sms-section-heading > p:last-child,
.svc-page .svc-dark .svc-card p { color: rgba(255, 255, 255, .74); }
.svc-dark .svc-grid { background: rgba(255, 255, 255, .16); }
.svc-dark .svc-card { background: var(--sms-navy-soft); }
@media (min-width: 640px) {
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-grid--five .svc-card:last-child { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .svc-grid--five { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .svc-grid--five .svc-card { grid-column: span 2; }
  .svc-grid--five .svc-card:nth-last-child(-n + 2) { grid-column: span 3; }
}

.svc-page .svc-note { padding: 14px 16px; border-left: 2px solid var(--sms-red); background: #fff; }
.svc-case-panels { display: grid; gap: 24px; }
.svc-page .sms-showcase__copy .sms-showcase__button { margin-top: 20px; }

/* MVP-style delivery timeline. */
.svc-page .svc-timeline {
  position: relative;
  display: grid;
  gap: 32px;
  margin-top: 44px;
  padding: 0;
  list-style: none;
}
.svc-timeline li > span {
  position: relative;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 4px solid #f6f7f8;
  background: var(--sms-red);
  color: #fff;
  font-weight: 600;
}
.svc-timeline h3 { margin-top: 18px; color: var(--sms-navy); font-size: 22px; line-height: 1.25; }
.svc-page .svc-timeline p { margin-top: 10px; color: #596477; font-size: 16px; line-height: 1.6; }
@media (min-width: 640px) {
  .svc-page .svc-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .svc-page .svc-timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .svc-timeline::before { position: absolute; top: 24px; right: 0; left: 0; border-top: 1px solid #d8dce3; content: ""; }
}

.svc-start-copy { border-top: 1px solid rgba(255, 255, 255, .2); }
.svc-page .svc-start-copy p {
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .2);
  color: rgba(255, 255, 255, .82);
  font-size: 18px;
  line-height: 1.6;
}
.svc-page .sms-cta-contact { border-top: 1px solid #d8dce3; }
.svc-page .svc-confidentiality p { padding-top: 18px; color: #596477; }
.svc-page .sms-cta-contact--dark { border-top: 0; background: var(--sms-navy); color: #fff; }
.svc-page .sms-cta-contact--dark .sms-cta-contact__copy h2 { color: #fff; }
.svc-page .sms-cta-contact--dark .sms-cta-contact__copy > p,
.svc-page .sms-cta-contact--dark .svc-confidentiality p { color: rgba(255, 255, 255, .72); }
.svc-page .sms-cta-contact--dark .svc-confidentiality { border-color: rgba(255, 255, 255, .16); }
.svc-page .sms-cta-btn { white-space: normal; }