/* Shared brand surface for public secondary pages. */
body.service-page {
  --page: #05070a;
  --page-soft: #080b10;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-solid: #090d12;
  --surface-quiet: rgba(255, 255, 255, 0.025);
  --line: rgba(218, 228, 239, 0.12);
  --line-strong: rgba(218, 228, 239, 0.24);
  --text: #f2f4f6;
  --muted: #8f9aa8;
  --muted-strong: #c1c8d0;
  --accent: #78b8ff;
  --accent-strong: #78b8ff;
  --shadow: none;
  background: var(--page);
}

html[data-theme="light"] body.service-page {
  --page: #f2f4f6;
  --page-soft: #e9edf1;
  --surface: rgba(255, 255, 255, 0.78);
  --surface-solid: #ffffff;
  --surface-quiet: rgba(17, 24, 32, 0.025);
  --line: rgba(17, 24, 32, 0.12);
  --line-strong: rgba(17, 24, 32, 0.24);
  --text: #111820;
  --muted: #637080;
  --muted-strong: #374351;
  --accent: #1769c4;
  --accent-strong: #1769c4;
  background: var(--page);
}

.service-page .site-shell,
.service-page main,
html[data-theme="light"] .service-page .site-shell,
html[data-theme="light"] .service-page main {
  background: var(--page);
}

.service-page .topbar {
  background: rgba(5, 7, 10, 0.94);
  border-bottom-color: var(--line);
}

html[data-theme="light"] .service-page .topbar {
  background: rgba(242, 244, 246, 0.94);
  border-bottom-color: var(--line);
}

.service-page .brand img {
  border-radius: 0;
}

.service-page .nav {
  font-weight: 600;
}

.service-page .hero {
  padding-top: 112px;
  padding-bottom: 92px;
}

.service-page .hero h1,
.service-page .section h2,
.service-page .section-heading h2,
.service-page .case-heading strong {
  font-family: "Noto Serif SC", "Songti SC", STSong, serif;
  font-weight: 600;
  letter-spacing: 0;
}

.service-page .hero h1 {
  max-width: 1040px;
  font-size: clamp(48px, 5vw, 70px);
  line-height: 1.2;
}

.service-page .hero-split h1 {
  font-size: clamp(48px, 4.25vw, 62px);
}

.service-page .hero .lead {
  max-width: 900px;
  color: var(--muted-strong);
  font-size: 18px;
}

.service-page .hero h1 span,
.service-page .section h2 span {
  color: var(--text);
}

.service-page .btn {
  min-height: 46px;
  border-radius: 4px;
  box-shadow: none;
}

.service-page .btn.primary,
.service-page .btn.experience {
  color: #05070a;
  background: var(--text);
  border-color: var(--text);
}

html[data-theme="light"] .service-page .btn.primary,
html[data-theme="light"] .service-page .btn.experience {
  color: #ffffff;
  background: #111820;
  border-color: #111820;
}

.service-page .section {
  padding-top: 92px;
  padding-bottom: 92px;
}

.service-page .section h2 {
  font-size: clamp(34px, 3.4vw, 48px);
}

.service-page .card,
.service-page .table-wrap,
.service-page .answer-box,
.service-page .note {
  background: var(--surface-quiet);
  box-shadow: none;
}

.service-page .card,
.service-page .screenshot-card,
.service-page .hero-preview,
.service-page .case-cta .answer-box {
  border-color: var(--line);
  border-radius: 6px;
  box-shadow: none;
}

.service-page .screenshot-card,
.service-page .hero-preview {
  background: var(--surface-solid);
}

.service-page .grid.five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.service-page .footer {
  background: #05070a;
  border-top: 1px solid var(--line);
}

html[data-theme="light"] .service-page .footer {
  color: var(--text);
  background: #e9edf1;
}

@media (max-width: 640px) {
  .service-page .hero {
    padding-top: 72px;
    padding-bottom: 56px;
  }

  .service-page .hero h1 {
    font-size: 42px;
  }

  .service-page .hero .lead {
    font-size: 16px;
  }

  .service-page .section {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .service-page .grid.five {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 641px) and (max-width: 1100px) {
  .service-page .grid.five {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}