/* The service story shares Studio's material, type and measured movement. */
.sx-system{--sx-ease:cubic-bezier(.22,1,.36,1);--sx-line:#44394f;--sx-muted:#c0b4ce;position:relative;scroll-margin-top:28px}
.sx-main{min-width:0}.sx-rail-line{display:block;width:1px;height:100px;background:linear-gradient(#786082,transparent);margin:40px 0 26px}.sx-rail-caption{font-size:9px;line-height:1.9;color:#9686a5;letter-spacing:.15em}
.sx-heading{margin-bottom:48px}.sx-heading h2{font-size:clamp(38px,4.3vw,64px);font-weight:550;letter-spacing:-.055em;line-height:1.09;margin:0 0 26px}.sx-heading h2>span{display:block}.sx-heading-accent{color:#c9a8f2}.sx-heading>p{font-size:15px;line-height:1.8;color:var(--sx-muted);max-width:590px;font-weight:350;margin:0}
.sx-tabs{display:none}.sx-enhanced .sx-tabs{display:grid;grid-template-columns:1fr 1fr 1.12fr;border-block:1px solid var(--sx-line)}
.sx-tab{position:relative;display:flex;align-items:center;gap:17px;text-align:left;min-width:0;padding:24px 20px;background:transparent;border:0;border-right:1px solid var(--sx-line);color:var(--sx-muted);cursor:pointer;font:inherit;transition:background 180ms,color 180ms}
.sx-tab:last-child{border-right:0}.sx-tab::after{content:"";position:absolute;inset:auto 0 -1px;height:2px;background:#c6a2ff;transform:scaleX(0);transform-origin:left;transition:transform 450ms var(--sx-ease)}
.sx-tab[aria-selected=true]{color:#fff;background:linear-gradient(110deg,#251337,#100a18)}.sx-tab[aria-selected=true]::after{transform:scaleX(1)}.sx-tab:hover{background-color:#160d20;color:white}.sx-tab:active{background-color:#28183a}
.sx-tab-num{font-size:10px;letter-spacing:.09em;color:#c7a9e9;align-self:flex-start;padding-top:4px}.sx-tab-name{font-size:16px;font-weight:450;letter-spacing:-.015em;min-width:0}.sx-tab-name small{display:block;margin-top:7px;font-size:11px;font-weight:350;color:var(--sx-muted);letter-spacing:0}.sx-tab-arrow{margin-left:auto;font-size:22px;transition:transform 180ms}.sx-tab[aria-selected=true] .sx-tab-arrow{transform:rotate(45deg)}
.sx-panel{display:grid;grid-template-columns:minmax(0,.87fr) minmax(0,1.13fr);gap:42px;align-items:center;padding-top:40px}.sx-panel[hidden]{display:none!important}.sx-panel+.sx-panel{margin-top:50px;border-top:1px solid var(--sx-line)}.sx-enhanced .sx-panel+.sx-panel{margin-top:0;border-top:0}
.sx-copy{padding-block:14px;min-width:0}.sx-panel-kicker{font-size:10px;letter-spacing:.12em;color:#c7a9e9;margin:0 0 28px}.sx-copy h3{font-size:clamp(25px,2.25vw,34px);line-height:1.18;letter-spacing:-.04em;font-weight:500;margin:0 0 23px}.sx-copy h3>span{display:block}.sx-description{font-size:14px;line-height:1.8;font-weight:350;color:var(--sx-muted);margin:0;max-width:380px}.sx-features{list-style:none;margin:26px 0;padding:0}.sx-features li{font-size:12px;color:#e0d6e9;line-height:1.6;border-top:1px solid #332a3c;padding:12px 0;display:flex;align-items:baseline;gap:12px}.sx-features li::before{content:"+";color:#c7a9e9;font-size:14px;font-weight:300}
.sx-detail-link{color:var(--white);font-size:12px;display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-height:44px;text-decoration:none;border-bottom:1px solid #786087;transition:color 150ms}.sx-detail-link:hover{color:#d6adff}.sx-detail-link>span[aria-hidden]{font-size:21px;transition:transform 180ms}.sx-detail-link:hover>span[aria-hidden]{transform:translate(2px,-2px)}
.sx-stage{isolation:isolate;position:relative;min-width:0;padding:23px 28px 18px;background:radial-gradient(ellipse at 95% 55%,#39105a99,transparent 65%),radial-gradient(ellipse at 3% 100%,#1b276480,transparent 68%),#0e0914;border:1px solid var(--sx-line)}
.sx-stage::before{content:"";position:absolute;inset:0;background:url('../img/studio-grain.svg');opacity:.2;pointer-events:none;z-index:-1}.sx-stage-label,.sx-stage-hint{color:#c4b4d5;font-size:9px;letter-spacing:.11em;line-height:1.5}.sx-stage-label{display:flex;justify-content:space-between;gap:15px;margin-bottom:26px}.sx-stage-label>span:last-child{color:#d1b3f4}.sx-stage-hint{font-size:10px;letter-spacing:0;margin-top:20px;min-height:15px}
.sx-browser{border:1px solid #766185;background:#0a060f;box-shadow:0 18px 45px #04010880;transform:none}.sx-browser-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;font-size:8px;letter-spacing:.12em;color:#c7b3d8;border-bottom:1px solid #47384f}.sx-browser-dots{font-size:6px;letter-spacing:3px;color:#9d87b0}
.sx-web-body{position:relative;overflow:hidden;padding:23px 25px 0;isolation:isolate}.sx-web-top{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#c8bdd4;font-size:7px;letter-spacing:.08em}.sx-web-mark{font-size:25px;font-weight:600;letter-spacing:-.07em;color:#f5f2f7}.sx-web-light{position:absolute;z-index:-1;width:68%;height:110%;right:-8%;top:5%;transform:skew(-24deg);background:linear-gradient(90deg,transparent,#4d128670,#3700bdb0,#1d3771a0,transparent);mask-image:linear-gradient(transparent,#000 25%,#000 75%,transparent)}
.sx-web-title{position:relative;font-size:clamp(24px,2.5vw,38px);line-height:1.03;letter-spacing:-.045em;font-weight:550;margin:33px 0 20px}.sx-web-title i{font-style:normal;color:#c4a0fb}.sx-web-caption{font-size:10px;line-height:1.7;max-width:240px;color:#d1c8de;margin:0 0 23px}
.sx-demo-action{display:none;align-items:center;justify-content:space-between;gap:22px;width:100%;padding:14px 17px;background:#f5f2f7;border:1px solid #f5f2f7;border-radius:0;color:#11071c;cursor:pointer;min-height:46px;font-weight:500;line-height:1.4;font-family:inherit;font-size:11px;transition:background 130ms,transform 130ms}
.sx-enhanced .sx-demo-action{display:flex}.sx-demo-action:hover{background:#dac4f7;border-color:#dac4f7}.sx-demo-action:active{transform:translateY(1px)}.sx-demo-action>span[aria-hidden]{font-size:19px;transition:transform 180ms}.sx-demo-action:hover>span[aria-hidden]{transform:translate(2px,-2px)}
.sx-web-baseline{padding:14px 0;margin-top:24px;border-top:1px solid #68517c;font-size:7px;line-height:1.6;letter-spacing:.06em;color:#bba7cd}.sx-stage-hint{visibility:hidden}.sx-enhanced .sx-stage-hint{visibility:visible}
.sx-chat{background:#0c0812;border:1px solid #6b537f;box-shadow:0 18px 45px #04010880}.sx-chat-head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid #47384f}.sx-chat-avatar{width:34px;height:34px;display:grid;place-items:center;background:#342047;color:#e5d0ff;font-size:18px;letter-spacing:-.06em}.sx-chat-head b{font-size:12px;font-weight:450}.sx-chat-head small{display:block;font-size:7px;letter-spacing:.12em;color:#b8a8cb;margin-top:5px}.sx-chat-symbol{font-size:25px;color:#b798d5;margin-left:auto}.sx-chat-body{padding:20px;display:flex;flex-direction:column;gap:13px}.sx-message{font-size:11px;line-height:1.6;color:#e5daef;background:#1d1329;border-left:1px solid #76608c;padding:12px 14px;max-width:90%}.sx-message--client{align-self:flex-end;background:#312045;border-left:0;border-right:1px solid #a986d0}.sx-chat-brief{border-block:1px solid #48354f;padding:12px 0;margin:2px 0}.sx-chat-brief>span{font-size:8px;letter-spacing:.13em;color:#cbaaef}.sx-chat-brief p{font-size:12px;margin:8px 0 0;line-height:1.5}.sx-chat-brief small{display:block;font-size:9px;color:#c0b4ce;font-weight:350;margin-top:4px}
.sx-flow{padding:8px 0 0}.sx-flow-heading{display:flex;justify-content:space-between;gap:12px;font-size:9px;letter-spacing:.1em;color:#d4b8f3;padding-bottom:23px;border-bottom:1px solid #584065}.sx-flow-route{display:flex;align-items:center;padding:24px 0 28px;gap:8px}.sx-flow-node{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:10px;color:#dcd0e8;min-width:56px}.sx-node-symbol{display:grid;place-items:center;width:49px;height:49px;font-size:26px;color:#d2b0f5;border:1px solid #8d6ba4;background:#1e112b}.sx-flow-node--end .sx-node-symbol{color:#09060e;background:#ceb0f3}.sx-route-line{position:relative;flex:1;height:1px;background:#8c6ba7;margin-top:-24px;transform-origin:left}.sx-route-line::after{content:"";position:absolute;right:0;top:-2px;width:5px;height:5px;border-top:1px solid #c7a4e5;border-right:1px solid #c7a4e5;transform:rotate(45deg)}
.sx-lead{border:1px solid #715782;background:#0d0813;box-shadow:0 12px 32px #0005}.sx-lead-heading{padding:17px 18px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.07em;border-bottom:1px solid #48354f;color:#e4d2f4}.sx-lead-heading>span:last-child{color:#bf92eb}.sx-lead dl{margin:0;padding:4px 18px}.sx-lead dl>div{display:grid;grid-template-columns:80px 1fr;gap:10px;padding:13px 0;border-bottom:1px solid #33253f;font-size:11px;line-height:1.5}.sx-lead dl>div:last-child{border:0}.sx-lead dt{color:#b9a8ca}.sx-lead dd{margin:0;color:#ece3f4}.sx-lead-destination{display:flex;align-items:center;gap:14px;padding:14px 18px;background:#251333;border-top:1px solid #48354f;font-size:10px;line-height:1.6;color:#dcc7ef}.sx-lead-destination>span[aria-hidden]{font-size:24px}.sx-flow-note{font-size:10px;line-height:1.7;color:#c0b4ce;margin:18px 0 0}
.sx-outcome{grid-column:1/-1;display:grid;grid-template-columns:120px 1fr 20px;align-items:center;gap:20px;border-block:1px solid var(--sx-line);padding:23px 0;margin-top:-8px}.sx-outcome-label{font-size:9px;letter-spacing:.13em;color:#c7a9e9}.sx-outcome p{font-size:15px;font-weight:400;line-height:1.6;margin:0;color:#f0e8f8}.sx-outcome>span:last-child{color:#c5a3e8;font-size:23px}
.sx-footer{display:flex;justify-content:space-between;align-items:center;gap:32px;margin-top:24px}.sx-footer>p{font-size:11px;font-weight:350;color:var(--sx-muted);max-width:380px;line-height:1.8;margin:0}.sx-footer .sx-detail-link{flex-shrink:0}
.sx-system :is(button,a):focus-visible{outline:2px solid #e1c3ff;outline-offset:5px}
@media(min-width:768px){.sx-enhanced .sx-panels{min-height:630px}.sx-enhanced .sx-panel{min-height:630px}}
@media(max-width:1200px) and (min-width:768px){.sx-panel{gap:26px;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}.sx-stage{padding:19px}.sx-tab{gap:10px;padding:20px 13px}.sx-tab-name{font-size:13px}.sx-tab-arrow{font-size:17px}.sx-copy h3{font-size:26px}.sx-web-body{padding:20px 18px 0}.sx-description{font-size:13px}.sx-features li{font-size:11px}.sx-message{font-size:10px}.sx-chat-body{padding:15px}.sx-outcome{grid-template-columns:85px 1fr 20px;gap:16px}.sx-outcome p{font-size:14px}}
@media(min-width:768px) and (max-width:932px){.sx-system{grid-template-columns:1fr}.sx-system>.section-label{margin-bottom:0}.sx-rail-caption,.sx-rail-line{display:none}.sx-heading h2{font-size:48px}.sx-panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:767px){.sx-system{padding-top:66px;padding-bottom:65px}.sx-rail-line,.sx-rail-caption{display:none}.sx-heading{margin-bottom:30px}.sx-heading h2{font-size:clamp(30px,7.7vw,48px);line-height:1.1;letter-spacing:-.05em;margin-bottom:22px}.sx-heading>p{font-size:13px;line-height:1.8;max-width:420px}.sx-tab{display:block;padding:15px 9px 17px;min-height:97px}.sx-tab-num{display:block;font-size:8px;margin-bottom:11px;padding:0}.sx-tab-name{font-size:clamp(9px,2.5vw,14px);font-weight:500;letter-spacing:-.025em;display:block;white-space:nowrap}.sx-tab-name small{font-size:10px;letter-spacing:0;font-weight:350;margin-top:7px}.sx-tab-arrow{display:none}.sx-panel{display:flex;flex-direction:column;gap:26px;padding-top:25px;align-items:stretch}.sx-copy{padding:0}.sx-panel-kicker{font-size:9px;letter-spacing:.09em;margin:0 0 17px}.sx-copy h3{font-size:clamp(24px,6.5vw,34px);margin-bottom:17px;line-height:1.15;letter-spacing:-.04em}.sx-description{font-size:13px;line-height:1.8;max-width:450px}.sx-features{margin:20px 0 12px}.sx-features li{font-size:11px;padding:10px 0}.sx-detail-link{font-size:12px}.sx-stage{padding:20px;max-width:100%;min-height:0}.sx-stage-label{font-size:8px;margin-bottom:20px}.sx-web-body{padding:20px 20px 0}.sx-web-title{font-size:clamp(27px,7.5vw,44px);margin-top:27px}.sx-web-caption{font-size:10px}.sx-browser-bar{font-size:7px;padding:10px}.sx-web-baseline{font-size:7px}.sx-stage-hint{font-size:10px;line-height:1.65;margin-top:16px;min-height:0}.sx-message{font-size:11px}.sx-chat-body{padding:16px}.sx-chat-head{padding:14px 16px}.sx-chat-brief small{font-size:9px}.sx-flow-route{gap:6px}.sx-flow-node{font-size:9px;min-width:50px}.sx-node-symbol{width:44px;height:44px;font-size:24px}.sx-lead dl>div{grid-template-columns:62px 1fr;font-size:10px;gap:12px}.sx-lead-heading{font-size:9px;padding:15px}.sx-lead dl{padding-inline:15px}.sx-lead-destination{font-size:10px;padding:13px 15px;gap:9px}.sx-outcome{display:grid;grid-template-columns:1fr 20px;gap:10px;margin:0;padding:20px 0}.sx-outcome-label{grid-column:1/-1;font-size:8px}.sx-outcome p{font-size:14px}.sx-footer{display:block;margin-top:20px}.sx-footer>p{font-size:11px;max-width:400px}.sx-footer .sx-detail-link{margin-top:17px}.sx-panel+.sx-panel{margin-top:35px}}
@media(max-width:359px){.sx-tab{padding-inline:7px}.sx-tab-name{font-size:9px}.sx-tab-name small{font-size:9px}.sx-stage{padding:15px}.sx-chat-body{padding:13px}.sx-copy h3{font-size:23px}.sx-web-top>span:last-child{font-size:6px}.sx-web-body{padding-inline:16px}.sx-web-caption{font-size:9px}.sx-stage-label{font-size:7px}.sx-message{font-size:10px}}
@media(prefers-reduced-motion:reduce){.sx-system *, .sx-system *::after{transition:none!important;animation:none!important}}
/* Keep the explanation readable; on phones the example follows its headline. */
.sx-tab-name>span{text-transform:uppercase}
.sx-description{font-size:16px;line-height:1.7}
.sx-system .sx-heading>p{font-size:16px}
.sx-tabs{scroll-margin-top:24px}
@media(max-width:767px){
 .sx-system .sx-heading>p{font-size:15px;line-height:1.7}
 .sx-tab-name{font-size:12px;letter-spacing:-.025em}.sx-tab-name>span{text-transform:none}
 .sx-panel{gap:18px}.sx-copy{display:contents}.sx-copy>.sx-panel-kicker{order:0;margin-bottom:0}.sx-copy>h3{order:1;margin-bottom:3px}.sx-stage{order:2}.sx-copy>.sx-description{order:3;margin-top:4px;font-size:16px;line-height:1.7}.sx-copy>.sx-features{order:4;margin:0}.sx-features li{font-size:13px}.sx-copy>.sx-detail-link{order:5;align-self:flex-start}.sx-outcome{order:6;margin-top:9px}.sx-footer>p{font-size:13px;line-height:1.7}
 .sx-chat-body{padding:16px}.sx-message{font-size:12px}.sx-chat-brief p{font-size:13px}.sx-demo-action{font-size:12px}.sx-stage-hint{font-size:11px}
}
@media(max-width:359px){.sx-tab-name{font-size:11px}.sx-message{font-size:11px}.sx-stage-hint{font-size:10px}}

.sx-stage::before{mix-blend-mode:soft-light;opacity:.38}
@media(min-width:768px){
 .sx-panel{row-gap:0;grid-template-rows:1fr 1fr auto}
 .sx-copy{grid-column:1;grid-row:1;align-self:end;padding:10px 0 0}
 .sx-details{grid-column:1;grid-row:2;align-self:start}
 .sx-stage{grid-column:2;grid-row:1/3}
 .sx-outcome{grid-row:3;margin-top:32px}
}
@media(max-width:767px){
 .sx-copy{display:block;order:0}.sx-copy>.sx-panel-kicker{margin-bottom:17px}.sx-copy>h3{margin-bottom:17px}.sx-copy>.sx-description{margin-top:0}
 .sx-stage{order:1}.sx-details{order:2}.sx-details>.sx-features{margin:0 0 8px}
 .sx-outcome{order:3}
}
/* The website step explains the service without a sample website. */
@media(min-width:768px){
 .sx-enhanced .sx-panels{min-height:0}
 .sx-panel[data-service-panel="website"]{min-height:0;grid-template-rows:auto auto;align-items:start;column-gap:56px}
 [data-service-panel="website"] .sx-copy{align-self:start}
 [data-service-panel="website"] .sx-details{grid-column:2;grid-row:1;align-self:center}
 [data-service-panel="website"] .sx-outcome{grid-row:2}
}