.border-top { border-top: 1px solid var(--border); }

.page-hero {
  padding: 76px 0 56px;
  background: radial-gradient(ellipse 900px 400px at 20% -20%, var(--accent-glow), transparent 60%);
}
.page-hero h1 { font-size: var(--text-hero); max-width: 780px; margin-bottom: 18px; }
.page-lede { font-size: var(--text-body); color: var(--text-muted); max-width: 620px; line-height: 1.65; }

/* ── Positioning ladder (About page) ──────────────────────────
   Four stacked lines, each leading with a gradient-accented word. */
.tagline-ladder { display: flex; flex-direction: column; gap: 14px; margin-top: 30px; }
.tagline-line { font-size: 22px; font-weight: 700; line-height: 1.3; }
.tagline-lead {
  background-image: linear-gradient(90deg, var(--accent), var(--signal-e));
  background-clip: text;
  -webkit-background-clip: text;
  color: var(--accent-bright);
  -webkit-text-fill-color: transparent;
}
.tagline-rest { color: var(--text-muted); font-size: var(--text-body); font-weight: 500; }
@media (max-width: 560px) { .tagline-line { font-size: 19px; } }