/* Public integrations presentation; editorial content stays in the CMS. */
body:has(.integration-visual) { font-family:'DM Sans','Segoe UI',sans-serif; -webkit-font-smoothing:antialiased; }
body:has(.integration-visual) :is(h1,h2,h3) { font-family:'Outfit','Segoe UI',sans-serif; }
.site-main:has(.integration-visual) { padding-top:0; }
.integration-visual { --integration-blue:#2457f5; --integration-ink:#172e55; --accent:#2457f5; --accent-hover:#1743ce; --teal:#2457f5; color:var(--integration-ink); gap:0; background:#fff; }
.integration-visual [hidden] { display:none !important; }
.integration-visual :is(a,button):focus-visible { outline:3px solid #2457f5; outline-offset:5px; }
.integration-visual :is(h1,h2,h3,p,figure) { margin:0; }
.integration-visual :is(h1,h2,h3) { color:var(--integration-ink); font-weight:550; letter-spacing:-.045em; text-wrap:balance; }
.integration-visual .button { display:inline-flex; align-items:center; justify-content:center; gap:16px; min-height:52px; padding:15px 22px; border-radius:11px; font:700 13px/1.5 'DM Sans',sans-serif; text-decoration:none; box-shadow:none; }
.integration-visual .button--primary { color:#fff; background:#2457f5; border:1px solid #2457f5; }
.integration-visual .button--primary:hover { background:#1743ce; transform:translateY(-2px); }
.integration-visual .button--secondary { color:#244980; border:1px solid #d6e0f2; background:#fff; }
.integration-wrap { width:min(calc(100% - 64px),1240px); margin-inline:auto; }
.integration-visual .integration-kicker { margin:0 0 22px; color:#4765c6; font-size:10px; line-height:1.65; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.integration-hero { overflow:hidden; padding:82px 0 0; background:linear-gradient(135deg,#fff 35%,#f6f9ff); }
.integration-hero > .integration-wrap { display:grid; grid-template-columns:1fr 1.06fr; gap:50px; align-items:center; }
.integration-hero h1 { max-width:670px; font-size:clamp(40px,4.25vw,62px); line-height:1.06; }
.integration-visual .integration-lead { max-width:590px; margin:28px 0; color:#62718a; font-size:16px; line-height:1.85; }
.integration-actions { display:flex; flex-wrap:wrap; gap:12px; }
.integration-hero__copy--center { text-align:center; }
.integration-hero__copy--center .integration-actions { justify-content:center; }
.integration-hero__brand { margin-bottom:25px; }
.integration-hero__brand .commerce-brand { height:40px; }
.integration-universe { position:relative; min-height:570px; display:flex; align-items:center; padding:74px 22px 42px; isolation:isolate; }
.integration-orbit { z-index:-1; position:absolute; width:510px; height:510px; border:1px solid #2457f51c; border-radius:50%; top:28px; left:calc(50% - 255px); background:radial-gradient(circle,#e5edff 0%,#f0f5ff 55%,transparent 72%); box-shadow:0 0 0 44px #2457f506; }
.integration-storefront { width:100%; overflow:hidden; position:relative; transform:rotate(-4deg); background:#fff; border:1px solid #e6ebf4; border-radius:17px; box-shadow:0 26px 65px #21418b1e; }
.integration-storefront__bar { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; font-size:12px; gap:15px; }
.integration-storefront__bar > span:first-child { color:#2457f5; font-size:25px; }
.integration-storefront__bar > span:last-child { letter-spacing:.2em; color:#8b98b0; }
.integration-collection { display:block; width:100%; height:auto; }
.integration-storefront figcaption { display:flex; justify-content:space-between; align-items:center; padding:16px 22px; color:#63708b; font-size:11px; }
.integration-storefront figcaption > span:last-child { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#edf2ff; color:#2457f5; font-size:17px; }
.integration-brand-node { position:absolute; top:0; left:calc(50% - 74px); z-index:2; display:flex; align-items:center; gap:8px; padding:12px 16px; border-radius:13px; border:1px solid #e3ebfa; background:#fff; box-shadow:0 10px 30px #243e7520; font-size:12px; font-weight:700; transform:rotate(5deg); }
.integration-brand-node img { width:34px; height:38px; }
.integration-platform-node { position:absolute; z-index:3; display:flex; align-items:center; justify-content:center; padding:17px 22px; background:#fff; border:1px solid #e3e9f2; border-radius:14px; box-shadow:0 15px 40px #263f7621; }
.integration-platform-node--woo { top:98px; left:-28px; transform:rotate(-7deg); }
.integration-platform-node--shopify { bottom:75px; right:-20px; transform:rotate(6deg); }
.integration-platform-node .commerce-brand { height:32px; gap:7px; }
.integration-platform-node .commerce-brand__wordpress { width:29px; height:29px; }
.integration-platform-node .commerce-brand__woocommerce { width:77px; height:24px; }
.integration-platform-node .commerce-brand__shopify { width:104px; height:32px; }
.integration-connected { position:absolute; bottom:17px; left:42px; display:flex; align-items:center; gap:9px; padding:12px 16px; background:#2457f5; color:#fff; border-radius:40px; font-size:11px; font-weight:650; transform:rotate(-3deg); }
.integration-connected span { font-size:21px; }
.integration-ribbon { display:flex; justify-content:center; align-items:center; gap:45px; padding:28px 20px; margin-top:65px; border-block:1px solid #e9edf5; font-family:'Outfit',sans-serif; font-size:22px; color:#49658e; }
.integration-ribbon i { color:#5276ef; font-size:25px; font-style:normal; }
.integration-choices { padding:92px 0 30px; background:#fff; }
.integration-section-heading { max-width:820px; margin:0 0 42px; }
.integration-section-heading h2 { font-size:clamp(31px,3.5vw,47px); line-height:1.13; }
.integration-section-heading > p:last-child:not(.integration-kicker) { max-width:760px; margin-top:20px; color:#6a768a; font-size:15px; line-height:1.85; }
.integration-tabs { display:flex; gap:12px; margin-bottom:24px; }
.integration-tabs button { display:flex; align-items:center; gap:15px; padding:17px 23px; font:650 14px/1.4 'DM Sans',sans-serif; color:#4e6381; border:1px solid #dce4f1; border-radius:12px; background:#fff; cursor:pointer; transition:background .2s,box-shadow .2s; }
.integration-tabs button[aria-selected=true] { background:#2457f5; color:#fff; border-color:#2457f5; box-shadow:0 8px 25px #2457f527; }
.integration-tabs button > span:last-child { margin-left:18px; }
.integration-tab-number { opacity:.6; font-size:10px; font-weight:500; }
.integration-platform { display:grid; grid-template-columns:.95fr 1.05fr; gap:0; border:1px solid #e2e9f3; border-radius:26px; overflow:hidden; margin-bottom:20px; background:#f4f7ff; }
.integration-platform__intro { padding:48px; background:radial-gradient(ellipse at bottom left,#dee9ff,transparent 65%),#f0f5ff; }
.integration-platform--shopify .integration-platform__intro { background:radial-gradient(ellipse at bottom left,#e3e6fb,transparent 65%),#f4f4ff; }
.integration-platform__brand { min-height:48px; margin-bottom:38px; display:flex; align-items:center; }
.integration-platform__brand .commerce-brand { gap:12px; }
.integration-platform__brand .commerce-brand__wordpress { width:39px; height:39px; }
.integration-platform__brand .commerce-brand__woocommerce { width:125px; height:36px; }
.integration-platform__brand .commerce-brand__shopify { width:160px; height:48px; }
.integration-platform__intro h3 { font-size:36px; line-height:1.13; }
.integration-platform__intro > p:not(.integration-kicker) { margin:20px 0 26px; color:#5b6e8b; line-height:1.85; font-size:15px; }
.integration-platform__intro .integration-kicker { margin-bottom:13px; }
.integration-mini-flow { display:flex; gap:14px; align-items:center; margin-top:44px; }
.integration-mini-flow span { display:flex; align-items:center; justify-content:center; min-width:50px; height:50px; padding:0 14px; border:1px solid #d8e3fb; border-radius:10px; background:#ffffffa3; color:#496898; font-size:11px; }
.integration-mini-flow span:first-child { font-size:28px; color:#2457f5; }
.integration-mini-flow i { color:#7b96c2; font-style:normal; }
.integration-platform__details { padding:48px; background:#fff; }
.integration-facts { margin:0; }
.integration-facts > div + div { margin-top:27px; }
.integration-facts dt { display:flex; align-items:center; gap:12px; color:#24446f; font-size:12px; font-weight:750; text-transform:none; letter-spacing:0; }
.integration-facts dt span { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; color:#5b77bc; background:#eef3ff; font-size:10px; flex:none; }
.integration-facts dd { color:#697891; margin:12px 0 0 40px; font-size:14px; line-height:1.85; }
.integration-highlights { display:grid; gap:14px; list-style:none; border-top:1px solid #e9edf5; padding:28px 0 0; margin:28px 0 0; }
.integration-highlights li { display:flex; gap:12px; align-items:flex-start; color:#46617f; font-size:13px; line-height:1.7; }
.integration-highlights li span { color:#3864d9; }
.integration-shared { padding:74px 0 85px; background:#fff; }
.integration-foundations { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px; }
.integration-foundations--1 { grid-template-columns:1fr; }
.integration-foundations--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.integration-foundations--4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.integration-foundation__art { height:180px; border-radius:19px; position:relative; display:flex; align-items:center; justify-content:center; background:#edf3ff; overflow:hidden; isolation:isolate; margin-bottom:27px; }
.integration-foundation__art--2 { background:#f8f2eb; }
.integration-foundation__art--3 { background:#f0f0fd; }
.integration-foundation__art span { transition:transform .35s; }
.integration-foundation:hover .integration-art-cube { transform:rotate(13deg) translateY(-5px); }
.integration-art-layer { background:#fff; border:1px solid #cbd9f6; color:#80a0e6; font:600 33px 'Outfit',sans-serif; display:grid; place-items:center; width:91px; height:112px; border-radius:12px; transform:rotate(-13deg); box-shadow:0 10px 25px #2457f50e; }
.integration-art-cube { display:grid; place-items:center; background:#2457f5; color:#fff; font:550 38px 'Outfit',sans-serif; width:99px; height:105px; border-radius:15px; transform:rotate(10deg); margin-left:-9px; box-shadow:12px 15px 0 #2457f520; }
.integration-art-design { display:grid; place-items:center; color:#2457f5; background:#fff; border-radius:14px; width:86px; height:95px; font-size:62px; transform:rotate(-9deg); box-shadow:0 10px 20px #96795410; }
.integration-art-arrow { color:#ad815b; font-size:29px; margin:0 13px; }
.integration-art-order { display:grid; place-items:center; width:75px; height:94px; background:#efd0ac; border-radius:12px; font-size:38px; color:#795c43; transform:rotate(9deg); }
.integration-art-template { display:grid; place-items:center; width:74px; height:102px; background:#fff; color:#7770d8; font-size:41px; border-radius:10px; border:1px solid #e1def8; box-shadow:0 10px 20px #6762a812; transform:rotate(-15deg); }
.integration-art-template:nth-child(2) { transform:translateY(-10px); color:#2457f5; z-index:1; margin-inline:-8px; }
.integration-art-template:nth-child(3) { transform:rotate(15deg); color:#9884bd; }
.integration-foundation__index { color:#6f89ba; font-size:11px; }
.integration-foundation h3 { margin:12px 0 16px; font-size:26px; line-height:1.18; }
.integration-foundation p { color:#6c798e; font-size:14px; line-height:1.85; }
.integration-foundation a { display:inline-block; margin-top:18px; color:#2457f5; }
.integration-next { margin-top:82px; padding:43px 48px; background:#f0f5ff; border-radius:24px; display:flex; justify-content:space-between; align-items:center; gap:28px; }
.integration-next .integration-kicker { margin-bottom:12px; }
.integration-next h2 { font-size:37px; }
.integration-next .button { flex:none; }
@media(min-width:1500px) { .integration-hero h1 { font-size:64px; } }
@media(max-width:1050px) { .integration-hero > .integration-wrap { gap:24px; }.integration-universe { min-height:480px; padding-inline:12px; }.integration-platform-node--woo { left:-5px; }.integration-platform-node--shopify { right:-5px; }.integration-connected { left:10px; bottom:30px; }.integration-hero { padding-top:60px; }.integration-platform__intro,.integration-platform__details { padding:32px; }.integration-ribbon { gap:25px; } }
@media(max-width:800px) { .integration-hero > .integration-wrap { grid-template-columns:1fr; gap:40px; }.integration-hero h1 { max-width:660px; font-size:clamp(39px,7.5vw,57px); }.integration-universe { width:min(100%,590px); margin:auto; min-height:510px; }.integration-platform-node--woo { top:100px; }.integration-connected { bottom:0; }.integration-ribbon { margin-top:44px; gap:22px; font-size:18px; }.integration-ribbon i:last-of-type,.integration-ribbon span:last-child { display:none; }.integration-platform { grid-template-columns:1fr; }.integration-mini-flow { margin-top:30px; }.integration-choices { padding-top:62px; }.integration-foundations { gap:24px; }.integration-foundation h3 { font-size:23px; }.integration-foundation__art { height:150px; }.integration-art-layer,.integration-art-cube { width:70px; height:88px; }.integration-art-template { width:55px; height:85px; }.integration-art-design,.integration-art-order { width:55px; height:78px; }.integration-next { padding:30px; }.integration-next h2 { font-size:30px; } }
@media(max-width:560px) { .integration-wrap { width:calc(100% - 36px); }.integration-hero { padding-top:43px; }.integration-hero h1 { font-size:42px; line-height:1.08; }.integration-visual .integration-lead { font-size:15px; margin:24px 0; }.integration-actions { flex-direction:column; align-items:flex-start; }.integration-visual .button { min-height:48px; padding:13px 18px; }.integration-universe { min-height:405px; padding:73px 12px 32px; }.integration-brand-node { top:0; padding:9px 12px; font-size:11px; }.integration-storefront__bar { padding:12px; font-size:10px; gap:10px; }.integration-storefront figcaption { padding:12px; font-size:10px; }.integration-platform-node { padding:12px; border-radius:12px; }.integration-platform-node--woo { top:75px; left:-2px; }.integration-platform-node--shopify { bottom:46px; right:0; }.integration-platform-node .commerce-brand__wordpress { width:22px; height:22px; }.integration-platform-node .commerce-brand__woocommerce { width:61px; height:22px; }.integration-platform-node .commerce-brand__shopify { width:82px; height:28px; }.integration-orbit { width:360px; height:360px; left:calc(50% - 180px); }.integration-connected { font-size:10px; padding:9px 12px; left:15px; bottom:0; }.integration-ribbon { gap:15px; font-size:16px; padding:22px 16px; margin-top:33px; }.integration-ribbon i { font-size:20px; }.integration-section-heading { margin-bottom:30px; }.integration-section-heading h2 { font-size:33px; }.integration-visual .integration-kicker { margin-bottom:17px; font-size:9px; }.integration-tabs { gap:8px; }.integration-tabs button { flex:1; justify-content:center; padding:15px 12px; font-size:12px; gap:8px; border-radius:11px; }.integration-tabs button > span:last-child,.integration-tab-number { display:none; }.integration-platform__intro,.integration-platform__details { padding:27px 23px; }.integration-platform__brand { margin-bottom:28px; }.integration-platform__intro h3 { font-size:32px; }.integration-platform__intro > p:not(.integration-kicker) { font-size:14px; }.integration-facts dd { margin-left:0; font-size:13px; }.integration-mini-flow { gap:10px; }.integration-mini-flow span { padding-inline:11px; }.integration-foundations { grid-template-columns:1fr; gap:40px; }.integration-foundation__art { height:200px; }.integration-foundation h3 { font-size:28px; }.integration-art-layer,.integration-art-cube { width:94px; height:112px; }.integration-art-template { width:79px; height:115px; }.integration-art-design,.integration-art-order { width:85px; height:107px; }.integration-shared { padding:40px 0 48px; }.integration-next { margin-top:53px; align-items:flex-start; flex-direction:column; padding:28px 24px; }.integration-next h2 { font-size:33px; } }
@media(max-width:560px) { .integration-universe { display:block; min-height:0; padding-bottom:0; }.integration-connected { position:relative; bottom:auto; left:auto; width:max-content; margin:22px 0 0 8px; }.integration-platform-node--woo { top:auto; bottom:148px; left:0; }.integration-platform-node--shopify { bottom:122px; }.integration-storefront { transform:rotate(-3deg); } }
@media(prefers-reduced-motion:reduce) { .integration-visual * { transition:none !important; animation:none !important; scroll-behavior:auto !important; } }