/* Store DID renewal: Moahome brand first, operating screens second. */
.service-detail-page.did-page {
  --service-accent: #2e62d0;
  --service-accent-strong: #8eaff4;
  --service-hero: #101a2b;
  --service-hero-copy: #fffdf9;
  --service-hero-muted: #c0c8d4;
  --service-panel: #edf2fc;
  --service-focus: #8eaff4;
}

.did-page .search-nav {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(16, 26, 43, 0.94);
}

.did-page .service-brand-mark { color: #fffdf9; }
.did-page .search-nav .search-primary,
.did-page .service-hero .search-actions a:first-child {
  border-color: #fffdf9;
  background: #fffdf9;
  color: #101a2b;
}

.did-page .service-mobile-nav {
  border-color: rgba(255, 255, 255, 0.12);
  background: #101a2b;
}

.did-page .service-hero .search-hero-grid {
  min-height: min(750px, calc(100svh - 70px));
}

.did-page .service-hero h1 {
  max-width: 12ch;
  font-size: clamp(3rem, 4.8vw, 4.75rem);
  font-weight: 700;
}

.did-page .service-hero h1 span { color: #8eaff4; }
.did-page .service-hero .search-kicker { color: #8eaff4; }
.did-page .service-launch-note i { background: #8eaff4; }

.did-page .service-hero .search-visual {
  min-height: 500px;
  border-color: rgba(255, 255, 255, 0.18);
  background: #07101d;
  box-shadow: 24px 24px 0 rgba(46, 98, 208, 0.2);
}

.did-page .service-hero .search-visual img { min-height: 500px; }
.did-page .service-hero .search-visual figcaption { background: rgba(16, 26, 43, 0.9); }
.did-page .service-hero .search-visual figcaption > :first-child { color: #fffdf9; }

.did-page .search-facts {
  margin-bottom: 0;
  background: #fffdf9;
}

.did-page .search-facts dt,
.did-page .search-kicker { color: #2e62d0; }

.did-page .service-statement { border-top: 0; }
.did-page .service-statement h2 { max-width: 12ch; }
.did-page .service-channel-flow span:first-child { background: #101a2b; }
.did-page .service-channel-flow span:first-child::after { background: #101a2b; }

.did-page #examples {
  position: relative;
  isolation: isolate;
}

.did-page #examples::before {
  position: absolute;
  inset: 0 50%;
  z-index: -1;
  width: 100vw;
  transform: translateX(-50%);
  background: #fffdf9;
  content: "";
}

.did-page .did-showcase {
  gap: 18px;
  border: 0;
  background: transparent;
}

.did-page .did-showcase > a {
  background: #101a2b;
  box-shadow: 0 1px 0 rgba(16, 26, 43, 0.12);
}

.did-page .did-showcase span {
  padding: 58px 22px 20px;
  background: linear-gradient(transparent, rgba(16, 26, 43, 0.94));
}

.did-page .did-showcase small { color: #d8dee8; }
.did-page .did-showcase em { color: #b7cbf7; }

.did-page #included > header { margin-bottom: 54px; }
.did-page .search-process { gap: 20px; }
.did-page .search-process article {
  min-height: 220px;
  padding: 26px 24px;
  border: 1px solid var(--line);
  background: #fffdf9;
}

.did-page .search-process h3 { margin-top: 48px; }
.did-page .did-benefit-list { margin-top: 70px; }
.did-page .did-benefit-list article { grid-template-columns: 72px 0.7fr 1.3fr; }

.did-page .service-scope section:first-child { background: #fffdf9; }
.did-page .service-scope section + section { background: #edf2fc; }

.did-page #price {
  position: relative;
  isolation: isolate;
}

.did-page #price::before {
  position: absolute;
  inset: 0 50%;
  z-index: -1;
  width: 100vw;
  transform: translateX(-50%);
  background: #fffdf9;
  content: "";
}

.did-page .did-single-price {
  border-top: 1px solid #101a2b;
  border-bottom: 1px solid var(--line);
  background: #fffdf9;
  color: #101a2b;
}

.did-page .did-single-price > div + div { border-color: var(--line); }
.did-page .did-single-price .search-kicker { color: #2e62d0; }
.did-page .did-single-price > div:first-child > p:not(.search-kicker),
.did-page .did-single-price ul,
.did-page .did-single-price-note { color: #4f5968; }
.did-page .did-single-price-note strong { color: #101a2b; }
.did-page .did-single-price .search-actions a:first-child { border-color: #2e62d0; background: #2e62d0; }
.did-page .did-single-price .search-actions a + a { border-color: var(--line); background: transparent; color: #101a2b; }

.did-page .service-final {
  position: relative;
  overflow: hidden;
  background: #101a2b;
}

.did-page .service-final::before {
  position: absolute;
  top: -110px;
  right: -70px;
  width: 280px;
  height: 280px;
  border: 46px solid rgba(46, 98, 208, 0.3);
  border-radius: 50%;
  content: "";
}

.did-page .service-final > * { position: relative; z-index: 1; }
.did-page .service-final .search-kicker { color: #8eaff4; }
.did-page .service-final a { border-color: #fffdf9; background: #fffdf9; color: #101a2b; }
.did-page .service-final a + a { color: #fffdf9; background: transparent; }

@media (max-width: 760px) {
  .did-page .search-process { grid-template-columns: 1fr; }
  .did-page .search-process article { min-height: 0; }
  .did-page .search-process h3 { margin-top: 24px; }
}

@media (max-width: 560px) {
  .did-page .service-hero .search-hero-grid { gap: 40px; padding-top: 44px; }
  .did-page .service-hero h1 {
    max-width: 13ch;
    font-size: clamp(1.78rem, 7.55vw, 2.05rem);
    line-height: 1.14;
  }
  .did-page .service-hero .search-lede { font-size: 0.94rem; }
  .did-page .service-hero .search-actions { grid-template-columns: 1fr; }
  .did-page .service-hero .search-actions a { min-height: 52px; }
  .did-page .service-hero .search-visual,
  .did-page .service-hero .search-visual img { min-height: 300px; }
  .did-page .service-hero .search-visual { box-shadow: 10px 10px 0 rgba(46, 98, 208, 0.2); }
  .did-page .search-facts { grid-template-columns: 1fr 1fr; }
  .did-page .search-facts div,
  .did-page .search-facts div + div { min-height: 86px; padding: 15px 12px; }
  .did-page .service-statement h2 { max-width: 13ch; }
  .did-page .did-showcase { gap: 10px; }
  .did-page .did-benefit-list { margin-top: 48px; }
  .did-page .did-benefit-list article { grid-template-columns: 42px 1fr; gap: 9px 14px; }
  .did-page .did-benefit-list article p { grid-column: 2; }
  .did-page .did-single-price > div { padding: 30px 22px; }
  .did-page .service-final::before { opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
  .did-page .did-showcase img { transition: none; }
}