body[data-site="tooling"] {
  --ink: #213951;
  --muted: #4a6075;
  --blue: #276594;
  --blue-deep: #214e73;
  --pale: #f0f5f9;
  --line: #d2e0ea;
  font-family: "Geist", "Segoe UI", "Microsoft YaHei", sans-serif;
}

body[data-site="tooling"] :is(.eyebrow, .topline, .vertical-card-note) {
  font-family: "IBM Plex Mono", "Cascadia Mono", monospace;
  letter-spacing: .055em;
}

body[data-site="tooling"][data-language="zh"] :is(.eyebrow, .topline, .vertical-card-note) {
  font-family: inherit;
}

body[data-site="tooling"] .topline,
body[data-site="tooling"] .value-strip {
  background: #e5eff6;
  color: #29445b;
}

body[data-site="tooling"] :is(.button.red, .floating-contact a) {
  border-color: #215d89;
  border-radius: 8px;
  background: #215d89;
  color: #fff;
}

body[data-site="tooling"] :is(.button.red, .floating-contact a):hover {
  background: #164769;
}

body[data-site="tooling"] .button.outline {
  border-radius: 8px;
  border-color: #c4d7e6;
  color: #214e73;
}

body[data-site="tooling"] :is(.page-hero, .project-prompt, .vertical-catalog, .video-section) {
  background: #edf4f9;
}

body[data-site="tooling"] .vertical-hero .hero-slide {
  background: #eaf2f8;
}

body[data-site="tooling"] .vertical-hero .hero-copy .hero-title {
  color: #20384f;
  font-size: clamp(37px, 4.2vw, 64px);
  font-weight: 720;
  letter-spacing: -.05em;
}

body[data-site="tooling"] .vertical-hero .hero-tags span {
  border-radius: 5px;
}

body[data-site="tooling"] .vertical-catalog .vertical-card {
  border-radius: 8px;
  box-shadow: none;
  border-top: 3px solid #3d739a;
}

body[data-site="tooling"] .vertical-card-note {
  color: #3f5e76;
}

body[data-site="tooling"] .vertical-product .vertical-photo,
body[data-site="tooling"] .vertical-checklist,
body[data-site="tooling"] .vertical-guide-card {
  border-radius: 8px;
}

body[data-site="tooling"] .home-process {
  background: #f6f9fc;
}

body[data-site="tooling"] footer {
  background: #e7eff6;
  color: #263f56;
}

@media (min-width: 1000px) {
  body[data-site="tooling"] .vertical-hero .hero-slides {
    height: clamp(510px, 42vw, 650px);
  }

  body[data-site="tooling"] .vertical-hero .hero-slide .hero-art {
    inset: 38px max(36px, calc((100% - 1240px) / 2)) 38px 49%;
    border: 1px solid #b9cddd;
    border-radius: 10px;
    box-shadow: 0 18px 38px #12335018;
  }

  body[data-site="tooling"] .vertical-hero .hero-slide .hero-art::after {
    background: linear-gradient(180deg, transparent 70%, #244a6a70);
  }

  body[data-site="tooling"] .vertical-hero .hero-copy {
    max-width: 48%;
    padding-right: 22px;
  }
}