.sup-fab{position:relative}
.sup-fab::before,.sup-fab::after{content:"";position:absolute;inset:0;border-radius:999px;border:2px solid rgba(18,122,98,.55);animation:ring 2.4s ease-out infinite;pointer-events:none}
.sup-fab::after{animation-delay:1.2s}
.sup-on{position:absolute;right:-2px;top:-2px;width:12px;height:12px;border-radius:50%;background:#34C759;border:2px solid #1B2420;animation:blink 1.2s ease-in-out infinite}
.sup-ic svg{animation:wiggle 4s ease-in-out infinite;transform-origin:50% 60%}
.sup-tip{max-width:220px;padding:9px 14px;border-radius:16px 16px 4px 16px;background:#fff;box-shadow:0 12px 30px -12px rgba(27,36,32,.35),0 0 0 1px rgba(27,36,32,.06);font-size:13px;font-weight:500;color:#1B2420;animation:tip 9s ease infinite;pointer-events:none}
@keyframes ring{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.18,1.55);opacity:0}}
@keyframes blink{50%{opacity:.25}}
@keyframes wiggle{0%,80%,100%{transform:rotate(0)}84%{transform:rotate(-14deg)}88%{transform:rotate(12deg)}92%{transform:rotate(-8deg)}96%{transform:rotate(4deg)}}
@keyframes tip{0%,6%{opacity:0;transform:translateY(6px)}12%,62%{opacity:1;transform:none}68%,100%{opacity:0;transform:translateY(6px)}}
.lbar{flex:1;border-radius:6px 6px 3px 3px;background:#BFE3D7;transition:height .9s cubic-bezier(.4,0,.2,1),background-color .5s ease}
.lbar.pk{background:#127A62}
.lbar.now{background:#7FC8B0;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.35) 0 4px,transparent 4px 8px)}
.hl{font-size:11px;color:#8A9490;font-variant-numeric:tabular-nums}
.sdot{animation:pulse 1.6s ease-out infinite}
.chand{transform-origin:12px 12px;animation:spin 4s linear infinite}
.mhand{transform-origin:12px 12px;animation:spin 48s linear infinite}
.sendbar{height:100%;border-radius:999px;background:#127A62;transition:width .9s linear}
.tnum{font-variant-numeric:tabular-nums}
.frow{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-top:1px solid #EEF1F0}
.rin0{animation:rin0 .55s cubic-bezier(.2,.7,.2,1) both}
.rin1{animation:rin1 .55s cubic-bezier(.2,.7,.2,1) both}
.st-fail{background:#FBEDEA;color:#8A2E1F}
@keyframes rin0{from{opacity:0;transform:translateY(-10px);background:#EFF7F4}to{opacity:1;transform:none;background:transparent}}
@keyframes rin1{from{opacity:0;transform:translateY(-10px);background:#EFF7F4}to{opacity:1;transform:none;background:transparent}}
@keyframes spin{to{transform:rotate(360deg)}}

/* Desktop customer pages share the same content column. */
@media (min-width: 861px) {
  .app .main .content { width:100%; max-width:1760px; margin-inline:auto; }
}
@media (min-width: 1200px) {
  .sec-hero { padding-block:48px; }
  .sec-hero > .wrap { display:grid; max-width:1440px; padding-inline:clamp(32px,4vw,72px); grid-template-columns:minmax(0,1.18fr) minmax(0,1fr); column-gap:36px; align-content:center; text-align:left; }
  .sec-hero > .wrap > :not(.stage) { grid-column:1; justify-self:start; margin-inline:0; }
  .sec-hero .hero-h { font-size:clamp(42px,3.8vw,60px); }
  .sec-hero .wrap > .hp { align-items:stretch; width:100%; }
  .sec-hero .wrap > .stage { grid-column:2; grid-row:1 / span 7; align-self:center; display:grid; grid-template-columns: minmax(0,1fr) auto; align-content:center; align-items:center; gap:16px; width:100%; height:auto; margin:0; }
  .sec-hero .stage > [aria-hidden] { position:relative!important; left:auto!important; transform:none!important; grid-row:1 / span 2; width:min(100%,292px)!important; height:clamp(425px,38vw,560px)!important; }
  .sec-hero .stage > .float { position:static; align-self:end; padding:10px!important; }
  .sec-hero .stage > .late { align-self:start; }
}
.news-more { display:block; margin:24px auto 0; }