.ecommerce-demo-note { margin: 0 0 22px; color: #aec6cb; font-size: 12px; }
.ecommerce-screen-stack { display: grid; gap: 36px; }
.ecommerce-screen-card { min-width: 0; margin: 0; border: 1px solid #365861; background: #061d24; box-shadow: 0 18px 45px #00131826; }
.ecommerce-screen-card figcaption { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 26px 30px; }
.ecommerce-screen-step { color: #49d4e5; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.ecommerce-screen-card h3 { margin: 8px 0; font-size: clamp(22px,2.2vw,30px); line-height: 1.2; letter-spacing: -.025em; }
.ecommerce-screen-card figcaption p { max-width: 740px; margin: 0; color: #b5c9ce; font-size: 15px; line-height: 1.6; }
.ecommerce-screen-card figcaption > a { flex-shrink: 0; padding: 12px 0; color: #49d4e5; font-size: 13px; font-weight: 700; text-underline-offset: 5px; }
.ecommerce-screen-image { display: block; background: #fff; cursor: zoom-in; }
.ecommerce-screen-image img { display: block; width: 100%; height: auto; }
.ecommerce-screen-card a:focus-visible { outline: 3px solid #49d4e5; outline-offset: 5px; }
.ecommerce-screen-insight { display: grid; grid-template-columns: 140px 1fr; gap: 22px; align-items: baseline; padding: 20px 30px; border-top: 3px solid #12a9bf; }
.ecommerce-screen-insight strong { color: #49d4e5; font-size: 13px; }
.ecommerce-screen-insight p { margin: 0; color: #c5d7db; font-size: 14px; line-height: 1.65; }
@media (max-width: 700px) {
  .ecommerce-screen-card figcaption { align-items: start; flex-direction: column; gap: 8px; padding: 22px 18px; }
  .ecommerce-screen-insight { grid-template-columns: 1fr; gap: 8px; padding: 18px; }
  .ecommerce-screen-stack { gap: 24px; }
}
.channel-network { display: grid; grid-template-columns: minmax(0,1.1fr) 44px minmax(200px,.85fr) 44px minmax(0,1fr); align-items: center; padding: 44px 36px; border: 1px solid #d4e3e3; border-radius: 16px; background: radial-gradient(ellipse at 48% 50%,#dff1f0 0%,#f8faf7 65%); }
.channel-network .network-label { margin: 0 0 18px; color: #587176; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.channel-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.channel-tile { display: flex; align-items: center; gap: 10px; min-height: 65px; padding: 12px; border: 1px solid #e0e8e6; border-radius: 9px; background: white; box-shadow: 0 3px 8px #092d3606; }
.channel-tile strong { color: #17373f; font-size: 13px; line-height: 1.3; }
.channel-symbol { display: grid; place-items: center; flex: 0 0 30px; height: 32px; border-radius: 7px; font-size: 19px; font-weight: 800; }
.channel-symbol.shopee { background: #fff0e9; color: #d94c22; }
.channel-symbol.tiktok { background: #10232a; color: #fff; }
.channel-symbol.lazada { background: #f3eaff; color: #7041b7; }
.channel-symbol.shopify { background: #eef5e3; color: #527824; }
.channel-symbol.webstore,.channel-symbol.retail { background: #e8f4f5; color: #087d91; }
.network-footnote { display: block; margin-top: 16px; color: #6b8083; font-size: 12px; }
.network-connector { display: flex; align-items: center; color: #129bad; font-size: 24px; }
.network-connector i { height: 1px; flex: 1; background: #9bcdd1; }
.channel-network-hub { padding: 32px 22px; text-align: center; border-radius: 14px; border: 1px solid #285661; background: linear-gradient(145deg,#0e3640,#04171d); box-shadow: 0 18px 35px #08272f20; }
.channel-network-hub img { width: 112px; height: auto; margin: 0 auto 22px; filter: brightness(0) invert(1); }
.channel-network-hub > p { margin: 0 0 23px; color: white; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -.03em; }
.channel-network-hub > div { display: grid; gap: 8px; border-top: 1px solid #31525b; padding-top: 18px; }
.channel-network-hub > div span { color: #7cdce7; font-size: 12px; }
.network-workflow { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.network-workflow li { display: flex; gap: 12px; align-items: center; padding: 13px 14px; border: 1px solid #dfe7e4; border-radius: 9px; background: #fff; }
.network-workflow li > span { color: #138498; font-size: 11px; font-weight: 700; }
.network-workflow strong { display: block; color: #17373f; font-size: 16px; line-height: 1.3; }
.network-workflow small { display: block; margin-top: 3px; color: #647b80; font-size: 11px; }
.network-workflow b { margin-left: auto; color: #1598a5; font-size: 16px; }
.channel-network-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 25px 4px 0; }
.channel-network-footer p { margin: 0; color: #667b80; font-size: 17px; }
.channel-network-footer strong { color: #153b44; }
.channel-network-footer a { color: #087d91; font-size: 13px; font-weight: 700; text-decoration: none; }
.channel-network-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.channel-network-footer a:focus-visible { outline: 3px solid #087d91; outline-offset: 5px; }
@media (max-width: 1050px) {
  .channel-network { padding: 28px 22px; grid-template-columns: minmax(0,1fr) 28px minmax(180px,.8fr) 28px minmax(0,1fr); }
  .channel-tiles { grid-template-columns: 1fr; gap: 8px; }
  .channel-tile { min-height: 46px; padding: 7px 12px; }
}
@media (max-width: 700px) {
  .channel-network { grid-template-columns: 1fr; padding: 25px 20px; }
  .channel-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .channel-tile { padding: 10px; min-height: 58px; }
  .network-connector { justify-self: center; height: 48px; transform: rotate(90deg); }
  .network-connector i { display: none; }
  .channel-network-hub { width: 100%; padding: 26px; }
  .channel-network-hub > p br { display: none; }
  .channel-network-output { margin-top: 6px; }
  .channel-network-footer { align-items: start; flex-direction: column; gap: 12px; }
}
/* Two screens share one desktop composition; mobile is a native swipe rail. */
.ecommerce-screen-stack {grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start;padding:22px;background:radial-gradient(ellipse at 50% 40%,#15454f,#08242c 75%);border:1px solid #365861;}
.ecommerce-screen-stack > .ecommerce-screen-card:last-child {margin-top:52px;}
.ecommerce-screen-card {position:relative;box-shadow:0 16px 30px #00131845;}
.ecommerce-screen-card figcaption {display:block;padding:22px 22px 16px;}
.ecommerce-screen-card h3 {font-size:24px;}
.ecommerce-screen-card figcaption p {font-size:13px;line-height:1.55;}
.ecommerce-screen-card figcaption > a {display:inline-block;font-size:12px;padding:10px 0 0;}
.ecommerce-screen-insight {display:block;padding:18px 22px;}
.ecommerce-screen-insight strong {display:block;margin-bottom:6px;font-size:11px;}
.ecommerce-screen-insight p {font-size:12px;line-height:1.6;}
.screen-viewer-controls {display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px;}
.screen-viewer-controls[hidden] {display:none;}
.screen-viewer-tabs {display:flex;gap:4px;padding:4px;border:1px solid #365861;background:#061d24;border-radius:6px;}
.screen-viewer-tabs button {border:0;background:transparent;color:#b5c9ce;font:inherit;font-size:12px;font-weight:700;cursor:pointer;padding:11px 14px;border-radius:3px;}
.screen-viewer-tabs button[aria-current="true"] {background:#49d4e5;color:#061d24;}
.screen-viewer-controls button:focus-visible {outline:3px solid #49d4e5;outline-offset:4px;}
.screen-swipe-hint {font-size:11px;color:#a9cbd0;text-align:right;}
@media(min-width:701px) and (max-width:1000px) {
 .ecommerce-screen-stack {gap:16px;padding:16px;}
 .ecommerce-screen-card figcaption {padding:18px 16px 14px;}
 .ecommerce-screen-card h3 {font-size:21px;min-height:76px;}
 .ecommerce-screen-card figcaption p {min-height:82px;}
 .ecommerce-screen-insight {padding:16px;}
}
@media(max-width:700px) {
 .ecommerce-screen-stack {display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#49d4e5 #08242c;overscroll-behavior-x:contain;padding:0 0 16px;background:none;border:0;align-items:stretch;}
 .ecommerce-screen-card {flex:0 0 94%;scroll-snap-align:start;scroll-snap-stop:always;box-shadow:none;}
 .ecommerce-screen-stack > .ecommerce-screen-card:last-child {margin-top:0;}
 .ecommerce-screen-card figcaption {padding:22px 18px 18px;}
 .ecommerce-screen-card h3 {font-size:23px;min-height:0;}
 .ecommerce-screen-card figcaption p {min-height:0;}
 .ecommerce-screen-insight {padding:18px;}
 .screen-viewer-tabs button {padding:10px 11px;}
 .screen-swipe-hint {max-width:72px;}
}
@media(prefers-reduced-motion:reduce) {.ecommerce-screen-stack {scroll-behavior:auto;}}