/* Offers (feat/offer): the outreach landing page (/offer/<code>), the offer box on sign-up, and the employer's
   offer note. Same tokens as app.css; nothing here overrides a shared rule. */
.hero-offer h1 { max-width: 44rem; margin: 0 auto; text-wrap: balance; }
.offer-kicker { text-align: center; margin: 0 0 var(--space-2); color: var(--color-band-muted); font-weight: var(--weight-semibold); font-size: var(--text-sm); letter-spacing: 0.02em; }
.offer-wrap { padding-top: var(--space-6); padding-bottom: var(--space-7); }
.offer-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--card-gap); align-items: start; }
.offer-points h2, .offer-cta h2 { font-size: var(--text-lg); line-height: var(--lh-lg); margin: 0 0 var(--space-2); text-wrap: balance; }
.offer-points .ticks { margin-top: var(--space-4); }
.offer-points li span, .offer-cta p { text-wrap: pretty; }
.offer-small { margin: var(--space-5) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--color-line); }
.offer-cta { gap: var(--space-3); border: 2px solid var(--color-secondary); }
.offer-cta .meta { margin: 0; }
.offer-cta .alert { margin: 0; }
.offer-box strong { display: block; }
.offer-box p { margin: var(--space-1) 0 0; }
.offer-banner strong { display: block; }
.offer-banner p { margin: var(--space-1) 0 0; max-width: 52rem; }
.offer-banner .row { margin-top: var(--space-3); }
.offer-link { font-weight: var(--weight-semibold); word-break: break-all; margin: 0 0 var(--space-2); }
@media (max-width: 760px) {
  .offer-kicker { text-align: left; }
  .offer-grid { grid-template-columns: minmax(0, 1fr); }
  .offer-cta { order: -1; }
  .offer-wrap { padding-top: var(--space-4); }
}
.offer-cta p.meta { color: var(--color-text); font-size: var(--text-md); }

/* the offer's main action, in the hero as well as the side card */
.offer-hero-cta { margin: var(--space-5) 0 0; }
.offer-cta { scroll-margin-top: var(--space-6); }