/* ezCommerce site styles. Colours: Teal Current. Font: Plus Jakarta Sans. */
:root{
  --teal:#0F766E;
  --teal-dark:#0B5953;
  --mint:#2DD4BF;
  --mint-pale:#99F6E4;
  --ink:#0B1F1D;
  --ink-2:#13302C;
  --surface:#F2FAF8;
  --tint:#CCF2EA;
  --body:#3F524F;
  --muted:#4B5E5B;
  --line:#E3EEEB;
  --field:#B9CFCA;
  --white:#FFFFFF;
  --radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img,svg{display:block}
a{color:var(--teal)}
a:hover{color:var(--teal-dark)}
h1,h2,h3{margin:0;font-weight:800;color:inherit}
h1{font-size:clamp(38px,5.4vw,60px);line-height:1.05;letter-spacing:-0.03em}
h2{font-size:clamp(30px,3.6vw,42px);line-height:1.12;letter-spacing:-0.02em}
h3{font-size:21px;line-height:1.3}
p{margin:0}
ul{margin:0}

.container{max-width:1200px;margin:0 auto;padding:0 24px}
.section{padding:96px 0}
.section-tight{padding:72px 0}
.bg-surface{background:var(--surface)}
.bg-ink{background:var(--ink);color:var(--white)}
.bg-teal{background:var(--teal);color:var(--white)}
.stack{display:flex;flex-direction:column;gap:14px}
.stack-lg{display:flex;flex-direction:column;gap:40px}
.intro{max-width:760px}
.lead{font-size:19px;color:var(--body)}
.bg-ink .lead,.bg-teal .lead{color:rgba(255,255,255,0.86)}
.eyebrow{font-size:14px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--teal)}
.bg-ink .eyebrow{color:var(--mint)}
.pill{align-self:flex-start;display:inline-block;font-size:14px;font-weight:700;color:var(--teal);background:var(--tint);padding:6px 12px;border-radius:999px}
.pill-mint{color:var(--ink);background:var(--mint)}
.accent{color:var(--teal)}
.bg-ink .accent{color:var(--mint)}
.muted{color:var(--body)}
.center{text-align:center;align-items:center}

