/* Three integration stories, with independent photography, interface and motion. */
.connect-section{display:block;isolation:isolate}
.cx-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:50px;margin-bottom:38px}
.connect-section .eyebrow{font-size:.75rem;letter-spacing:.2em;margin:0 0 20px}
.connect-section h2{font-size:clamp(2.2rem,3.6vw,3.75rem);line-height:1.13;letter-spacing:-.05em;margin:0}.connect-section h2 em{font-style:normal;color:var(--blue)}
.connect-section .cx-heading>p{font-size:1.0625rem;line-height:1.7;max-width:365px;margin:0 0 5px}
.cx-experience{--cx-accent:#326fe4;--cx-glow:#8ebcff40;border:1px solid var(--line);border-radius:30px;overflow:hidden;background:var(--surface);box-shadow:0 24px 65px #183c6910}
.cx-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:12px;border-bottom:1px solid var(--line);gap:10px}
.cx-tabs>button{display:flex;align-items:center;justify-content:center;gap:19px;position:relative;min-height:100px;padding:15px 20px;border:1px solid transparent;border-radius:19px;background:transparent;text-align:left;color:var(--ink);transition:background .25s,border-color .25s}
.cx-tabs>button[aria-selected="true"]{background:var(--surface-alt);border-color:var(--line)}
.cx-tabs>button::after{content:'';position:absolute;bottom:7px;width:27px;height:3px;border-radius:3px;background:transparent;left:calc(50% - 13px)}.cx-tabs>button[aria-selected="true"]::after{background:var(--cx-accent)}
.cx-tabs strong{display:block;font:750 1.0625rem/1.4 'Manrope',sans-serif}.cx-tabs small{display:block;font-size:.875rem;line-height:1.5;color:var(--muted);margin-top:4px}
.cx-tab-icon{width:55px;height:55px;flex:none;display:grid;place-items:center}.cx-tab-icon img{width:100%;height:100%;object-fit:contain}.cx-api-symbol{font-family:monospace;font-size:2rem;font-weight:600;letter-spacing:-.08em;color:#3b7fee;background:linear-gradient(145deg,#e2f1ff,#cdddfb);border:1px solid #b9d1f8;border-radius:16px;box-shadow:inset 0 2px 1px #fff,0 7px 12px #245dcc12}.cx-wp-symbol{background:#21759b;border:1px solid #165e80;border-radius:16px;padding:7px}
.cx-workspace{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(0,1fr);min-width:0}
.cx-visual{position:relative;display:flex;flex-direction:column;min-width:0;padding:25px 30px 0;background:radial-gradient(ellipse at 50% 48%,var(--cx-glow),transparent 68%),linear-gradient(145deg,#eff5ff,#edf5f7);border-right:1px solid var(--line);overflow:hidden}
.cx-scene-header{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:25px}.cx-scene-header>span{font-size:.75rem;font-weight:600;line-height:1.5;letter-spacing:.12em;color:#526e8d}
.connect-motion{width:42px;height:42px;flex:none;border:1px solid #bdcfe2;border-radius:50%;background:#ffffff80;display:grid;place-items:center;font-size:1rem;color:#29496b}
.cx-scene{min-width:0;flex:1;display:flex;flex-direction:column;justify-content:center}
.cx-protocol{display:grid;grid-template-columns:minmax(0,1fr) minmax(80px,.7fr) minmax(0,1fr);align-items:center;gap:17px;padding:0 5px}.cx-protocol-end{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}.cx-protocol-end strong{font-size:.875rem;line-height:1.5;color:#294b70}.cx-code-mark{font-family:monospace;letter-spacing:-.1em;display:grid;place-items:center;color:#3677c1;font-size:1.5rem;line-height:1.5}
.cx-ionea-end>img{width:125px;max-width:100%;height:auto;object-fit:contain}.cx-ionea-end small{font-size:.75rem;letter-spacing:.12em;color:#64809d}
.cx-duplex{display:flex;flex-direction:column;gap:16px}.cx-duplex>span{display:block;position:relative;padding-bottom:6px;overflow:hidden;font-size:.75rem;line-height:1.4;font-weight:600;letter-spacing:.08em;text-align:center;color:#5077a2;border-bottom:1px solid #a5c3df}.cx-duplex i{position:absolute;bottom:-1px;left:0;width:35%;height:3px;background:var(--cx-accent);animation:cx-packet 2.4s linear infinite}.cx-duplex>span:last-child i{animation-direction:reverse;animation-delay:-1.2s;background:#2ba185}
.cx-photo{display:block;width:100%;height:auto;max-height:340px;object-fit:contain;filter:drop-shadow(0 15px 14px #2445641a);animation:cx-hover 8s ease-in-out infinite;pointer-events:none}.cx-devices{margin:9px 0 0}
.cx-scene-caption{display:flex;align-items:center;gap:17px;padding:18px 2px 27px;margin-top:auto}.cx-scene-caption>.cx-code-mark,.cx-wordpress-mini{width:39px;flex:none}.cx-scene-caption strong{display:block;font-size:.9375rem;font-weight:650;line-height:1.5;color:#244366}.cx-scene-caption div>span{display:block;font-size:.875rem;line-height:1.6;color:#607a95;margin-top:4px}.cx-wordpress-mini{background:#21759b;border-radius:50%;padding:4px;display:grid;place-items:center}
.cx-server-labels{display:flex;justify-content:space-between;gap:25px;padding:0 12%;font:700 .9375rem/1.5 'Manrope',sans-serif;color:#2e536c}.cx-servers{max-height:370px;margin-top:2px}.cx-server-link{display:flex;gap:14px;align-items:center;padding:4px 10% 15px}.cx-server-link>span{font-size:.75rem;letter-spacing:.1em;color:#557c82}.cx-server-link>div{flex:1;position:relative;height:7px;border-block:1px solid #70b5a67a;overflow:hidden}.cx-server-link i{position:absolute;top:-1px;left:0;width:20%;height:2px;background:#23a58b;animation:cx-packet 2s linear infinite}.cx-server-link i:last-child{top:auto;bottom:-1px;animation-direction:reverse}
.cx-wordpress-scene{padding-inline:8px}.cx-wp-window{border:1px solid #bccde0;border-radius:18px;background:#fff;color:#173352;box-shadow:0 15px 35px #254a7719;overflow:hidden;width:100%;max-width:455px;margin:5px auto 20px;transform:perspective(1000px) rotateY(-3deg);transition:transform .4s}.cx-wp-window:hover{transform:perspective(1000px) rotateY(0)}
.cx-wp-header{display:flex;align-items:center;gap:10px;padding:14px 20px;background:#f7fafc;border-bottom:1px solid #e0e8f0}.cx-wp-header>img{background:#21759b;border-radius:50%;padding:2px}.cx-wp-header strong{font-size:.9375rem;font-weight:600}.cx-wp-header>span{font-size:.8125rem;color:#637b92;margin-left:auto}
.cx-plugin{padding:22px 24px}.cx-plugin-category{display:block;font-size:.75rem;letter-spacing:.13em;color:#67809a;margin-bottom:17px}.cx-plugin-logo{display:block;width:138px;height:auto;margin-bottom:8px}.cx-plugin h3{font:750 1.35rem/1.4 'Manrope',sans-serif;margin:0 0 8px;letter-spacing:-.03em}.connect-section .cx-plugin>p{font-size:.875rem;line-height:1.65;margin:0 0 23px;color:#63798f;max-width:300px}
.cx-plugin-setting{display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid #dfe8f2;padding:17px 0 13px;font-size:.875rem;font-weight:600}.cx-plugin-switch{display:flex;width:49px;height:29px;border:1px solid #aebfce;background:#c8d5e1;border-radius:30px;padding:3px;transition:background .3s;align-items:center}.cx-plugin-switch>span{width:21px;height:21px;background:#fff;box-shadow:0 1px 4px #203c5924;border-radius:50%;transition:transform .3s}.cx-plugin-switch[aria-checked="true"]{background:#249179;border-color:#249179}.cx-plugin-switch[aria-checked="true"]>span{transform:translateX(19px)}
.cx-plugin-status{color:#617b91;font-size:.8125rem;line-height:1.5}.cx-wp-footer{display:flex;justify-content:space-between;gap:12px;background:#f4f8fb;border-top:1px solid #e0e8f0;padding:13px 20px;font-size:.75rem;color:#637c94}.cx-wp-footer>span:first-child{color:#246e95;font-weight:600}
.cx-visual-foot{margin-top:auto;border-top:1px solid #aac4d961;display:flex;align-items:center;gap:10px;min-height:58px;padding:15px 0;font-size:.875rem;line-height:1.45;color:#3f607f}.cx-phase-count{margin-left:auto;font-size:.75rem;white-space:nowrap;font-variant-numeric:tabular-nums;color:#6c839d}.cx-status-indicator{width:6px;height:6px;border-radius:50%;flex:none;background:var(--cx-accent);box-shadow:0 0 0 5px var(--cx-glow)}
.cx-detail{padding:clamp(28px,3.5vw,55px);min-width:0;display:flex;flex-direction:column;justify-content:center}.cx-detail-kicker{font-size:.75rem;line-height:1.6;letter-spacing:.14em;color:var(--blue);font-weight:600}.cx-detail h3{font:750 clamp(1.75rem,2.3vw,2.7rem)/1.17 'Manrope',sans-serif;letter-spacing:-.045em;margin:17px 0 19px;color:var(--ink);white-space:pre-line}.connect-section .cx-detail>p{font-size:1rem;line-height:1.75;color:var(--muted);margin:0}
.cx-steps{display:grid;gap:3px;margin:25px 0 26px}.cx-steps>button{display:flex;gap:16px;align-items:center;min-height:78px;padding:14px 16px;text-align:left;border:1px solid transparent;border-radius:15px;background:transparent;color:var(--ink);transition:background .3s,border-color .3s}.cx-steps>button[aria-pressed="true"]{background:var(--surface-alt);border-color:var(--line)}.cx-step-number{color:var(--muted);font-size:.8125rem;flex:none;font-variant-numeric:tabular-nums}.cx-steps strong{display:block;font-size:.9375rem;line-height:1.45}.cx-steps small{display:block;font-size:.875rem;line-height:1.5;color:var(--muted);margin-top:3px}.cx-step-check{font-size:1.0625rem;color:#30a181;opacity:0;margin-left:auto;flex:none}.cx-steps .is-complete .cx-step-check{opacity:1}.cx-steps [aria-pressed="true"] .cx-step-number{color:var(--cx-accent)}
.connect-section .connect-contact{display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:.9375rem;line-height:1.5;padding:17px 23px;max-width:100%;text-align:left;white-space:normal}.connect-contact>span:last-child{font-size:1.4rem;flex:none}.cx-guidance{font-size:.8125rem;line-height:1.6;color:var(--muted);margin-top:15px;text-align:center}.connect-section .cx-note{font-size:.75rem;color:var(--muted);line-height:1.5;margin:16px 0 0;text-align:right;max-width:none}
.cx-experience [hidden]{display:none!important}.cx-experience:not(.is-running) *{animation-play-state:paused!important}.cx-experience:not(.is-running) .cx-scene{animation:none}.cx-experience [data-connect-scene]{animation:cx-scene-in .4s ease both}.cx-experience[data-connect-mode="server"]{--cx-accent:#258d80;--cx-glow:#72d5b838}.cx-experience[data-connect-mode="wordpress"]{--cx-accent:#227a9e;--cx-glow:#a6d9ec4a}
.cx-duplex>span{transition:opacity .35s}.cx-experience[data-connect-phase="0"] .cx-duplex>span{opacity:.45}.cx-experience[data-connect-phase="1"] .cx-duplex>span:last-child{opacity:.4}.cx-experience[data-connect-phase="2"] .cx-duplex>span:first-child{opacity:.55}.cx-experience[data-connect-phase="0"] .cx-server-link i{opacity:.3}
.connect-section button:focus-visible,.connect-section a:focus-visible,#connect-panel:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
[data-theme="dark"] .cx-visual{background:radial-gradient(ellipse at 50% 48%,var(--cx-glow),transparent 70%),linear-gradient(145deg,#0e2139,#102d3a)}[data-theme="dark"] .cx-scene-header>span,[data-theme="dark"] .cx-protocol-end strong,[data-theme="dark"] .cx-scene-caption strong,[data-theme="dark"] .cx-server-labels,[data-theme="dark"] .cx-visual-foot{color:#d6e9fb}
[data-theme="dark"] .cx-scene-caption div>span,[data-theme="dark"] .cx-ionea-end small,[data-theme="dark"] .cx-duplex>span,[data-theme="dark"] .cx-server-link>span,[data-theme="dark"] .cx-phase-count{color:#a3bfd5}[data-theme="dark"] .connect-motion{background:#112e44;border-color:#50708c;color:#d8edff}[data-theme="dark"] .cx-code-mark{color:#8bc4ff}
@keyframes cx-packet{from{transform:translateX(-120%)}to{transform:translateX(550%)}}@keyframes cx-hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes cx-scene-in{from{opacity:.25;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(min-width:1700px){.cx-photo{max-height:420px}.cx-visual{padding:30px 45px 0}.cx-detail{padding:50px 65px}.cx-wp-window{max-width:510px}.cx-plugin{padding:27px 32px}}
@media(max-width:1100px){.cx-heading{gap:30px}.cx-heading>p{max-width:320px}.cx-tabs>button{gap:13px;padding:13px 10px}.cx-tab-icon{width:46px;height:46px}.cx-tabs small{font-size:.8125rem}.cx-workspace{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}.cx-detail{padding:27px}.cx-visual{padding:22px 23px 0}.cx-protocol{gap:11px}.cx-steps>button{padding:12px 9px;gap:12px}.cx-wordpress-scene{padding-inline:0}}
@media(max-width:850px){.cx-heading{display:block}.connect-section .cx-heading>p{max-width:590px;margin-top:22px}.cx-tabs>button{flex-direction:column;text-align:center;gap:10px;min-height:100px;padding-bottom:18px}.cx-tabs small{display:none}.cx-tabs strong{font-size:.9375rem}.cx-workspace{grid-template-columns:1fr}.cx-visual{border-right:0;border-bottom:1px solid var(--line);padding:22px 7% 0}.cx-photo{max-height:340px}.cx-protocol{max-width:510px;width:100%;margin:auto}.cx-server-labels{width:100%;max-width:510px;margin:auto}.cx-servers{width:100%;max-width:540px;margin-inline:auto}.cx-server-link{max-width:530px;width:100%;margin:auto}.cx-scene-caption{padding-bottom:24px}.cx-detail{padding:30px}.cx-detail h3{font-size:2rem;white-space:normal}.cx-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-block:22px}.cx-steps>button{flex-direction:column;align-items:flex-start;gap:9px;padding:14px 12px;position:relative}.cx-step-check{position:absolute;top:12px;right:10px}.connect-contact{max-width:420px!important}.cx-guidance{text-align:left}.cx-scene-header{margin-bottom:15px}}
@media(max-width:540px){.connect-section{padding-inline:5%}.connect-section h2{font-size:clamp(2rem,8.1vw,2.65rem);letter-spacing:-.04em}.connect-section .cx-heading>p{font-size:1rem}.cx-experience{border-radius:24px}.cx-tabs{gap:4px;padding:7px}.cx-tabs>button{min-height:107px;gap:8px;padding:10px 5px 18px;border-radius:15px}.cx-tabs strong{font-size:.875rem;line-height:1.35}.cx-tab-icon{width:38px;height:38px}.cx-api-symbol{font-size:1.55rem;border-radius:12px}.cx-wp-symbol{padding:4px;border-radius:12px}.cx-visual{padding:16px 17px 0}.cx-scene-header>span{font-size:.75rem;letter-spacing:.08em}.connect-motion{width:40px;height:40px}.cx-protocol{grid-template-columns:minmax(0,1fr) 74px minmax(0,1fr);gap:10px}.cx-protocol-end strong{font-size:.8125rem}.cx-ionea-end>img{width:95px}.cx-photo{max-height:260px;margin-top:15px}.cx-scene-caption{gap:12px;padding:16px 0 22px}.cx-scene-caption strong{font-size:.875rem}.cx-scene-caption div>span{font-size:.8125rem}.cx-visual-foot{font-size:.8125rem;gap:9px}.cx-phase-count{font-size:.75rem}.cx-server-labels{padding:5px 4% 0;font-size:.8755rem}.cx-server-link{padding-inline:3%;gap:12px}.cx-detail{padding:26px 20px}.cx-detail h3{font-size:1.85rem;margin-top:13px}.cx-detail-kicker{font-size:.75rem;letter-spacing:.09em}.cx-steps{grid-template-columns:1fr;gap:4px}.cx-steps>button{flex-direction:row;align-items:center;padding:13px 12px;gap:15px;min-height:73px}.cx-steps small{font-size:.875rem}.cx-step-check{position:static}.connect-section .connect-contact{font-size:.875rem;padding:16px 19px}.cx-guidance{font-size:.8125rem}.cx-wp-header{padding:12px 15px}.cx-plugin{padding:18px}.cx-plugin-logo{width:115px}.cx-plugin h3{font-size:1.25rem}.cx-plugin-category{margin-bottom:13px}.cx-wp-footer{padding:13px 15px;flex-wrap:wrap}.cx-wp-window{transform:none;margin-block:0 10px}.connect-section .cx-plugin>p{margin-bottom:18px}}
@media(prefers-reduced-motion:reduce){.cx-experience *{animation:none!important;transition:none!important}.cx-wp-window{transform:none}}