.services-main {
  padding: 2.625rem 0 4.875rem;
}

.services-shell {
  position: relative;
  overflow: hidden;
  padding: 1.5rem;
  color: #17192b;
  border: 1px solid #e3e6f1;
  border-radius: 1.75rem;
  background: #f6f7fc;
}

.services-shell::before {
  position: absolute;
  top: -13.75rem;
  right: -11.25rem;
  width: 22.5rem;
  height: 22.5rem;
  border-radius: 50%;
  background: rgb(109 93 251 / 11%);
  content: "";
  pointer-events: none;
}

.services-intro,
.services-directions,
.services-content,
.services-help {
  position: relative;
}

.services-intro {
  max-width: 47.5rem;
  margin-bottom: 1.75rem;
}

.services-kicker {
  margin-bottom: 0.625rem;
  color: var(--color-accent);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.services-intro h1 {
  margin-bottom: 0.75rem;
  font-size: 1.5rem;
  font-weight: 500;
}

.services-intro > p:last-child { color: #6f768b; }
.services-content-head > p { color: #777e94; }

.services-directions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem;
  margin-bottom: 1.875rem;
}

.services-direction {
  display: flex;
  justify-content: space-between;
  gap: 1.125rem;
  align-items: center;
  min-height: 7rem;
  padding: 1.25rem;
  color: #17192b;
  border: 1px solid #dfe2ed;
  border-radius: 1.375rem;
  background: var(--color-surface);
  text-align: left;
}

.services-direction__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--color-accent);
  border-radius: 0.8125rem;
  background: #efedff;
}

.services-direction__copy {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
}

[data-theme="dark"] .services-direction__icon {
  background: rgb(109 93 251 / 16%);
}

.services-direction strong,
.services-direction small {
  display: block;
}

.services-direction strong {
  margin-bottom: 0.3125rem;
  color: #17192b;
  font-size: 0.875rem;
  font-weight: 500;
}

.services-direction small {
  color: #71788e;
  font-size: 0.875rem;
  line-height: 1.5;
}

.services-direction > .icon {
  color: var(--color-muted);
}

.services-direction.is-active {
  color: #fff;
  border-color: var(--color-accent);
  background: var(--color-accent);
}

.services-direction.is-active .services-direction__icon {
  color: #fff;
  background: rgb(255 255 255 / 16%);
}

.services-direction.is-active small { color: rgb(255 255 255 / 78%); }
.services-direction.is-active > .icon { color: #fff; }

.services-content-head {
  display: flex;
  justify-content: space-between;
  gap: 1.125rem;
  align-items: end;
  margin-bottom: 1rem;
}

.services-content-head h2 {
  margin-bottom: 0.3125rem;
  font-size: 1.25rem;
}

.services-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem;
}

.services-cards--direct {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.services-card {
  min-height: 13.75rem;
  padding: 1.375rem;
  border: 1px solid #dfe2ed;
  border-radius: 1.375rem;
  background: var(--color-surface);
}

.services-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2.125rem;
}

.services-card__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--color-accent);
  border-radius: 0.8125rem;
  background: #efedff;
}

.services-card__label {
  padding: 0.375rem 0.625rem;
  color: #5c6378;
  border-radius: 999px;
  background: #f2f3f8;
  font-size: 0.75rem;
  line-height: 1rem;
}

.services-card h3 {
  margin-bottom: 0.625rem;
  font-size: 1.125rem;
}

.services-card > p {
  min-height: 3rem;
  margin-bottom: 1.375rem;
  color: #6f768b;
}

.services-card__link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4375rem;
  width: 100%;
  color: var(--color-accent);
  font-weight: 500;
}

.services-card:hover {
  border-color: rgb(109 93 251 / 36%);
}

.services-help {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: center;
  margin-top: 1rem;
  padding: 1.25rem 1.375rem;
  color: #fff;
  border-radius: 1.375rem;
  background: #171c35;
}

.services-help h2 {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
}

.services-help p {
  margin-top: 0.3125rem;
  color: rgb(255 255 255 / 70%);
}

[data-theme="dark"] .services-shell {
  color: #f7f8fc;
  border-color: #1d2440;
  background: #080b1d;
}

[data-theme="dark"] .services-shell::before { background: rgb(109 93 251 / 18%); }
[data-theme="dark"] .services-direction,
[data-theme="dark"] .services-card {
  color: #f7f8fc;
  border-color: #252d4c;
  background: #11162c;
}

[data-theme="dark"] .services-direction.is-active { border-color: #7464ff; background: var(--color-accent); }
[data-theme="dark"] .services-direction strong { color: #f7f8fc; }
[data-theme="dark"] .services-direction.is-active strong { color: #fff; }
[data-theme="dark"] .services-card__icon { background: #20284a; }
[data-theme="dark"] .services-card__label { color: #c8cee0; background: #20263e; }
[data-theme="dark"] .services-intro > p:last-child,
[data-theme="dark"] .services-content-head > p,
[data-theme="dark"] .services-direction small,
[data-theme="dark"] .services-card > p { color: #aeb5ca; }
[data-theme="dark"] .services-kicker,
[data-theme="dark"] .services-card__link { color: #9a8fff; }
[data-theme="dark"] .services-help { background: #171e3a; }

.services-content-head > .services-card__link {
  width: auto;
  white-space: nowrap;
}

.services-help__actions {
  display: flex;
  gap: 0.625rem;
  flex: 0 0 auto;
}

.services-help__actions a,
.services-help__actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  min-height: 2.75rem;
  padding: 0.625rem 0.9375rem;
  border-radius: 0.8125rem;
  font-weight: 500;
}

.services-help__actions a {
  color: #fff;
  border: 1px solid rgb(255 255 255 / 20%);
}

.services-help__actions button {
  color: #fff;
  border: 0;
  background: var(--color-accent);
}

@media (max-width: 47.5rem) {
  .services-main { padding-top: 1.5rem; }
  .services-shell { padding: 1.125rem; }
  .services-directions,
  .services-cards,
  .services-cards--direct { grid-template-columns: 1fr; }
  .services-content-head,
  .services-help { align-items: stretch; flex-direction: column; }
  .services-help__actions { flex-wrap: wrap; }
  .services-card > p { min-height: 0; }
}

@media (max-width: 35rem) {
  .services-main { padding-bottom: 3.625rem; }
  .services-intro h1 { font-size: 1.5rem; }
}