/* NextGen Client – homepage on phones and tablets.
   The desktop design uses very small text sizes; below 1080px the reading text and buttons get
   comfortable sizes. Product mock-ups (dashboard, phone, loyalty pass) keep their scale on purpose. */

@media (max-width:1080px){
    html body .ng-kicker{font-size:11.5px!important;letter-spacing:.08em}
    html body .ng-btn{font-size:14px!important;min-height:50px}
    html body .ng-btn.small{font-size:13px!important;min-height:42px}
    html body .ng-mobile-panel a{font-size:15px!important;padding:12px 14px!important}
    html body .ng-hero-note{font-size:12.5px!important;line-height:1.5;white-space:normal!important;width:auto!important;max-width:100%}
    html body .ng-nav-actions .ng-btn{font-size:13px!important;min-height:42px}
    html body .ng-time-year{font-size:11px!important}
    html body .ng-time-card p,html body .tl-card p{font-size:14.5px!important;line-height:1.6!important}
    html body .ng-time-tags span,html body .tl-tags span{font-size:11px!important}
    html body .tl-year{font-size:12px!important}
    html body .ng-timeline-quote small{font-size:11px!important}
    html body .ng-step-num{font-size:11px!important}
    html body .ng-step p{font-size:14px!important;line-height:1.6!important}
    html body .ng-bullet strong{font-size:14.5px!important}
    html body .ng-bullet p{font-size:13.5px!important;line-height:1.55!important}
    html body .ng-feature-title small{font-size:10px!important}
    html body .ng-info-line span{font-size:11px!important}
    html body .ng-info-line strong{font-size:13px!important}
    html body .ng-value p{font-size:14px!important;line-height:1.6!important}
    html body .ng-plan-top span{font-size:11px!important}
    html body .ng-plan-badge{font-size:10px!important}
    html body .ng-plan>p{font-size:14px!important;line-height:1.6!important}
    html body .ng-price > span{font-size:12px!important}
    html body .ng-feature-list span{font-size:14px!important}
    html body .ng-faq-list p{font-size:14.5px!important;line-height:1.65!important}
    html body .ng-footer-copy p{font-size:14px!important;line-height:1.6}
    html body .ng-footer-col h4{font-size:11.5px!important}
    html body .ng-footer-col a{font-size:14.5px!important;padding:5px 0}
    html body .ng-footer-bottom p,html body .ng-footer-links span,html body .ng-footer-links a{font-size:12.5px!important}
}

@media (max-width:480px){
    html body .ng-nav-actions>.ng-btn.primary{font-size:0!important;width:42px;padding:0}
}

/* Phones: no stretched or squeezed graphics */
@media (max-width:780px){
    html body img,html body svg,html body video{max-width:100%}
    html body img{height:auto}
    html body .ng-pass-photo img,html body .ng-client-card img{object-fit:cover}
    html body .ng-time-card{min-height:0!important}
}

/* Phones: the hero dashboard + phone keep their desktop proportions and are scaled down as one
   picture (zoom is set by ngc-landing.js) instead of being rebuilt into one tall column. */
@media (max-width:780px){
    html body .ng-product.is-scaled{width:600px;min-height:540px;margin-inline:auto;zoom:var(--ngz,1)}
    html body .ng-product.is-scaled .ng-dashboard{padding:13px;border-radius:25px}
    html body .ng-product.is-scaled .ng-stat-grid{grid-template-columns:repeat(3,1fr)}
    html body .ng-product.is-scaled .ng-dash-grid{grid-template-columns:1.2fr .8fr}
    html body .ng-product.is-scaled .ng-chart{display:block}
    html body .ng-product.is-scaled .ng-phone{right:0;width:185px}
    html body .ng-product.is-scaled .ng-phone-screen{min-height:352px;padding:14px;border-radius:23px}
    html body .ng-product.is-scaled .ng-card-dots i{width:22px;height:22px;font-size:7px}
}

/* App section phone: natural phone proportions on small screens */
@media (max-width:860px){
    html body .ngc-phone{width:min(210px,60%);aspect-ratio:9/17;border-radius:34px;padding:10px}
    html body .ngc-phone-screen{border-radius:26px}
    html body .ng-feature-visual:has(.ngc-phone){min-height:0}
}

/* Header on phones: "Log in" and "Get started" stay visible with their text (compact),
   next to the language switch and the menu button. */
@media (max-width:780px){
    html body .ng-nav{gap:8px}
    html body .ng-nav-actions{gap:6px}
    html body .ng-nav-actions>.ng-btn.ng-nav-login{display:inline-flex!important}
    html body .ng-nav-actions>.ng-btn{min-height:38px!important;height:38px;padding:0 12px!important;border-radius:11px;font-size:13px!important;white-space:nowrap}
    html body .ng-nav-actions>.ng-btn.primary{width:auto!important;font-size:13px!important;gap:5px}
    html body .ng-nav-actions>.ng-btn.primary svg{width:13px;height:13px}
    html body .ng-lang{width:66px;height:38px;border-radius:11px}
    html body .ng-lang svg{width:20px;height:13px}
    html body .ng-mobile summary{width:38px;height:38px;border-radius:11px}
    html body .ng-brand-mark img{width:30px;height:30px}
}
@media (max-width:380px){
    html body .ng-nav{gap:6px}
    html body .ng-nav-actions{gap:4px}
    html body .ng-nav-actions>.ng-btn{padding:0 8px!important;font-size:12px!important;letter-spacing:-.1px}
    html body .ng-nav-actions>.ng-btn.primary svg{display:none}
    html body .ng-lang{width:54px;height:36px}
    html body .ng-lang svg{width:16px;height:11px}
    html body .ng-mobile summary{width:34px;height:36px}
    html body .ng-nav-actions>.ng-btn{height:36px;min-height:36px!important}
    html body .ng-brand-mark img{width:26px;height:26px}
}
@media (max-width:340px){
    html body .ng-nav-actions>.ng-btn{padding:0 7px!important;font-size:11.5px!important}
    html body .ng-lang{width:50px}
}