.hero {
  position: relative;
  background: var(--secondary);
  border-bottom: var(--border-w-bold) solid var(--border);
  padding: 26px 22px 30px;
  overflow: hidden;
}
.hero__sun {
  position: absolute;
  right: -50px;
  top: -50px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: var(--border-w-bold) solid var(--border);
  background: var(--highlight);
}
.hero__eyebrow {
  position: relative;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--on-color);
  margin: 0 0 16px;
}
.hero__title {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--fs-display-l);
  line-height: 1.05;
  color: var(--on-color);
  margin: 0 0 12px;
  /* Trim the font's half-leading so the box hugs the caps/baseline —
     makes the equal top/bottom margins read as optically equal. */
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.hero__title em {
  font-style: normal;
  color: var(--highlight);
}
.hero__subtitle {
  position: relative;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--on-color);
  margin: 0 0 20px;
}
.hero__cta {
  position: relative;
  display: flex;
  gap: 10px;
}