/* API product pages (Model API, GPU Pricing API, Research API), layered on
 * top of the shared .samx system (accelerator-model.scss loads first).
 * The hero art is a full-bleed vector background that sits on the right and
 * fades to black under the copy, so these heroes carry no media column and
 * none of the shared wash, grid, streak or orbs.
 */
.samx-api {
  --samx-api-accent: var(--samx-amber);
}

.samx-api.samx--blue {
  --samx-api-accent: var(--samx-blue);
}

.samx-api.samx--coral {
  --samx-api-accent: var(--samx-coral);
}

.samx-api .samx-hero__bg {
  background-color: #060606;
  background-position: right center;
  background-repeat: no-repeat;
  background-size: cover;
}

.samx-api--model .samx-hero__bg {
  background-image: url("../../img/api/model-api-hero.svg");
}

.samx-api--gpu .samx-hero__bg {
  background-image: url("../../img/api/gpu-pricing-api-hero.svg");
}

.samx-api--research .samx-hero__bg {
  background-image: url("../../img/api/research-api-hero.svg");
}

/* Tall enough for the art to read; the shared grid centers the copy. */
.samx-api .samx-hero__inner {
  min-height: clamp(520px, 68vh, 760px);
}

/* Below two columns the art sits behind the copy: dim it and pull it right. */
@media (max-width: 900px) {
  .samx-api .samx-hero__bg {
    background-position: 72% center;
    opacity: 0.4;
  }
}
.samx-api__eyebrow {
  font-family: var(--samx-ft-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--samx-api-accent);
  margin-bottom: 18px;
}

.samx-api__tagline {
  font-family: var(--samx-ft-body);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 300;
  line-height: 1.2;
  color: var(--samx-tx);
  margin-top: 18px;
}

/* Title accents in each page's brand color (SA Spectrum: amber #F7B041,
   blue #0B86D1, coral #E06347), each fading from a lighter tint. */
.samx--gold .samx-hero__title-accent {
  background: linear-gradient(135deg, #FFD27A, var(--samx-amber));
  -webkit-background-clip: text;
  background-clip: text;
}

.samx--blue .samx-hero__title-accent {
  background: linear-gradient(135deg, var(--samx-cyan), var(--samx-blue));
  -webkit-background-clip: text;
  background-clip: text;
}

/* The shared samx--coral title fades amber to coral, which reads orange
   beside this page's coral art and eyebrow; keep it all coral here. */
.samx-api.samx--coral .samx-hero__title-accent {
  background: linear-gradient(135deg, #F2876D, var(--samx-coral));
  -webkit-background-clip: text;
  background-clip: text;
}
/*# sourceMappingURL=api-pages.css.map */