/* Commercial lending hero treatment for the national and state pages of the
   nine financing categories (lendingHeroSlugs in scripts/generate-pages.js):
   the gold outlined eyebrow and the outlined call-now card, matching the
   /get-quote/{state}/ hero. Linked only on those pages, after hero.css. The
   card sits under the hero paragraph, whose 1rem bottom margin plus the .8rem
   top margin gives the reference 1.8rem gap. */

.eyebrow--outlined { margin-bottom: 1.4rem; padding: .45rem .8rem; border: 1px solid var(--bronze); color: var(--bronze-light); font-size: clamp(.7rem, 1vw, .86rem); letter-spacing: .14em; line-height: 1.2; }

.hero-phone--outline { margin-top: .8rem; padding: 13px 14px 13px 18px; border: 1px solid rgba(199,145,63,.75); border-radius: 12px; background: rgba(8,22,35,.62); box-shadow: 0 12px 28px rgba(0,0,0,.25); }
.hero-phone--outline:hover { background: rgba(12,30,46,.78); }
.hero-phone--outline .hero-phone__eyebrow { color: var(--bronze-light); }
.hero-phone--outline .hero-phone__arrow { background: #c7912f; color: var(--navy); box-shadow: none; font-size: 19px; }

@media (max-width: 767px) {
  .eyebrow--outlined { margin-bottom: 1.1rem; letter-spacing: .1em; }
  .hero-phone--outline { padding: 13px 14px 13px 16px; }
}