/* =========================================================
   runtime.css — Runtime page specific styles
   Reuses builder.css + controller.css patterns; this file adds
   only the Runtime hero/shift tweaks.
   ========================================================= */

/* -----------------------------------------------------
   SECTION: Hero — same treatment as the other platform heroes:
   breadcrumb sits directly after the header, 16px breadcrumb, and
   40px / 20px content gaps. Title capped so it wraps to two lines.
   ----------------------------------------------------- */
.sp-hero--runtime .sp-breadcrumb {
  top: 0;
  font-size: 16px;
}

.sp-hero--runtime .sp-hero__copy {
  max-width: 717px;
  gap: 40px;
}

.sp-hero--runtime .sp-hero__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sp-hero--runtime .sp-hero__title {
  max-width: 575px;
}

/* Hero overlay — exact Figma gradient (node 7241:18068): darkens the left half
   (behind the copy) and bottom-left, leaving the lit skyline + the rounded-square
   line graphic visible on the right. */
.sp-hero--runtime .sp-hero__overlay {
  background:
    linear-gradient(215.93deg, rgba(7, 9, 58, 0) 21.21%, rgba(7, 9, 58, 0.8) 100.35%),
    linear-gradient(134.48deg, rgba(7, 9, 58, 0.8) 1.2%, rgba(7, 9, 58, 0) 69.66%);
}

/* -----------------------------------------------------
   SECTION: The SHIFT — the Runtime headline is longer than the
   builder one, so it wraps to two lines instead of staying on one.
   ----------------------------------------------------- */
.shift--runtime .shift__title {
  white-space: normal;
  max-width: 1004px;
}

/* QC: more top/bottom padding on the Core Capabilities section (Runtime only) */
.capabilities {
  padding: 100px 0;
}