/* Buttons */
.btn{display:inline-block;font-family:inherit;font-size:16px;font-weight:700;text-decoration:none;padding:15px 24px;border-radius:12px;border:0;cursor:pointer;text-align:center;line-height:1.3}
.btn-primary{background:var(--teal);color:var(--white)}
.btn-primary:hover{background:var(--teal-dark);color:var(--white)}
.btn-outline{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-outline:hover{background:var(--surface);color:var(--ink)}
.btn-white{background:var(--white);color:var(--ink)}
.btn-white:hover{background:var(--tint);color:var(--ink)}
.btn-mint{background:var(--mint);color:var(--ink)}
.btn-mint:hover{background:var(--mint-pale);color:var(--ink)}
.btn-ghost-light{background:transparent;color:var(--white);box-shadow:inset 0 0 0 1.5px var(--white)}
.btn-ghost-light:hover{background:rgba(255,255,255,0.08);color:var(--white)}
.btn-dark{background:var(--ink);color:var(--white)}
.btn-dark:hover{background:var(--ink-2);color:var(--white)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.text-link{font-weight:700}

/* Header */
.site-header{border-bottom:1px solid var(--line);background:var(--white);position:sticky;top:0;z-index:10}
.header-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:14px;padding-bottom:14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand-name{font-size:22px;font-weight:800;letter-spacing:-0.03em}
.brand-name span{color:var(--teal)}
.nav-toggle{display:none}
.nav-button{display:none;font-family:inherit;font-weight:700;font-size:15px;padding:10px 14px;border-radius:10px;box-shadow:inset 0 0 0 1.5px var(--ink);cursor:pointer}
.site-nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;font-size:15px;font-weight:600}
.site-nav a{color:var(--ink);text-decoration:none}
.site-nav a:hover{color:var(--teal)}
.site-nav a[aria-current="page"]{color:var(--teal);text-decoration:underline;text-underline-offset:6px}
.site-nav .btn{padding:11px 18px;border-radius:10px;color:var(--white)}
.site-nav .btn[aria-current="page"]{background:var(--ink);text-decoration:none}

@media (max-width:860px){
  .nav-button{display:inline-block}
  .site-nav{display:none;width:100%;flex-direction:column;align-items:flex-start;gap:16px;padding:8px 0 12px}
  .nav-toggle:checked ~ .site-nav{display:flex}
  .site-nav .btn{width:100%}
}

/* Hero */
.hero{background:var(--surface)}
.hero-inner{display:flex;flex-wrap:wrap;align-items:center;gap:56px;padding-top:88px;padding-bottom:96px}
.hero-copy{flex:1 1 480px;min-width:0;display:flex;flex-direction:column;gap:24px}
.hero-copy .lead{font-size:20px;max-width:580px}
.page-hero{padding-top:88px;padding-bottom:88px}
.page-hero h1{max-width:900px}
.page-hero .lead{font-size:20px;max-width:700px}

/* Hero diagram */
.flow{flex:1 1 440px;min-width:0;background:var(--white);border-radius:24px;padding:28px 22px;box-shadow:0 20px 50px rgba(11,31,29,0.10);display:flex;align-items:center;gap:0}
.flow-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:10px}
.flow-label{font-size:13px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted)}
.chip{padding:10px 12px;border-radius:10px;background:var(--surface);font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip-dark{background:var(--ink);color:var(--white)}
.flow-core{flex:0 0 120px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.flow-core .tile{width:96px;height:96px;border-radius:24px;background:var(--teal);display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 0 0 10px var(--tint)}
.flow-core .tile::after{content:"";position:absolute;inset:-10px;border-radius:32px;border:2px solid var(--mint);opacity:0;pointer-events:none}
.flow-core strong{font-size:15px;margin-top:10px}
.flow-core small{font-size:13px;line-height:1.4;color:var(--muted)}

/* Animated connectors: dashes that flow along the line */
.flow-link{flex:0 0 44px;height:4px;border-radius:2px;background-image:repeating-linear-gradient(90deg,var(--teal) 0 8px,transparent 8px 16px);background-size:16px 4px;opacity:0.75}
.route-link{flex:1 1 40px;min-width:32px;height:4px;border-radius:2px;background-image:repeating-linear-gradient(90deg,var(--teal) 0 8px,transparent 8px 16px);background-size:16px 4px;opacity:0.75}

@media (max-width:640px){
  .flow{flex-direction:column;padding:24px 20px}
  .flow-col{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow-label{grid-column:1 / -1}
  .flow-core{flex:none}
  .flow-link{flex:none;width:4px;height:32px;margin:12px 0;background-image:repeating-linear-gradient(180deg,var(--teal) 0 8px,transparent 8px 16px);background-size:4px 16px}
}

/* Omnichannel order routing infographic */
.route{display:flex;align-items:center;background:var(--surface);border-radius:24px;padding:32px}
.route-node{flex:0 1 220px;min-width:0;background:var(--white);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:4px;box-shadow:0 8px 24px rgba(11,31,29,0.06)}
.route-node strong{font-size:17px}
.route-node span{font-size:14px;color:var(--body)}
.route-tag{align-self:flex-start;font-size:12px;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;color:var(--teal);background:var(--tint);padding:4px 8px;border-radius:999px;margin-bottom:6px}
.route-hub{background:var(--teal);color:var(--white);align-items:center;text-align:center}
.route-hub span{color:rgba(255,255,255,0.88)}
.tile-sm{width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,0.14);display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.route-stores{flex:0 1 260px;min-width:0;display:flex;flex-direction:column;gap:10px}
.store{background:var(--white);border:2px solid var(--line);border-radius:14px;padding:12px 16px;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px}
.store strong{font-size:16px}
.store span{font-size:14px;color:var(--body)}
.store em{flex-basis:100%;font-style:normal;font-size:13px;font-weight:800;color:var(--teal)}
.store-out{opacity:0.6}
.store-out span{text-decoration:line-through}
.store-pick{border-color:var(--teal);box-shadow:0 0 0 4px var(--tint)}
.route-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;counter-reset:step}
.route-steps li{counter-increment:step;display:flex;flex-direction:column;gap:2px;padding-left:44px;position:relative}
.route-steps li::before{content:counter(step);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:10px;background:var(--teal);color:var(--white);font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center}
.route-steps strong{font-size:17px}
.route-steps span{font-size:15px;color:var(--body)}

@media (max-width:860px){
  .route{flex-direction:column;align-items:stretch;padding:24px}
  .route-node,.route-stores{flex:none;width:100%}
  .route-link{flex:none;align-self:center;width:4px;min-width:0;height:36px;margin:10px 0;background-image:repeating-linear-gradient(180deg,var(--teal) 0 8px,transparent 8px 16px);background-size:4px 16px}
}

/* Motion. Everything works and reads fine without it. */
@media (prefers-reduced-motion:no-preference){
  .flow-link-in,.route-link{animation:dash-x 0.9s linear infinite}
  .flow-link-out{animation:dash-x 0.9s linear infinite}
  .flow-core .tile::after{animation:pulse 2.6s ease-out infinite}
  .flow .chip{animation:ping 8s ease-in-out infinite}
  .flow .flow-col:first-child .chip:nth-of-type(2){animation-delay:2s}
  .flow .flow-col:first-child .chip:nth-of-type(3){animation-delay:4s}
  .flow .flow-col:first-child .chip:nth-of-type(4){animation-delay:6s}
  .flow .flow-col:last-child .chip:nth-of-type(1){animation-delay:1s}
  .flow .flow-col:last-child .chip:nth-of-type(2){animation-delay:3s}
  .flow .flow-col:last-child .chip:nth-of-type(3){animation-delay:5s}
  .flow .flow-col:last-child .chip:nth-of-type(4){animation-delay:7s}
  .store-pick{animation:glow 2.4s ease-in-out infinite}
  .js .reveal{opacity:0;transform:translateY(18px);transition:opacity 0.6s ease,transform 0.6s ease}
  .js .reveal.in{opacity:1;transform:none}
  @media (max-width:640px){
    .flow-link,.flow-link-in,.flow-link-out{animation-name:dash-y}
  }
  @media (max-width:860px){
    .route-link{animation-name:dash-y}
  }
}
@keyframes dash-x{from{background-position:0 0}to{background-position:16px 0}}
@keyframes dash-y{from{background-position:0 0}to{background-position:0 16px}}
@keyframes pulse{0%{opacity:0.9;transform:scale(1)}100%{opacity:0;transform:scale(1.25)}}
@keyframes ping{0%,10%,100%{box-shadow:0 0 0 0 rgba(45,212,191,0)}4%{box-shadow:0 0 0 3px var(--mint)}}
@keyframes glow{0%,100%{box-shadow:0 0 0 4px var(--tint)}50%{box-shadow:0 0 0 8px var(--tint)}}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;padding-top:44px;padding-bottom:44px}
.stat-value{font-size:40px;font-weight:800;color:var(--mint);letter-spacing:-0.02em;line-height:1.2}
.stat-label{font-size:15px;color:rgba(255,255,255,0.82)}

/* Grids and cards */
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid-5{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.card{border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;gap:10px}
.card-line{border:1px solid var(--line)}
.card-surface{background:var(--surface)}
.card-white{background:var(--white)}
.card-dark{background:var(--ink-2);color:var(--white)}
.card p{color:var(--body)}
.card-dark p{color:rgba(255,255,255,0.82)}
.card .num{font-size:15px;font-weight:800;color:var(--teal)}
.step-badge{width:44px;height:44px;border-radius:12px;background:var(--teal);color:var(--white);font-weight:800;display:flex;align-items:center;justify-content:center}
.big-number{font-size:48px;font-weight:800;color:var(--mint);letter-spacing:-0.02em;line-height:1}
.card-dark .client{font-size:15px;font-weight:700;color:rgba(255,255,255,0.82)}

/* Feature rows (Platform) */
.feature{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start;padding-top:72px}
.feature:first-child{padding-top:0}
.feature-copy{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:14px}
.feature-copy h2{font-size:clamp(28px,3.2vw,38px)}
.feature-copy p{font-size:18px;color:var(--body)}
.feature-list{flex:1 1 380px;min-width:0;padding:28px 28px 28px 48px;background:var(--surface);border-radius:var(--radius);display:flex;flex-direction:column;gap:12px;color:var(--body)}

/* Split blocks */
.split{display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.split-start{align-items:flex-start}
.split > *{min-width:0}
.split-main{flex:1 1 460px}
.split-side{flex:1 1 360px}
.stat-box{background:var(--ink);color:var(--white);border-radius:var(--radius);padding:24px 26px}
.stat-box .stat-value{font-size:40px}
.stat-box .stat-label{color:rgba(255,255,255,0.84)}
.stat-boxes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}

/* CTA band */
.cta-band{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;padding-top:80px;padding-bottom:80px}
.cta-band h2{font-size:clamp(28px,3.2vw,38px);max-width:680px}

/* Integrations */
.int-group{display:flex;flex-direction:column;gap:18px}
.int-group h2{font-size:28px;letter-spacing:-0.01em}
.int-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.int-item{border:1px solid var(--line);border-radius:14px;padding:18px 20px;font-size:17px;font-weight:700;display:flex;align-items:center;gap:12px}
.int-mark{width:36px;height:36px;flex:none;border-radius:10px;background:var(--tint);color:var(--teal);font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center}

/* Pricing */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;align-items:stretch}
.plan{background:var(--white);border:1px solid var(--line);border-radius:22px;padding:32px;display:flex;flex-direction:column;gap:16px}
.plan-featured{background:var(--teal);color:var(--white);border-color:var(--teal);box-shadow:0 20px 50px rgba(11,31,29,0.18)}
.plan-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.plan h2,.plan h3{font-size:26px}
.plan-who{font-size:16px;opacity:0.88}
.plan-price{font-size:15px}
.plan-price strong{font-size:42px;letter-spacing:-0.02em}
.plan-lead{font-size:14px;font-weight:800;margin-top:8px}
.plan ul{padding-left:20px;display:flex;flex-direction:column;gap:9px;font-size:15px}
.badge{font-size:12px;font-weight:800;background:var(--mint);color:var(--ink);padding:5px 10px;border-radius:999px}
.plan-mini .plan-price strong{font-size:36px}
.plan-mini .btn{margin-top:auto}
.addon{border:1px solid var(--line);border-radius:22px;padding:32px;display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.addon > div{flex:1 1 520px;min-width:0;display:flex;flex-direction:column;gap:8px}
.faq{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:28px}
.faq-item{border-top:1px solid var(--line);padding-top:20px;display:flex;flex-direction:column;gap:8px}
.faq-item h3{font-size:19px}
.faq-item p{color:var(--body)}

/* Customer stories */
.story{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start}
.story-copy{flex:1 1 520px;min-width:0;display:flex;flex-direction:column;gap:16px}
.story-copy p{font-size:18px;color:var(--body)}
.story-copy h3{font-size:18px;margin-top:8px}
.story-copy ul{padding-left:22px;display:flex;flex-direction:column;gap:8px;color:var(--body)}
.story-stats{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:14px}

/* Forms */
.form-card{background:var(--white);color:var(--ink);border-radius:22px;padding:32px;box-shadow:0 20px 50px rgba(11,31,29,0.10);display:flex;flex-direction:column;gap:16px}
.form-card h2{font-size:24px;letter-spacing:-0.01em;margin-bottom:4px}
.field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:700}
.field input,.field select,.field textarea{font-family:inherit;font-size:16px;font-weight:400;color:var(--ink);padding:12px 14px;border:1.5px solid var(--field);border-radius:10px;background:var(--white);width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--tint);border-color:var(--teal)}
.field textarea{resize:vertical}
.field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px}
.form-note{font-size:13px;color:var(--muted);font-weight:400}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.demo-wrap{display:flex;flex-wrap:wrap;gap:56px;align-items:flex-start;padding-top:80px;padding-bottom:96px}
.demo-wrap > *{flex:1 1 420px;min-width:0}
.mini-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin-top:8px}
.mini-stat{background:var(--white);border-radius:16px;padding:18px}
.mini-stat strong{display:block;font-size:28px;color:var(--teal)}
.mini-stat span{font-size:14px;color:var(--body)}
.check-tile{width:72px;height:72px;border-radius:20px;background:var(--teal);display:flex;align-items:center;justify-content:center}

