/* /ecommerce: page-only rules. The demo, steps, mocks and platform table come from the shared CSS. */
.fs-group{display:contents}

/* The phone's clock is decoration inside an aria-hidden mock. As generated content it is not read as page text, so a contrast checker does not score it against whatever scene is on screen mid-animation. */
.wgd .wg-clock::before{content:"9:41"}

/* The demo's scene progress fills the whole button behind its label, not a thin bar along the bottom edge. */
.wgd-scene::after{height:100%;background:rgba(255,255,255,.2)}
.wgd--dark .wgd-scene::after{background:rgba(10,13,20,.14)}

.fs-hosted h3{font:500 clamp(1.55rem,2.5vw,2.1rem)/1.12 var(--font-head);letter-spacing:-.035em}
.fs-img{display:block;width:100%;max-width:440px;height:auto;margin-inline:auto;border-radius:20px}

.fs-people{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 48px;margin-top:clamp(40px,6vw,72px)}
.fs-people-copy{flex:1 1 420px;max-width:62ch}
.fs-people h3{font:500 clamp(1.3rem,2vw,1.6rem)/1.15 var(--font-head);letter-spacing:-.03em}
.fs-people-copy p{margin-top:10px;color:var(--muted);line-height:1.6}

.fs-plans{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 48px}
.fs-plans-copy{flex:1 1 420px}
.fs-plans .btn-row{margin-top:0}

/* The live demo is the hero visual (4 Nov), so it gets the larger column and stacks at the same width
   as the homepage hero, like /orchestrator. */
@media (min-width:1201px){.pg-ecommerce .phero-grid{grid-template-columns:minmax(0,.62fr) minmax(0,1fr)}}
@media (max-width:1200px){.pg-ecommerce .phero-grid{grid-template-columns:minmax(0,1fr)}.pg-ecommerce .phero-visual{max-width:860px}}

/* Platform strip: Magento and WooCommerce first and larger, Shopify smaller, the rest as text. */
.ec-strip .strip-logos .ec-big img{height:34px;width:auto}
.ec-strip .strip-logos .ec-small img{height:20px;width:auto}
.ec-strip .ec-note{display:block;font-size:.8rem;color:rgba(255,255,255,.78);margin-top:4px}
.ec-strip .strip-inner{flex-wrap:wrap}.ec-strip .ec-also{flex:1 1 100%;margin:0;font-size:.9rem;color:rgba(255,255,255,.78)}

/* Link rows to industries and use cases. */
.ec-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.ec-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:inherit;text-decoration:none;font-weight:500}
.ec-links a:hover{border-color:currentColor}
.ec-sub{margin-top:clamp(28px,4vw,44px)}
.ec-sub h3{font:500 clamp(1.2rem,1.8vw,1.45rem)/1.15 var(--font-head);letter-spacing:-.03em}
.ec-ways .box p.for{color:var(--muted);font-weight:500}
.ec-ways .box ul{margin-top:4px}
@media (max-width:900px){.ec-ways.boxes{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){.pg-ecommerce .boxes-2{grid-template-columns:minmax(0,1fr)}}