/* Service choices extend the site's accepted independent-button pattern.
   SVGs: Remix Icon v4.5.0; see home-service-icons-LICENSE.txt. */
:is(body.home-view, .workflow-services) .home-services {grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-top: 24px; margin-top: 36px;}
:is(body.home-view, .workflow-services) .home-service {
  --service-accent: #4166d8; --service-soft: #f0f4ff; --service-border: #c7d4fa;
  position: relative; box-sizing: border-box; min-width: 0; min-height: 106px; padding: 15px 8px 13px;
  gap: 10px; border: 1px solid #e5e9ef; border-radius: 15px; background: #fff;
  color: #394456; cursor: pointer; text-decoration: none; box-shadow: 0 2px 5px #1e293b05;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
:is(body.home-view, .workflow-services) .home-service--wechat {--service-accent: #268346; --service-soft: #effaf2; --service-border: #b8dfc5;}
:is(body.home-view, .workflow-services) .home-service--deployment {--service-accent: #277aa8; --service-soft: #eef8fc; --service-border: #b8dcea;}
:is(body.home-view, .workflow-services) .home-service--custom {--service-accent: #7c55c5; --service-soft: #f6f1ff; --service-border: #d6c6f2;}
:is(body.home-view, .workflow-services) .home-service--taobao {--service-accent: #c35b15; --service-soft: #fff5ec; --service-border: #f2caa9;}
.service-emblem {display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: var(--service-soft); color: var(--service-accent);}
:is(body.home-view, .workflow-services) .home-service .service-icon {width: 26px; height: 26px; fill: currentColor; stroke: none; stroke-width: 0;}
:is(body.home-view, .workflow-services) .home-service--wechat .service-icon {color: #07a94d;}
:is(body.home-view, .workflow-services) .home-service--taobao .service-icon {color: #ff6a00;}
.service-label {font-size: 14px; line-height: 22px; font-weight: 500; white-space: nowrap;}
.service-action {position: absolute; right: 12px; top: 10px; color: #95a0b0; font-size: 13px; line-height: 18px; font-weight: 400;}
:is(body.home-view, .workflow-services) .home-service:hover, :is(body.home-view, .workflow-services) .home-service:focus-visible {background: var(--service-soft); border-color: var(--service-border); color: var(--service-accent); box-shadow: 0 6px 16px #24334a0e; transform: translateY(-2px);}
.home-service:hover .service-action, .home-service:focus-visible .service-action {color: var(--service-accent);}
:is(body.home-view, .workflow-services) .home-service:focus-visible {outline: 2px solid var(--service-accent); outline-offset: 3px;}
:is(body.home-view, .workflow-services) .home-service:active {transform: translateY(0); box-shadow: 0 1px 3px #24334a08;}
@media (max-width: 600px) {
  :is(body.home-view, .workflow-services) .service-label {font-size:13px;}
  :is(body.home-view, .workflow-services) .home-services {grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 20px; margin-top: 32px;}
  :is(body.home-view, .workflow-services) .home-service {min-height: 100px; padding: 13px 8px 11px;}
}
@media (prefers-reduced-motion: reduce) {
  :is(body.home-view, .workflow-services) .home-service {transition: none;}
  :is(body.home-view, .workflow-services) .home-service:hover, :is(body.home-view, .workflow-services) .home-service:focus-visible {transform: none;}
}

/* Reuse the homepage service choices after routed workflow content. */
.workflow-services {width:100%;max-width:1200px;margin:0 auto;padding:0 44px 48px;}
body.home-view .workflow-services {display:none;}
.workspace > .workflow-services .home-services {display:grid;width:min(100%,760px);margin:0 auto;border-top:1px solid #e7e9ed;}
.workflow-services .home-service {display:flex;flex-direction:column;align-items:center;justify-content:center;font:inherit;}
@media(max-width:760px) {.workflow-services {padding:0 16px 40px;}}

/* Keep both service explanations in the existing contact dialog. */
#service-contact-dialog .service-deployment + .service-deployment {border-top:0;margin-top:-24px;}
#service-contact-dialog .service-deployment-content > strong {display:block;margin-bottom:8px;color:#394456;font-size:14px;}