/* REMARK: Big opening block on the home page and on each app page, with a soft orange glow behind it. */
.hero { position: relative; padding: 96px 0 72px; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: -40% -10% auto; height: 520px; z-index: -1;
  background: radial-gradient(closest-side, rgba(251,146,60,.22), transparent 70%); }
.hero h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); max-width: 22ch; }
.hero .lead { font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--muted); max-width: 46ch; }
.hero .pill { margin-bottom: 20px; }
.app-hero { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; }
.app-hero .icon { width: 112px; height: 112px; }
@media (max-width: 640px) { .app-hero { grid-template-columns: 1fr; } .hero { padding: 64px 0 48px; } }