.exchange-hero{background:linear-gradient(180deg,#c990d8 0%,#8e56ab 50%,#522a70 100%)}
.exchange-hero__visual{position:absolute;z-index:1;right:max(0px,calc((100% - 1664px)/2));bottom:0;width:min(75vw,1250px);aspect-ratio:1250/804;pointer-events:none}
.exchange-hero__boom{position:absolute;z-index:1;right:0;top:0;width:74.4%;height:auto}
.exchange-hero__person{position:absolute;z-index:2;right:-15.5%;bottom:-1%;width:94.4%;height:auto}
.ui-hero-cta{display:inline-flex;height:42px;align-items:center;justify-content:center;gap:16px;border-radius:9999px;padding:8px 16px;color:#522a70;font-size:20px;font-weight:600;line-height:1.3}
.ui-hero-cta--lime{background:#faffac;padding:6px 6px 6px 16px}.ui-hero-cta--purple{background:#f0b9f8}
.ui-hero-cta__circle{display:flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:50%;background:#f0b9f8}
.section-title{font-size:36px;font-weight:600;line-height:1;color:#522a70}
.section-copy{max-width:720px;font-size:18px;line-height:1.4;color:#171717}
.process-card{display:grid;width:100%;grid-template-columns:54px 1fr;gap:48px;min-height:176px;border:1.5px solid transparent;border-radius:16px;background:rgba(255,255,255,.7);padding:32px;color:#522a70;text-align:left;transition:background-color .2s ease,border-color .2s ease,transform .2s ease}
.process-card:hover,.process-card:focus-visible{transform:translateY(-2px)}.process-card:focus-visible{outline:3px solid rgba(240,185,248,.7);outline-offset:3px}
.process-card--active{border-color:#522a70;background:#fff}.process-card strong,.info-card h3{display:block;font-size:24px;font-weight:600;line-height:1.1}
.process-card strong+span{display:block;margin-top:24px;font-size:18px;line-height:1.4}.info-card p{margin-top:24px;font-size:18px;line-height:1.4}.process-number{display:flex;width:54px;height:54px;align-items:center;justify-content:center;border-radius:50%;background:#522a70;color:#fff;font-size:24px;font-weight:600}.process-card--active .process-number{background:#f0b9f8;color:#522a70}
.exchange-phone{position:relative;width:316px;height:650px;color:#522a70}
.exchange-phone__frame{position:absolute;z-index:1;inset:0;width:316px;height:650px;pointer-events:none}
.phone-step{position:absolute;z-index:2;left:15px;top:13px;width:287px;height:625px;overflow:hidden;border-radius:32px;background:#fff;opacity:0;pointer-events:none;transition:opacity .18s ease}
.phone-step--active{opacity:1;pointer-events:auto}
.phone-statusbar{display:grid;height:44px;grid-template-columns:1fr 1fr;align-items:center;justify-content:center;column-gap:110px;padding:0 11px;color:#221f22;font-family:Arial,sans-serif;font-size:11.67px;font-weight:700}
.phone-time{text-align:center}.phone-levels{display:flex;align-items:center;justify-content:center;gap:5px}.phone-levels img{display:block;flex:none}.phone-levels img:nth-child(1){width:13.69px;height:8.72px}.phone-levels img:nth-child(2){width:12.22px;height:8.79px}.phone-levels img:nth-child(3){width:19.49px;height:9.27px}
.phone-content{padding:84px 21px 0}.phone-heading{display:flex;min-height:50px;align-items:flex-start;justify-content:space-between;gap:12px}.phone-heading h3{font-size:20px;font-weight:600;line-height:1.25}.phone-heading>span{flex:none;margin-top:2px;border-radius:999px;background:#f0b9f8;padding:5px 9px;font-size:11px;font-weight:600;line-height:1.1}
.phone-skeleton{display:grid;gap:5px;margin-top:14px}.phone-skeleton i{display:block;width:198px;height:9px;border-radius:6px;background:rgba(82,42,112,.2)}.phone-skeleton i+ i{width:162px}
.phone-exchange-card{margin-top:37px;border:1px solid rgba(82,42,112,.18);border-radius:9px;padding:14px}.phone-item{display:flex;align-items:flex-start;gap:14px}.phone-item-icon{display:flex;width:29px;height:29px;flex:none;align-items:center;justify-content:center;border-radius:5px}.phone-item-icon img{display:block;width:16.36px;height:16.36px}.phone-item-icon--return{background:rgba(255,195,112,.3)}.phone-item-icon--new{background:rgba(240,185,248,.3)}.phone-item strong{display:block;font-size:13.74px;line-height:1.3}.phone-item small{display:block;margin-top:9px;color:rgba(0,0,0,.7);font-size:11.45px;line-height:1.3}.phone-success-text{color:#148f6c!important;font-weight:600}.phone-swap{display:flex;width:29px;height:29px;align-items:center;justify-content:center;margin:14px auto;border-radius:50%;background:rgba(41,224,172,.3)}.phone-swap img{display:block;width:20.74px;height:20.74px}
.phone-cta{position:absolute;right:21px;bottom:36px;left:21px;display:flex;height:37px;align-items:center;justify-content:center;border:0;border-radius:999px;background:#f0b9f8;color:#522a70;font-size:14.32px;font-weight:600;cursor:pointer}.phone-cta:focus-visible,.phone-shipping-option:focus-visible{outline:3px solid #522a70;outline-offset:2px}
.phone-shipping-list{display:grid;gap:9px;margin-top:37px}.phone-shipping{position:relative;display:flex;width:100%;min-height:68px;align-items:flex-start;gap:14px;border:1px solid rgba(82,42,112,.2);border-radius:9px;background:#fff;padding:9px;color:#522a70;text-align:left;cursor:pointer}.phone-shipping-option--active{border-color:#522a70;background:rgba(240,185,248,.2)}.phone-radio{display:flex;width:20px;height:20px;flex:none;align-items:center;justify-content:center;border:1.5px solid rgba(82,42,112,.2);border-radius:50%;font-style:normal}.phone-radio img{display:none;width:8.59px;height:8.59px}.phone-shipping-option--active .phone-radio{border-color:#522a70;background:#522a70}.phone-shipping-option--active .phone-radio img{display:block}.phone-shipping strong{display:block;font-size:13.74px;line-height:1.3}.phone-shipping small{display:grid;gap:5px;margin-top:9px}.phone-shipping b{display:block;width:135px;height:9px;border-radius:5px;background:rgba(82,42,112,.2)}.phone-shipping b+b{width:100px}.phone-shipping em{position:absolute;right:9px;top:10px;color:#148f6c;font-size:9.16px;font-style:normal;font-weight:600}.phone-shipping--short{min-height:73px}.phone-shipping--short small{margin-top:5px}
.phone-summary-list{margin-top:36px;color:rgba(0,0,0,.7);font-size:13px}.phone-summary-list>div{display:flex;height:38px;align-items:center;justify-content:space-between;border-bottom:1px solid #f7e8db}.phone-summary-list dd{color:#522a70;font-weight:600}.phone-summary-list .phone-summary-total{border-top:1px solid #522a70;border-bottom:0;color:#522a70;font-weight:600}
.phone-complete{display:flex;flex-direction:column;align-items:center;padding:84px 21px 0;text-align:center}.phone-check{display:flex;width:56px;height:56px;align-items:center;justify-content:center;border:7px solid rgba(41,224,172,.3);border-radius:50%;background:#148f6c}.phone-check img{display:block;width:17.18px;height:17.18px}.phone-complete h3{margin-top:37px;font-size:20px;font-weight:600;line-height:1.25}.phone-skeleton--center{justify-items:center;margin-top:14px}.phone-rating{width:100%;margin-top:18px;border:1px solid #522a70;border-radius:9px;background:rgba(240,185,248,.2);padding:26px 13px 22px}.phone-rating strong{font-size:13px;line-height:1.15}.phone-stars{display:flex;justify-content:center;gap:0;margin-top:18px;white-space:nowrap}.phone-stars img{display:block;width:34.36px;height:34.36px}.phone-rating small{display:block;margin-top:18px;color:#148f6c;font-size:12px;font-weight:600}
.feature-panel{max-width:1666px;margin:0 auto;border-radius:32px 32px 0 0;background:linear-gradient(to bottom,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 30%);padding:clamp(48px,7.4vw,128px)}
.feature-panel--plain{background:none}
.feature-grid{display:grid;grid-template-columns:minmax(0,560px) minmax(420px,1fr);align-items:center;justify-content:space-between;gap:96px}
.ui-badge{display:inline-flex;border-radius:8px;background:rgba(240,185,248,.3);padding:12px 16px;font-size:18px;line-height:1.3}
.check-list{display:grid;gap:18px;font-size:18px;line-height:1.4}.check-list li{position:relative;padding-left:34px}.check-list li:before{content:"✓";position:absolute;left:7px;font-weight:700}
.mock-shell{width:100%;max-width:680px;justify-self:end;border-radius:32px;background:rgba(255,255,255,.5);padding:32px}.mock-shell>h3{font-size:20px;font-weight:600}
.summary-list{display:grid;gap:8px;margin-top:24px}.summary-list div,.rule-list div{display:flex;min-height:54px;align-items:center;justify-content:space-between;gap:20px;border-radius:16px;background:#fff;padding:12px 20px;font-size:14px}.summary-list dd{text-align:right}
.summary-list dt{color:#522a70}.summary-list dd{color:rgba(0,0,0,.7)}
.summary-button{width:100%;height:58px;margin-top:16px;border-radius:999px;background:#e8a5f1;font-size:18px;font-weight:600}
.flow-stack{padding:32px}.flow-card{display:flex;align-items:flex-start;gap:12px;border-radius:16px;background:#fff;padding:24px}.flow-card h3{font-size:20px;font-weight:600;line-height:1.3}.flow-card p{margin-top:24px;color:#522a70;font-size:16px;line-height:1.4}.flow-arrow{display:flex;height:24px;align-items:center;justify-content:center}.flow-arrow img{width:25px;height:15px;transform:rotate(90deg)}
.mock-icon{display:flex;width:24px;height:24px;flex:none;align-items:center;justify-content:center;border-radius:4px}.mock-icon img{width:14px;height:14px}.mock-icon--return{background:rgba(255,195,112,.3)}.mock-icon--order{background:rgba(41,224,172,.3)}.mock-icon--documents{background:rgba(240,185,248,.3)}.configuration-icon svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:48px}.info-card{min-height:260px;border-radius:16px;background:rgba(255,255,255,.7);padding:32px;color:#522a70}.card-icon{display:block;width:40px;height:40px;object-fit:contain}.configuration-icon{display:flex;align-items:center;justify-content:center}.configuration-icon img{width:40px;height:40px}.info-card h3{margin-top:48px;font-size:32px}.info-card p{font-size:18px;line-height:1.4}
.rules-shell{max-width:508px;padding:48px 32px 32px}.rules-shell>h3{line-height:1.3}.rule-list{display:grid;gap:8px;margin-top:32px}.rule-list div{min-height:59px;gap:12px;padding:16px 24px;font-size:16px;line-height:1.4}.rule-list strong{display:flex;align-items:center;gap:12px;color:#148f6c}.rule-list i{position:relative;width:29.33px;height:16px;border-radius:9999px;background:#148f6c}.rule-list i:after{content:"";position:absolute;right:1.33px;top:1.33px;width:13.33px;height:13.33px;border-radius:50%;background:#fff}.rule-list .rule-off{color:rgba(82,42,112,.7);background:rgba(255,255,255,.7)}.rule-list .rule-off strong{color:rgba(242,105,130,.7)}.rule-list .rule-off i{background:rgba(242,105,130,.7)}.rule-list .rule-off i:after{right:14.67px}
.benefits-head{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:48px}.benefits-head>div{grid-column:span 2}.benefits-head .info-card,.feature-panel:has(.benefits-head) .card-grid .info-card{width:100%;min-height:360px;height:360px}
.exchange-cta .section-title{color:#fff}
.ui-section-cta{display:inline-flex;min-height:58px;align-items:center;justify-content:center;gap:16px;border-radius:999px;padding:16px 24px;font-size:20px;font-weight:600}
.integration-panel{max-width:1410px;min-height:676px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:128px;padding:128px 0}.shoptet-card{display:flex;height:368px;align-items:center;justify-content:center;border-radius:16px;background:#fff}.shoptet-card img{width:min(55%,310px);height:auto}
@media(min-width:1024px){.section-title{font-size:60px}}
@media(max-width:1023px){.exchange-hero__visual{right:-310px;width:1050px;opacity:.68}.feature-grid,.integration-panel{grid-template-columns:1fr}.mock-shell{justify-self:start}.card-grid{grid-template-columns:repeat(2,1fr)}.benefits-head{grid-template-columns:1fr 1fr}.benefits-head>div{grid-column:1/-1}.integration-panel{gap:64px;padding:80px 32px}}
@media(max-width:639px){.exchange-hero{min-height:780px}.exchange-hero__visual{right:-500px;width:950px;opacity:.48}.process-card{grid-template-columns:44px 1fr;gap:20px;padding:24px}.process-number{width:44px;height:44px}.exchange-phone{width:250px;height:514px;transform-origin:top left}.exchange-phone__frame{width:250px;height:514px}.phone-step{left:12px;top:10px;width:227px;height:495px;border-radius:26px;transform-origin:top left}.phone-continue{right:27px;bottom:40px;left:27px;height:35px}.phone-shipping-option--active:after,.phone-shipping-option:first-child:not(.phone-shipping-option--active):after{top:6px;left:6px;width:16px;height:16px;font-size:8px}.phone-statusbar{height:35px;background-position:-12px -10px;background-size:250px 514px}.phone-island{top:7px;width:62px;height:18px}.phone-content{padding:56px 17px 0}.phone-heading{min-height:40px}.phone-heading h3{font-size:16px}.phone-heading>span{font-size:9px;padding:4px 7px}.phone-skeleton{margin-top:11px}.phone-skeleton i{width:157px;height:7px}.phone-item-icon{width:23px;height:23px}.phone-item strong,.phone-shipping strong{font-size:10px}.phone-item small{font-size:9px}.phone-swap{width:23px;height:23px;margin:6px auto}.phone-cta{right:17px;bottom:29px;left:17px;height:29px;font-size:11px}.phone-shipping-list{gap:7px;margin-top:28px}.phone-shipping{min-height:54px;gap:10px;padding:7px}.phone-radio{width:16px;height:16px}.phone-shipping b{width:107px;height:7px}.phone-shipping b+b{width:79px}.phone-shipping--short{min-height:43px}.phone-summary-list{margin-top:28px;font-size:10px}.phone-summary-list>div{height:30px}.phone-complete{padding:78px 17px 0}.phone-check{width:44px;height:44px;border-width:6px;font-size:17px}.phone-complete h3{margin-top:14px;font-size:16px}.phone-rating{margin-top:21px;padding:20px 10px 17px}.phone-rating strong{font-size:10px}.phone-rating div{margin-top:14px;font-size:21px}.phone-rating small{margin-top:14px;font-size:9px}.feature-panel{border-radius:24px}.card-grid,.benefits-head{grid-template-columns:1fr;gap:24px}.benefits-head>div{grid-column:auto}.benefits-head .info-card,.feature-panel:has(.benefits-head) .card-grid .info-card{height:auto;min-height:auto}.feature-grid{gap:48px}.info-card{min-height:auto}.mock-shell{padding:20px}.rules-shell{padding:32px 20px 20px}.summary-list div{align-items:flex-start;flex-direction:column;gap:8px}.rule-list div{padding:16px}.shoptet-card{height:260px}}
@media(max-width:639px){.phone-statusbar{grid-template-columns:1fr 1fr;column-gap:87px;padding:0 9px;font-size:9.24px}.phone-levels{gap:4px}.phone-levels img:nth-child(1){width:10.83px;height:6.9px}.phone-levels img:nth-child(2){width:9.67px;height:6.95px}.phone-levels img:nth-child(3){width:15.42px;height:7.34px}.phone-content{padding-top:66px}.phone-exchange-card{margin-top:29px}.phone-item-icon img{width:12.95px;height:12.95px}.phone-swap{margin:11px auto}.phone-swap img{width:16.4px;height:16.4px}.phone-shipping-list{margin-top:29px}.phone-shipping--short{min-height:58px}.phone-complete{padding-top:66px}.phone-check img{width:13.59px;height:13.59px}.phone-complete h3{margin-top:29px}.phone-rating{margin-top:14px}.phone-stars img{width:27.18px;height:27.18px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* Configuration allows 3 or 4 items; with 3 the base 4-column grid would leave
   an empty slot. Desktop-only so the tablet and mobile rules above still win. */
@media(min-width:1024px){.card-grid:has(>.info-card:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}}

/* Integration section shows Shoptet and Shopify stacked (Figma 5897:13662).
   Cards share the column height with a 48px gap and use the white/70 card fill. */
.logo-stack{display:grid;grid-template-rows:1fr 1fr;gap:48px;height:100%}
.logo-stack .shoptet-card{height:auto;min-height:0;background:rgba(255,255,255,.7);padding:32px}
.logo-stack .shoptet-card img{width:auto;max-width:min(100%,200px);height:auto;max-height:56px;object-fit:contain}
@media(max-width:1023px){.logo-stack{grid-template-rows:none;gap:24px}.logo-stack .shoptet-card{min-height:160px}}