/* The artwork is cropped from the service-page design. Keep controls and copy live. */
.on-services-page .app-shell {
  background: radial-gradient(ellipse 125% 250px at 88% 0%, #a9d2f8, transparent),
    linear-gradient(#e1effc, #edf5fd 530px, var(--background));
}
.on-services-page .app-header { position: relative; background: transparent; }
.on-services-page .header-context { gap: 0 8px; }
.on-services-page .header-brand { font-size: 1.875rem; }
.on-services-page .header-brand-mark { width: 36px; height: auto; }
.on-services-page .location-context {
  min-width: 56px;
  max-width: 100%;
  padding-inline: 7px 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
.on-services-page .location-context .icon { color: currentColor; }
.on-services-page .location-context::before {
  content: "";
  height: 15px;
  border-inline-start: 1px solid #a8c5e4;
  margin-inline-end: 5px;
}
.on-services-page .mini-program-capsule { border-color: transparent; }
.on-services-page main { padding: 0 8px calc(var(--nav-height) + 16px); }

.services-intro {
  position: relative;
  isolation: isolate;
  margin-inline: -8px;
  padding: 18px 20px 15px;
}
.services-intro::before {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  z-index: -1;
  width: 53%;
  background: url('../assets/services-beijing.webp') right bottom / 100% auto no-repeat;
  mask-image: linear-gradient(90deg, transparent, #000 27%),
    linear-gradient(to top, transparent, #000 26px);
  mask-composite: intersect;
  pointer-events: none;
}
.services-intro h1 { font-size: 2rem; line-height: 1.3; }
.services-intro p {
  width: fit-content;
  max-width: 100%;
  padding-inline-end: 4px;
  font-size: var(--font-body);
  line-height: 1.5;
}

.services-feature-list { display: grid; gap: 7px; }
.services-feature {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  min-height: 106px;
  padding: 10px 15px;
  border: 1.5px solid var(--surface);
  border-radius: var(--radius-panel);
  background: var(--feature-surface);
  box-shadow: var(--shadow-soft);
  color: var(--feature-ink);
  text-align: left;
}
.services-feature::before {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  z-index: -1;
  width: var(--art-width, 51%);
  border-radius: inherit;
  background: var(--feature-art) right center / cover no-repeat;
  mask-image: linear-gradient(90deg, transparent, #000 24%);
  pointer-events: none;
}
.services-feature:active .services-feature-action { filter: brightness(.9); }
.services-feature-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.services-feature-copy > strong {
  max-width: 100%;
  font-size: 1.875rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.services-feature-description,
.services-feature-copy > small {
  max-width: 100%;
  padding-inline-end: 4px;
  border-radius: 4px;
  background: var(--feature-surface);
  font-size: var(--font-supporting);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.services-feature-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  margin-top: 5px;
  padding: 3px 14px;
  border: 1.5px solid var(--surface);
  border-radius: var(--radius-action);
  background: var(--feature-action);
  color: var(--on-primary);
  font-size: var(--font-body);
  font-weight: 600;
  line-height: 1.35;
}
.services-feature-action .icon { width: 12px; height: 16px; stroke-width: 2.8; }
.services-feature-policy {
  --feature-surface: #dcecff;
  --feature-ink: #0b1b4a;
  --feature-action: linear-gradient(#1473d2, #0b5eb9);
  --feature-art: url('../assets/services-policy.webp');
}
.services-feature-policy::before { background-position: right top; }
.services-feature-coupon {
  --feature-surface: #ffebde;
  --feature-ink: #681f0b;
  --feature-action: linear-gradient(#b94325, #aa3014);
  --feature-art: url('../assets/services-coupons.webp');
  --art-width: 55%;
}
.services-feature-institution {
  --feature-surface: #dff3ed;
  --feature-ink: #0c3633;
  --feature-action: linear-gradient(#247864, #075449);
  --feature-art: url('../assets/services-institution.webp');
}
.services-feature-travel {
  --feature-surface: #eae6fb;
  --feature-ink: #241152;
  --feature-action: linear-gradient(#745bc4, #5740a6);
  --feature-art: url('../assets/services-travel.webp');
}
.on-services-page .bottom-nav { border-radius: var(--radius-panel) var(--radius-panel) 0 0; }
.on-services-page .nav-item:not([aria-current]) { color: var(--text); }
.on-services-page .nav-item[data-action="services"][aria-current="page"] .icon { fill: currentColor; }

@media (max-width: 359px) {
  .services-feature { padding-inline: 11px; }
  .services-feature::before { mask-image: linear-gradient(90deg, transparent, #000 46%); }
}
.large-text .services-intro::before,
.large-text .services-feature::before { opacity: .22; }
.large-text .services-feature-action { overflow-wrap: anywhere; }