/* The ONE bright split hero (.sp-hero) — SplitHero.astro. Unified
   2026-07-28 from the two hand-rolled twins: .pp-hero (/partner-program/,
   /integrations/) and .cs-hero (/case-studies/). Full-viewport bright
   split on the white page ground: kicker · display title · sub · CTA row left, visual
   right, count-up proof strip on a hairline below.
   Per-page copy caps ride CSS vars set by the component:
   --sp-title-max (default 18ch) · --sp-sub-max (default 620px) ·
   --sp-stat-cols (the stat count, drives the ≥900 strip columns). */

.sp-hero {
  /* full-viewport hero (Sofia, 2026-07-24) — content keeps its natural
     top anchor; centered heroes are hub-only (Sofia, 2026-07-25) */
  min-height: 100svh;
  background: var(--color-background); /* full white page ground (Sofia 2026-08-17) */
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-foreground);
}
.sp-hero__inner {
  margin-inline: auto;
  width: 100%;
  max-width: var(--container-large);
  padding: 150px var(--space-inline) 64px;
}
@media (min-width: 1024px) {
  .sp-hero__inner { padding-inline: 32px; }
}
.sp-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
@media (min-width: 1024px) {
  .sp-hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 72px;
  }
}
.sp-hero__title {
  margin-top: 22px;
  /* the per-page ch cap lands each title on exactly two lines at the
     desktop reference viewport (layout-gate rule: hero h1 ≤ 2 lines) */
  max-width: var(--sp-title-max, 18ch);
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--track-tighter);
  font-size: 38px;
  line-height: 1.04;
  color: var(--color-black);
}
@media (min-width: 640px) { .sp-hero__title { font-size: 50px; } }
@media (min-width: 1280px) { .sp-hero__title { font-size: 58px; } }
.sp-hero__sub {
  margin-top: 20px;
  /* per-page px cap keeps the sub within two lines (layout-gate rule) */
  max-width: var(--sp-sub-max, 620px);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--color-grey-on-white);
}
.sp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.sp-hero__visual { min-width: 0; }

/* proof strip: count-ups on a hairline, below the split */
.sp-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 32px;
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid var(--color-border-light);
}
@media (min-width: 900px) {
  .sp-hero__stats {
    grid-template-columns: repeat(var(--sp-stat-cols, 3), minmax(0, 1fr));
  }
}
.sp-hero__stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sp-hero__stat-value {
  font-size: 30px;
  font-weight: 500;
  letter-spacing: var(--track-tight);
  line-height: 1.1;
  color: var(--color-black);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) { .sp-hero__stat-value { font-size: 36px; } }
.sp-hero__stat-cap {
  max-width: 30ch;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  line-height: var(--leading-snug);
  color: var(--color-grey-on-white);
}


/* tall screens (Sofia, 2026-08-05): the grid sat top-anchored under its
   fixed padding with the void pooling below — flex column + auto margins
   center it. MacBook heights never match the query. */
@media (min-height: 1050px) {
  .sp-hero { display: flex; flex-direction: column; }
  .sp-hero__inner { margin-block: auto; width: 100%; }
}