/* Homepage refinements share Loyalti's existing brand tokens. */
:root { --muted: #5c5568; }
body { letter-spacing: 0; }
h1, h2, h3, .kicker, .plan-label, .story-index { letter-spacing: 0; }
.hero { background-image: url('assets/counter-hero.webp'); }
.hero::before { background: linear-gradient(90deg, rgba(12, 8, 17, .7), rgba(12, 8, 17, .05) 85%); }
.hero .lede { color: #fff; text-shadow: 0 1px 3px #211528; }
.hero-meta { color: #fff; }
.hero h1 { font-size: 72px; }
h2 { font-size: 44px; }
.nav-links { gap: 22px; }
.section-pad { padding-block: 80px; }
.story-heading { margin-bottom: 38px; }
.story-layout { gap: 64px; align-items: center; }
.story-step { min-height: 0; padding-block: 28px; opacity: 1; }
.story-step h3 { font-size: 25px; }
.story-step p { margin-bottom: 0; }
.phone-wrap { position: relative; top: auto; }
.phone { width: min(310px, 100%); }
.phone-screen { min-height: 500px; }
.phone-feedback small { color: #c9c4d0; }
.loyalty-head { background: #6233c6; }
.loyalty-head small { color: #fff; opacity: 1; }
.billing-toggle small { color: #176444; }
.billing-toggle .active small { color: #a6e8c9; }
.dashboard-head .button, .local-grid .button { margin-top: 16px; }
.promotion-showcase { background: #eef5f1; }
.promotion-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: end; margin-bottom: 34px; }
.promotion-heading h2 { max-width: 12ch; margin-bottom: 0; }
.promotion-heading p { margin: 0; }
.promotion-art-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.promotion-art-grid figure { margin: 0; min-width: 0; }
.promotion-art-grid img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; display: block; border-radius: 6px; }
.promotion-art-grid figcaption { margin-top: 16px; font-size: 18px; font-weight: 600; }
.promotion-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 30px; }
.promotion-footer small, .example-note { font-size: 14px; color: var(--muted); }
.message small { color: #51475d; }
.final-cta h2 { font-size: 48px; }
@media (max-width: 900px) {
  .nav-links { gap: 0; }
  .story-layout { gap: 32px; }
  .promotion-heading { gap: 28px; }
}
@media (max-width: 640px) {
  .hero { background-image: url('assets/counter-hero-mobile.webp'); }
  .hero::before { background: rgba(12, 8, 17, .57); }
  .hero h1 { font-size: 46px; max-width: 9ch; }
  h2 { font-size: 32px; }
  .hero-inner { padding-block: 120px 56px; }
  .section-pad { padding-block: 54px; }
  .story-step { padding-block: 24px; }
  .story-step h3 { font-size: 23px; }
  .phone-wrap { grid-row: auto; margin-bottom: 0; }
  .promotion-heading, .promotion-art-grid { grid-template-columns: 1fr; }
  .promotion-heading { gap: 20px; }
  .promotion-art-grid { gap: 30px; }
  .promotion-heading h2 { max-width: 15ch; }
  .promotion-footer { align-items: stretch; flex-direction: column; }
  .promotion-footer .button { text-align: center; }
  .final-cta h2 { font-size: 34px; }
}