/* Mobile-only content reduction. Desktop and tablet layouts are unchanged. */
.mobile-offers-toggle{display:none}
@media(max-width:680px){
  .hero{padding-bottom:12px}
  .hero-visual{height:390px}

  /* Show one feature message at a time beside the phone. */
  .hero-visual .feature-card.route-card,
  .hero-visual .feature-card.ai-card,
  .hero-visual .feature-card.analytics-card{top:245px!important;left:4px!important;right:auto!important;opacity:0;pointer-events:none;animation:mobileFeatureCycle 12s ease-in-out infinite,featureCardBreath 5.8s ease-in-out infinite}
  .hero-visual .feature-card.route-card{animation-delay:0s,0s}
  .hero-visual .feature-card.ai-card{animation-delay:4s,1.3s}
  .hero-visual .feature-card.analytics-card{animation-delay:8s,2.6s}

  .market{padding-top:22px}
  .offer-grid .offer:nth-child(n+4){display:none}
  .offer-grid.is-expanded .offer:nth-child(n+4){display:block;animation:mobileReveal .3s ease both}
  .mobile-offers-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin:16px auto 0;padding:0 22px;border:1px solid #1d74ff;border-radius:7px;background:rgba(5,22,45,.88);color:#fff;font:700 12px "Manrope",sans-serif;cursor:pointer}

  /* Keep dashboard benefits available without adding vertical length. */
  .dash-ui{min-height:155px;height:155px;padding:20px 8px 12px}
  .dash-cards{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 3px 8px}
  .dash-cards::-webkit-scrollbar{display:none}
  .dash-cards>div{display:block!important;min-width:76%;height:112px;scroll-snap-align:center}
  .dash-cards>div:nth-child(n+4){display:none!important}
  .dash-cards>div:last-child{width:auto}

  .cta-section{padding-block:25px 18px}
  .contact-card{gap:5px}
  .contact-card p{margin-top:1px}
}

@media(max-width:420px){
  .hero-visual{height:370px}
  .hero-visual .feature-card.route-card,
  .hero-visual .feature-card.ai-card,
  .hero-visual .feature-card.analytics-card{top:230px!important}
  .offer{min-height:142px}
}

@keyframes mobileFeatureCycle{0%,28%{opacity:1}33%,95%{opacity:0}100%{opacity:1}}
@keyframes mobileReveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce) and (max-width:680px){
  .hero-visual .feature-card{animation:none!important;opacity:0!important}
  .hero-visual .feature-card.route-card{opacity:1!important}
}