/* Footer */
.site-footer{background:var(--ink);color:rgba(255,255,255,0.82)}
.footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px;padding-top:56px}
.footer-brand{display:flex;flex-direction:column;gap:12px;max-width:360px;font-size:15px}
.footer-brand .brand-name{color:var(--white);font-size:20px}
.footer-brand .brand-name span{color:var(--mint)}
.footer-nav{display:flex;flex-wrap:wrap;gap:12px 28px;font-size:15px}
.footer-nav a{color:rgba(255,255,255,0.82);text-decoration:none}
.footer-nav a:hover{color:var(--white)}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.14);margin-top:32px;padding-top:24px;padding-bottom:40px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:14px}
.site-footer a.light{color:var(--mint)}
.site-footer a.plain{color:rgba(255,255,255,0.82)}

.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:20;background:var(--white);padding:10px 14px;border-radius:8px}

@media (max-width:480px){
  .stat-boxes{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column}
}

/* Solutions dropdown (works without JavaScript) */
.nav-group{position:relative}
.nav-group summary{list-style:none;cursor:pointer;color:var(--ink);display:flex;align-items:center;gap:8px}
.nav-group summary::-webkit-details-marker{display:none}
.nav-group summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg)}
.nav-group[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.nav-group summary:hover,.nav-group summary.is-current{color:var(--teal)}
.nav-menu{position:absolute;top:calc(100% + 16px);left:-18px;width:330px;background:var(--white);border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 50px rgba(11,31,29,0.12);padding:8px;display:flex;flex-direction:column;gap:2px;z-index:30}
.site-nav .nav-menu a{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:10px;text-decoration:none;color:var(--ink)}
.site-nav .nav-menu a:hover{background:var(--surface);color:var(--ink)}
.site-nav .nav-menu a[aria-current="page"]{background:var(--surface);color:var(--teal);text-decoration:none}
.nav-menu strong{font-size:15px}
.nav-menu span{font-size:13px;font-weight:500;color:var(--muted)}
@media (max-width:860px){
  .nav-group{width:100%}
  .nav-menu{position:static;width:auto;box-shadow:none;border:0;padding:6px 0 0;background:transparent}
  .site-nav .nav-menu a{padding:10px 12px}
}

/* Hero chips with logos */
.chip{display:flex;align-items:center;gap:8px}
.chip img{width:18px;height:18px;flex:none}

/* Customer name strip */
.clients{border-bottom:1px solid var(--line)}
.clients-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 40px;padding-top:28px;padding-bottom:28px}
.clients-inner p{font-size:14px;font-weight:700;color:var(--muted)}
.client-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:12px 44px}
.client-list li{font-size:21px;font-weight:800;letter-spacing:-0.02em;color:#5E706D;white-space:nowrap}

/* Logo tiles */
.int-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.int-item{font-size:16px;min-width:0;background:var(--white)}
.int-item span{min-width:0;overflow-wrap:break-word}
.int-logo{width:32px;height:32px;flex:none;object-fit:contain}
.tm-note{font-size:13px;color:var(--muted)}

/* Moving logo strip */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-track{display:flex;width:max-content}
.marquee-group{display:flex;gap:14px;padding-right:14px}
.marquee .int-item{flex:none;width:200px}
@media (prefers-reduced-motion:no-preference){
  .marquee-track{animation:marquee 45s linear infinite}
  .marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
}
@media (prefers-reduced-motion:reduce){
  .marquee{-webkit-mask-image:none;mask-image:none}
  .marquee-track{width:auto}
  .marquee-group{flex-wrap:wrap;padding-right:0}
  .marquee-group[aria-hidden="true"]{display:none}
}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Multichannel channel rows and global market tiles */
.channel{flex-wrap:nowrap;align-items:center}
.ch-name{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;color:var(--ink)}
.ch-name img{width:22px;height:22px;flex:none}
.sync{font-size:13px;font-weight:700;color:var(--teal);display:flex;align-items:center;gap:6px;white-space:nowrap}
.sync::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mint)}
.markets{flex:0 1 360px;min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.market{background:var(--white);border:2px solid var(--line);border-radius:12px;padding:10px 12px;font-size:14px;white-space:nowrap;font-weight:600;display:flex;align-items:center;gap:8px;min-width:0}
.market b{font-size:11px;font-weight:800;background:var(--tint);color:var(--teal);border-radius:6px;padding:3px 6px;flex:none}
@media (max-width:860px){ .markets{flex:none;width:100%} }

/* Three pillars: stacked without JavaScript, tabs with it */
.tabs{display:flex;flex-direction:column;gap:28px}
.tab-list{align-self:flex-start;display:flex;flex-wrap:wrap;gap:4px;background:var(--white);border-radius:999px;padding:6px;box-shadow:0 8px 24px rgba(11,31,29,0.06)}
.tab-list[hidden]{display:none}
.tab-list button{font-family:inherit;font-size:15px;font-weight:700;color:var(--ink);background:transparent;border:0;border-radius:999px;padding:11px 20px;cursor:pointer}
.tab-list button:hover{background:var(--surface)}
.tab-list button[aria-selected="true"]{background:var(--teal);color:var(--white)}
.tab-panel{display:flex;flex-wrap:wrap;gap:40px;align-items:center;background:var(--white);border-radius:24px;padding:36px}
.tab-panel[hidden]{display:none}
.panel-copy{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:14px}
.panel-copy h3{font-size:clamp(24px,2.6vw,30px);letter-spacing:-0.02em;line-height:1.2}
.ticks{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px;color:var(--body)}
.ticks li{position:relative;padding-left:30px}
.ticks li::before{content:"";position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:6px;background:var(--tint)}
.ticks li::after{content:"";position:absolute;left:6px;top:7px;width:5px;height:9px;border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(45deg)}
.panel-visual{flex:1 1 360px;min-width:0;background:var(--surface);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:16px}
.panel-visual .markets{flex:none;width:100%}
.logo-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.logo-tile{background:var(--white);border-radius:12px;padding:14px 10px;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;font-weight:700;text-align:center}
.logo-tile img{width:28px;height:28px}
.proof{display:flex;align-items:center;gap:14px;background:var(--ink);color:var(--white);border-radius:14px;padding:16px 18px}
.proof strong{font-size:28px;color:var(--mint);letter-spacing:-0.02em;flex:none}
.proof span{font-size:14px;color:rgba(255,255,255,0.86)}
@media (max-width:480px){ .logo-tiles{grid-template-columns:repeat(2,minmax(0,1fr))} .tab-panel{padding:22px} .tab-list{align-self:stretch} .tab-list button{flex:1 1 auto;padding:10px 12px} }

/* Motion for the new pieces */
@media (prefers-reduced-motion:no-preference){
  .tabs.is-tabbed .tab-panel:not([hidden]){animation:fade-in 0.4s ease}
  .sync::before{animation:blink 2s ease-in-out infinite}
  .market{animation:go-live 9s ease-in-out infinite}
  .market:nth-child(2){animation-delay:1s}.market:nth-child(3){animation-delay:2s}.market:nth-child(4){animation-delay:3s}
  .market:nth-child(5){animation-delay:4s}.market:nth-child(6){animation-delay:5s}.market:nth-child(7){animation-delay:6s}.market:nth-child(8){animation-delay:7s}
  .flow .chip{animation:ping 10s ease-in-out infinite}
  .flow .flow-col:first-child .chip:nth-of-type(2){animation-delay:0s}
  .flow .flow-col:last-child .chip:nth-of-type(2){animation-delay:1s}
  .flow .flow-col:first-child .chip:nth-of-type(3){animation-delay:2s}
  .flow .flow-col:last-child .chip:nth-of-type(3){animation-delay:3s}
  .flow .flow-col:first-child .chip:nth-of-type(4){animation-delay:4s}
  .flow .flow-col:last-child .chip:nth-of-type(4){animation-delay:5s}
  .flow .flow-col:first-child .chip:nth-of-type(5){animation-delay:6s}
  .flow .flow-col:last-child .chip:nth-of-type(5){animation-delay:7s}
  .flow .flow-col:first-child .chip:nth-of-type(6){animation-delay:8s}
  .flow .flow-col:last-child .chip:nth-of-type(6){animation-delay:9s}
}
@keyframes fade-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.35}}
@keyframes go-live{0%,8%,100%{border-color:var(--line)}3%{border-color:var(--teal)}}

/* Global commerce: integration groups and deployed countries */
.int-stack{flex:0 1 300px}
.int-row{flex-direction:column;align-items:flex-start;gap:8px}
.logo-row{display:flex;flex-wrap:wrap;gap:10px}
.logo-row img{width:22px;height:22px}
.markets-wide{flex:none;width:100%;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.markets-wide .market{padding:14px 16px;font-size:16px}
.visual-label{font-size:13px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted)}
@media (max-width:860px){ .int-stack{flex:none;width:100%} }

@media (max-width:480px){
  .market{white-space:normal;line-height:1.25}
  .proof{flex-direction:column;align-items:flex-start;gap:4px}
}

.markets-wide{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:640px){ .markets-wide{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* Country flags in market tiles */
.market .flag{width:28px;height:21px;flex:none;border-radius:4px;object-fit:cover;box-shadow:0 0 0 1px rgba(11,31,29,0.12)}
@media (max-width:480px){
  .tab-panel{padding:18px 16px}
  .panel-visual{padding:14px}
  .market{padding:9px 10px;font-size:13px;gap:8px}
  .market .flag{width:22px;height:16px;border-radius:3px}
}