/* First top-up offer under the homepage hero: one promo strip between
 * hairlines, no card. The offer is stated once; the terms are fine print. */
.first-topup-offer { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 24px; margin: 32px 0 0; padding: 20px 0 18px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.first-topup-offer::before { content: ""; position: absolute; left: 0; top: -1px; width: 48px; height: 2px; background: var(--accent); }
.first-topup-offer h2 { font-size: clamp(20px, 1.8vw, 22px); line-height: 1.25; letter-spacing: -.02em; font-weight: 700; text-wrap: pretty; }
.first-topup-copy p { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--text-dim); }
.first-topup-cta { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 650; color: var(--accent); white-space: nowrap; }
.first-topup-cta:hover { color: var(--accent-hi); text-decoration: underline; text-underline-offset: 4px; }
.first-topup-cta span { display: inline-block; margin-left: 6px; transition: transform .15s; }
.first-topup-cta:hover span { transform: translateX(3px); }
.first-topup-terms { grid-column: 1 / -1; margin-top: 14px; font-size: 12.5px; line-height: 1.6; color: var(--text-dim); }
@media (max-width: 560px) {
  .first-topup-offer { grid-template-columns: minmax(0, 1fr); }
  .first-topup-cta { justify-self: start; margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) { .first-topup-cta span { transition: none; } }

/* Homepage announcement bar above the sticky header: one line, one link. */
.announce-bar { padding: 9px max(16px, calc((100vw - 1240px) / 2)); background: var(--accent-soft); border-bottom: 1px solid var(--border); text-align: center; }
.announce-bar p { font-size: 14px; line-height: 1.45; color: var(--text); text-wrap: balance; }
.announce-tag { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: #0a0b0a; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; vertical-align: 1px; }
.announce-bar a { font-weight: 650; white-space: nowrap; }
.announce-bar a:hover { text-decoration: underline; text-underline-offset: 3px; }