/* ---- frames.css ---- */
/* ==========================================================================
   Device frames for real screenshots + the compositions that stand on the Smartware piece.
   Phone: thin titanium edge, slim bezel, the full screenshot width is always visible.
   Browser: modern window chrome; the screen takes the screenshot's own ratio (min 16:10).
   Screenshots taller than their frame scroll gently on hover.
   ========================================================================== */
.fx-phone{position:relative;aspect-ratio:9/19.5;min-height:0;border-radius:15%/6.9%;background:#08090c;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 0 0 1.5px #8d96a8,0 0 0 2.5px #2a2f39,0 50px 80px -34px rgba(0,0,12,.8)}
.fx-phone::before{content:"";position:absolute;right:-3px;top:24%;width:2px;height:10%;border-radius:2px;background:#9aa3b5}
.fx-phone::after{content:"";position:absolute;left:-3px;top:19%;width:2px;height:6%;border-radius:2px;background:#9aa3b5;box-shadow:0 160% 0 #9aa3b5,0 300% 0 #9aa3b5}
.fx-scr{position:absolute;inset:1.1% 2.4%;border-radius:13.6%/6.3%;overflow:hidden;background:#fff;container-type:inline-size}
.fx-scr>img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.fx-island{position:absolute;z-index:2;left:50%;top:1.6%;width:27%;height:2.9%;transform:translateX(-50%);border-radius:99px;background:#000;pointer-events:none}
.fx-scr:has(.fx-empty) .fx-island{display:none}

.fx-web{position:relative;container-type:inline-size;border-radius:12px;overflow:hidden;background:#0d1236;box-shadow:0 0 0 1px rgba(160,190,255,.26),0 60px 110px -40px rgba(0,0,12,.85)}
.fx-bar{display:flex;align-items:center;height:clamp(14px,4.2cqw,36px);padding:0 clamp(6px,1.6cqw,14px);background:linear-gradient(#1c2359,#131946);border-bottom:1px solid rgba(160,190,255,.14)}
.fx-dots{display:flex;gap:clamp(3px,.7cqw,7px);flex:1}.fx-dots i{width:clamp(5px,1.2cqw,11px);aspect-ratio:1;border-radius:50%;background:#ff5f57}.fx-dots i:nth-child(2){background:#febc2e}.fx-dots i:nth-child(3){background:#28c840}
.fx-url{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-width:36%;max-width:58%;padding:clamp(1px,.5cqw,5px) clamp(6px,1.4cqw,12px);border-radius:clamp(4px,.8cqw,7px);background:rgba(255,255,255,.07);font:500 clamp(7px,1.45cqw,12px)/1.2 var(--f-b);color:#aebdeb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-url svg{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2}
.fx-sp{flex:1}
.fx-shot{position:relative;overflow:hidden;background:#fff;container-type:inline-size}
.fx-shot>img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}

/* tall phone screenshots scroll inside the phone, from the top to exactly the bottom */
.fx-tall{transition:object-position var(--dur,5s) cubic-bezier(.45,0,.4,1)}
@media(hover:hover){.fx-scr:hover>.fx-tall{object-position:50% 100%}}

/* placeholder until a screenshot is added */
.fx-empty{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:5cqw;text-align:center;color:#cfdaff;
  background:radial-gradient(ellipse 70% 50% at 50% 42%,rgba(77,125,255,.38),transparent 70%),#081040 url(../media/images/facets.svg) center/cover}
.fx-empty svg{width:26cqw;height:auto;overflow:visible}
.fx-empty use{fill:rgba(143,176,255,.1);stroke:rgba(175,200,255,.6);stroke-width:7;stroke-dasharray:22 16}
.fx-empty b{font:650 7cqw/1.1 var(--f-d);padding:0 8cqw}
.fx-empty.web svg{width:9cqw}.fx-empty.web{gap:2cqw}.fx-empty.web b{font-size:2.6cqw}

/* ---------- compositions ---------- */
.fx-comp{position:relative;padding-bottom:11%}
/* the piece: lying on the floor under the devices, outlined and glowing like the brand mark */
.fx-podium{position:absolute;z-index:0;left:50%;bottom:-6%;width:74%;height:auto;overflow:visible;transform:translateX(-50%) perspective(1000px) rotateX(62deg);transform-origin:50% 100%;pointer-events:none}
.fx-podium .glow{fill:none;stroke:#3b6bff;stroke-width:60;opacity:.55;filter:blur(26px)}
.fx-podium .fill{fill:url(#fxF)}
.fx-podium .line{fill:none;stroke:#a9c4ff;stroke-width:7;stroke-dasharray:30 16;filter:drop-shadow(0 0 8px #4d7dff)}
.fx-comp::after{content:"";position:absolute;z-index:1;left:24%;right:24%;bottom:9%;height:7%;border-radius:50%;background:radial-gradient(ellipse at 50% 50%,rgba(0,0,10,.5),transparent 70%);pointer-events:none}
/* phones, as in the company profile: the side phones open outward, so most of every screen is visible */
.fx-trio{position:relative;z-index:2;display:grid;place-items:center;perspective:1800px}
.fx-trio>.fx-phone{grid-area:1/1;width:min(29%,280px);transition:transform 1s cubic-bezier(.2,.75,.25,1)}
.fx-trio .t-c{z-index:3;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 0 0 1.5px #8d96a8,0 0 0 2.5px #2a2f39,0 50px 90px -30px rgba(0,0,12,.85),0 0 0 14px rgba(3,5,15,.0)}
.n3 .fx-trio .t-l{z-index:1;transform:translateX(calc(-80% - var(--spread,1) * 6%)) translateY(2%) scale(.92) rotateY(-16deg)}
.n3 .fx-trio .t-r{z-index:2;transform:translateX(calc(80% + var(--spread,1) * 6%)) translateY(2%) scale(.92) rotateY(16deg)}
.n2 .fx-trio .t-c{transform:translateX(-46%)}
.n2 .fx-trio .t-r{z-index:2;transform:translateX(46%) translateY(2%) scale(.94) rotateY(14deg)}
.n1 .fx-trio .t-c{width:min(34%,310px);transform:rotateY(-10deg) rotateX(3deg)}
.fx-comp.is-ph.has-web .fx-backweb{position:absolute;z-index:1;left:4%;right:4%;top:0}
.fx-comp.is-ph.has-web{padding-top:6%}
/* two browser windows, as in the company profile: back one top-left, front one bottom-right, both fully readable */
.fx-duo{position:relative;z-index:2}
.fx-comp.two .fx-duo{padding-top:21%}
.fx-comp.two .d-back{position:absolute;z-index:1;left:0;top:0;width:70%}
.fx-comp.two .d-front{position:relative;z-index:2;margin-left:30%;width:70%;box-shadow:0 0 0 1px rgba(160,190,255,.3),-40px 50px 90px -30px rgba(0,0,12,.9)}
.fx-comp:not(.two) .d-front{width:100%}
.fx-comp .d-phone{position:absolute;z-index:3;right:0;bottom:6%;width:17%}
.fx-comp.sm .fx-trio>.fx-phone{width:min(29%,230px)}
@media(max-width:700px){
  .fx-phone::before,.fx-phone::after{display:none}
  .fx-trio>.fx-phone,.fx-comp.sm .fx-trio>.fx-phone{width:31%}
  .n3 .fx-trio .t-l{transform:translateX(-88%) translateY(2%) scale(.9) rotateY(-14deg)}
  .n3 .fx-trio .t-r{transform:translateX(88%) translateY(2%) scale(.9) rotateY(14deg)}
}

/* ---- product.css ---- */
/* ==========================================================================
   Product pages — "the right piece".
   The page tells one story with the brand's own shape: the product is the piece that fills an organization's gap.
   hero (device rises out of the piece) → spec strip → where it fits (the piece slides into the gap)
   → (anatomy) → capabilities as interlocking pieces → inside the product (live screens) → (journey) → CTA.
   Each page carries its accent in --ac (set on <main>).
   ========================================================================== */
.px{--pz:#0b1450;--ac:#4d7dff}

/* ---------- hero ---------- */
.px-hero{position:relative;overflow:clip;isolation:isolate;color:#e8eeff;padding:calc(var(--nav-h) + clamp(16px,2.6vw,40px)) 0 clamp(36px,4vw,64px);
  background:radial-gradient(ellipse 60% 46% at 50% 72%,color-mix(in srgb,var(--ac) 30%,transparent),transparent 72%),radial-gradient(ellipse 50% 40% at 50% 0,#0b1650,transparent 70%),var(--night)}
.px-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:9%;background:linear-gradient(transparent,var(--night));z-index:3;pointer-events:none}
.px-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.px-bg::before{content:"";position:absolute;inset:0;background:url(../media/images/facets.svg) center/cover;opacity:.32;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 60%,#000,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 60%,#000,transparent 75%)}
.px-head{position:relative;z-index:2;text-align:center}
.px-head .crumbs{justify-content:center}
.px-kick{display:inline-flex;align-items:center;gap:12px;font-size:calc(14px * var(--fs,1));color:#b8c6f0}
.px-kick b{font:650 calc(14px * var(--fs,1))/1 var(--f-d);padding:8px 14px;border-radius:99px;color:#fff;background:color-mix(in srgb,var(--ac) 20%,transparent);border:1px solid color-mix(in srgb,var(--ac) 60%,transparent)}
.px-kick em{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-weight:600;color:#ffd7a3}
.px-kick em .ic{width:15px;height:15px}
.px-name{margin:18px auto 0;max-width:14em;font-size:clamp(44px,min(8.6vw,calc(150vw / var(--len,10))),132px);line-height:.92;letter-spacing:-.055em;text-wrap:balance;background:linear-gradient(180deg,#fff 30%,color-mix(in srgb,var(--ac) 35%,#c9d6ff));-webkit-background-clip:text;background-clip:text;color:transparent}
.px-hook{margin:18px auto 0;max-width:22em;font:620 calc(clamp(21px,2.3vw,34px) * var(--fs,1))/1.12 var(--f-d);letter-spacing:-.03em;color:#dfe6ff;text-wrap:balance}
.px-hook em{font-style:normal;color:color-mix(in srgb,var(--ac) 75%,#fff)}
.px-one{margin:16px auto 0;max-width:36em;font-size:calc(clamp(15px,1.25vw,18.5px) * var(--fs,1));color:#a6b5e6}
.px-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}
.px-acts .btn.g{color:#fff}
.px-stage{position:relative;z-index:2;width:min(1120px,92vw);margin:clamp(40px,5vw,72px) auto 0;perspective:1800px}
.px-stage>*{transform-origin:50% 0;transform:rotateX(calc((1 - var(--t,1)) * 18deg)) scale(calc(.9 + var(--t,1) * .1));transition:transform .15s linear;will-change:transform}
.px-stage.is-lap{width:min(1100px,92vw)}
.px-stage .fx-comp{--spread:var(--t,1)}

/* ---------- spec strip ---------- */
.px-spec{position:relative;z-index:4;background:var(--night);padding:clamp(8px,1vw,16px) 0 clamp(40px,5vw,72px)}
.px-spec dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-radius:22px;border:1px solid var(--line-d);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));overflow:hidden}
.px-spec dl>div{padding:22px 24px}
.px-spec dl>div+div{border-left:1px solid var(--line-d)}
.px-spec dt{font-size:calc(13px * var(--fs,1));color:var(--mute-d);margin-bottom:6px}
.px-spec dd{margin:0;font:650 calc(clamp(17px,1.5vw,22px) * var(--fs,1))/1.15 var(--f-d);letter-spacing:-.025em;color:#fff}
.px-spec .st{display:inline-flex;align-items:center;gap:8px}
.px-spec .st::before{content:"";width:8px;height:8px;border-radius:50%;background:#1fe3c8;box-shadow:0 0 10px #1fe3c8}
.px-spec .st.soon::before{background:#ff9f2e;box-shadow:0 0 10px #ff9f2e}
@media(max-width:760px){.px-spec dl{grid-template-columns:1fr 1fr}.px-spec dl>div:nth-child(odd){border-left:0}.px-spec dl>div:nth-child(n+3){border-top:1px solid var(--line-d)}}

/* ---------- where it fits: the piece slides into the gap ---------- */
.px-fit{position:relative;background:var(--paper);padding-block:clamp(80px,9vw,150px);overflow:clip}
.px-fit-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(30px,6vw,100px);align-items:center}
.fit-copy .tab{color:color-mix(in srgb,var(--ac) 70%,#1439c9)}
.fit-copy h2{margin:16px 0 clamp(26px,3vw,40px);font-size:calc(clamp(30px,3.6vw,54px) * var(--fs,1));line-height:.98;letter-spacing:-.04em;color:var(--ink);text-wrap:balance}
.fit-k{display:inline-flex;align-items:center;gap:8px;font:650 calc(13px * var(--fs,1))/1 var(--f-b);color:var(--mute);margin-bottom:10px}
.fit-k .ic{width:16px;height:16px}
.fit-gap,.fit-pc{position:relative;padding:22px 0 22px 26px;border-left:2px solid var(--line);transition:opacity .5s,border-color .5s}
.fit-gap p{font:550 calc(clamp(18px,1.5vw,22px) * var(--fs,1))/1.38 var(--f-d);letter-spacing:-.015em;color:var(--ink)}
.fit-gap{opacity:calc(1 - var(--p,0) * .55)}
.fit-pc{opacity:calc(.45 + var(--p,0) * .55);border-left-color:color-mix(in srgb,var(--ac) calc(var(--p,0) * 100%),var(--line))}
.fit-pc .fit-k{color:color-mix(in srgb,var(--ac) 70%,#1439c9)}
.fit-lede{font:620 calc(clamp(19px,1.6vw,24px) * var(--fs,1))/1.3 var(--f-d);letter-spacing:-.02em;color:var(--ink)}
.fit-body{margin-top:12px;color:var(--mute);font-size:calc(clamp(15px,1.1vw,17px) * var(--fs,1));max-width:38em}
.fit-proof{display:inline-flex;align-items:center;gap:12px;margin-top:20px;padding:12px 16px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 30px -20px rgba(10,16,60,.5);transition:transform .25s}
.fit-proof:hover{transform:translateY(-2px)}
.fit-proof small{display:block;font-size:calc(12px * var(--fs,1));color:var(--mute)}
.fit-proof b{font:650 calc(18px * var(--fs,1))/1.1 var(--f-d);color:var(--ink)}
.fit-proof .ic{color:var(--ac)}
.fit-stage{position:relative;border-radius:32px;overflow:hidden;isolation:isolate;background:#050b2b;box-shadow:0 60px 120px -50px rgba(10,16,60,.75)}
.fit-stage::before{content:"";position:absolute;inset:0;z-index:-1;background:url(../media/images/facets.svg) center/cover;opacity:.55}
.fit-stage::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--ac) calc(18% + var(--p,0) * 30%),transparent),transparent 62%),linear-gradient(rgba(3,5,15,.3),rgba(3,5,15,.75))}
.fit-svg{display:block;width:100%;height:auto}
.fit-hole{fill:#02040f}
.fit-hole-ln{fill:none;stroke:color-mix(in srgb,var(--ac) 80%,#fff);stroke-width:5;stroke-dasharray:22 16;opacity:calc(1 - var(--p,0) * .9)}
.fit-move{transform-box:view-box;transform-origin:300px 286px;transform:translate(calc((1 - var(--p,0)) * -170px),calc((1 - var(--p,0)) * 150px)) rotate(calc((1 - var(--p,0)) * -26deg)) scale(calc(1 + (1 - var(--p,0)) * .04))}
.fit-glow{fill:none;stroke:var(--ac);stroke-width:30;opacity:calc(.15 + var(--p,0) * .45);filter:blur(18px)}
.fit-tint{fill:var(--ac);mix-blend-mode:color;opacity:.85}
.fit-edge{fill:none;stroke:rgba(220,232,255,.75);stroke-width:4}
.fit-ring{fill:none;stroke:var(--ac);stroke-width:2;opacity:0;transform-origin:300px 286px;transform-box:view-box}
.px-fit.fitted .fit-ring{animation:fitring 1.4s cubic-bezier(.2,.7,.3,1) both}
@keyframes fitring{0%{opacity:.9;transform:scale(.55)}100%{opacity:0;transform:scale(1.15)}}
.fit-cap{position:absolute;left:24px;bottom:20px;font-size:calc(14px * var(--fs,1));color:#b9c6ee;opacity:var(--p,0)}
.fit-cap b{color:#fff}
@media(max-width:900px){.px-fit-grid{grid-template-columns:1fr}.fit-stage{order:-1}}

/* ---------- capabilities: interlocking pieces ---------- */
.px-caps{background:radial-gradient(ellipse 50% 50% at 50% 0,color-mix(in srgb,var(--ac) 18%,transparent),transparent 70%),var(--night);color:#e8eeff;overflow:clip}
.px-caps .tab{color:var(--ac)}
.pz{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pz-it{position:relative;--nl:1;--nt:1;--kr:1;--kb:1}
.pz-b{position:relative;height:100%;padding:clamp(24px,2.4vw,34px) clamp(22px,2.2vw,32px) clamp(26px,2.4vw,34px);border-radius:22px;background:linear-gradient(165deg,color-mix(in srgb,var(--ac) 10%,#0e1a5c),var(--pz) 65%);
  -webkit-mask:radial-gradient(circle calc(var(--nl) * 15px) at 0 50%,#0000 96%,#000) , radial-gradient(circle calc(var(--nt) * 15px) at 50% 0,#0000 96%,#000);-webkit-mask-composite:source-in;
  mask:radial-gradient(circle calc(var(--nl) * 15px) at 0 50%,#0000 96%,#000) , radial-gradient(circle calc(var(--nt) * 15px) at 50% 0,#0000 96%,#000);mask-composite:intersect;transition:background .35s}
.pz-kr,.pz-kb{position:absolute;z-index:2;width:28px;height:28px;border-radius:50%;background:var(--pz);transition:background .35s,transform .4s}
.pz-kr{right:-14px;top:50%;margin-top:-14px;transform:scale(var(--kr))}
.pz-kb{bottom:-14px;left:50%;margin-left:-14px;transform:scale(var(--kb))}
.pz-it:hover{--pz:color-mix(in srgb,var(--ac) 22%,#0b1450)}
.pz-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;margin-bottom:22px;color:#fff;background:radial-gradient(circle at 30% 25%,color-mix(in srgb,var(--ac) 70%,#fff 20%),var(--ac));box-shadow:0 12px 28px -10px var(--ac)}
.pz-ic .ic{width:23px;height:23px;stroke-width:1.8}
.pz h3{font-size:calc(clamp(19px,1.55vw,23px) * var(--fs,1));letter-spacing:-.025em;line-height:1.15;color:#fff}
.pz p{margin-top:10px;color:#b7c4ee;font-size:calc(15px * var(--fs,1));line-height:1.55}
.pz-it:nth-child(3n+1){--nl:0}.pz-it:nth-child(3n){--kr:0}.pz-it:nth-child(-n+3){--nt:0}.pz-it:nth-last-child(-n+3){--kb:0}
.js .pz:not(.is-in) .pz-it{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--dr)) scale(.94)}
.pz-it{transition:opacity .7s,transform 1s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i) * 70ms)}
.pz.is-in .pz-kr,.pz.is-in .pz-kb{animation:snapk 1.1s both;animation-delay:calc(.8s + var(--i) * 70ms)}
@keyframes snapk{35%{box-shadow:0 0 22px 6px color-mix(in srgb,var(--ac) 70%,transparent)}100%{box-shadow:none}}
@media(max-width:1000px){
  .pz{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pz-it{--nl:1;--nt:1;--kr:1;--kb:1}
  .pz-it:nth-child(2n+1){--nl:0}.pz-it:nth-child(2n){--kr:0}.pz-it:nth-child(-n+2){--nt:0}.pz-it:nth-last-child(-n+2){--kb:0}
  .pz-it:nth-child(3n+1),.pz-it:nth-child(3n){--x:0}
}
@media(max-width:640px){
  .pz{grid-template-columns:1fr}
  .pz-it,.pz-it:nth-child(n){--nl:0;--kr:0;--nt:1;--kb:1}
  .pz-it:first-child{--nt:0}.pz-it:last-child{--kb:0}
}

/* ---------- inside the product: real screenshots ---------- */
.pex{background:linear-gradient(var(--night),#050a24 30%);color:#e8eeff;overflow:clip}
.pex .tab{color:var(--ac)}
.pex-phones{display:flex;justify-content:center;align-items:flex-end;gap:clamp(18px,2.6vw,40px);padding:10px 0 20px}
.pex-phones li{flex:0 1 250px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.pex-phones li.main{transform:translateY(-34px)}
.pex-phones .fx-phone{width:100%}
.pex-phones span{font-size:calc(14px * var(--fs,1));font-weight:600;color:#b9c6ee}
.pex-phones+.pex-tabs,.pex-phones+.pex-stage{margin-top:clamp(40px,5vw,72px)}
.pex-tabs{display:flex;gap:6px;width:max-content;max-width:100%;margin:0 auto clamp(26px,3vw,44px);padding:6px;border-radius:99px;border:1px solid var(--line-d);background:rgba(255,255,255,.04);overflow-x:auto;scrollbar-width:none}
.pex-tabs::-webkit-scrollbar{display:none}
.pex-tabs button{position:relative;flex:none;padding:10px 18px;border-radius:99px;border:0;background:none;color:#a9b7e4;font:600 calc(14px * var(--fs,1)) var(--f-b);cursor:pointer;overflow:hidden;transition:color .25s,background .25s}
.pex-tabs button:hover{color:#fff}
.pex-tabs button.on{color:#fff;background:rgba(77,125,255,.28);box-shadow:inset 0 0 0 1px rgba(111,151,255,.6)}
.pex-tabs i{position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;background:var(--ac);transform-origin:0 50%;transform:scaleX(0)}
.pex.play .pex-tabs button.on i{animation:pexp var(--dur,5.5s) linear both}
.pex.hold .pex-tabs button.on i{animation-play-state:paused}
@keyframes pexp{to{transform:scaleX(1)}}
.pex-stage{position:relative;display:grid;max-width:1120px;margin:0 auto}
.pex-scr{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(18px) scale(.985);transition:opacity .55s,transform .7s cubic-bezier(.2,.75,.25,1),visibility .55s}
.pex-scr.on{opacity:1;visibility:visible;transform:none}
.pex-cap{margin-top:16px;text-align:center;font-size:calc(14px * var(--fs,1));color:#9fb0e6}
html:not(.js) .pex-scr{opacity:1;visibility:visible;transform:none;grid-area:auto;margin-bottom:30px}
@media(max-width:700px){
  .pex-phones{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--pad) * -1);padding:10px var(--pad) 20px;scrollbar-width:none}
  .pex-phones::-webkit-scrollbar{display:none}
  .pex-phones li{flex:0 0 62vw;scroll-snap-align:center}
  .pex-phones li.main{transform:none}
}

/* ---------- CTA + next ---------- */
main.px .demo{background:radial-gradient(ellipse 55% 80% at 90% 50%,color-mix(in srgb,var(--ac) 45%,transparent),transparent 70%),linear-gradient(120deg,#0b1a86,#1439c9 55%,#1d4dff)}
.demo-dev{max-width:560px;margin-inline:auto;width:100%}
/* ---------- built for: the people each product serves ---------- */
.px-roles{background:linear-gradient(#050a24,var(--night));color:#e8eeff;overflow:clip}
.px-roles .tab{color:var(--ac)}
.ro-grid{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.ro-card{position:relative;padding:clamp(24px,2.4vw,34px);border-radius:24px;background:linear-gradient(170deg,rgba(255,255,255,.07),rgba(255,255,255,.015));border:1px solid rgba(143,176,255,.18);overflow:hidden}
.ro-card::after{content:"";position:absolute;right:-30px;top:-30px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(77,125,255,.22),transparent 70%)}
.ro-ic{display:grid;place-items:center;width:50px;height:50px;border-radius:16px;margin-bottom:22px;color:#fff;background:radial-gradient(circle at 30% 25%,#8fb0ff,#1d4dff);box-shadow:0 12px 28px -10px #1d4dff}
.ro-ic .ic{width:24px;height:24px;stroke-width:1.8}
.ro-card h3{font-size:calc(clamp(21px,1.8vw,26px) * var(--fs,1));letter-spacing:-.03em;color:#fff}
.ro-card>p{margin-top:8px;color:#b5c3ee;font-size:calc(15px * var(--fs,1))}
.ro-card ul{display:grid;gap:9px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line-d)}
.ro-card li{position:relative;padding-left:18px;font-size:calc(14.5px * var(--fs,1));line-height:1.4;color:#e0e7ff}
.ro-card li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:50%;background:#4d7dff;box-shadow:0 0 8px #4d7dff}
@media(max-width:900px){.ro-grid{grid-template-columns:1fr}}

/* ---------- journey: a real sequence, so it is numbered ---------- */
.pj{background:var(--paper)}
.pj .tab{color:color-mix(in srgb,var(--ac) 70%,#1439c9)}
.pj-track{position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.pj-track::before{content:"";position:absolute;left:24px;right:24px;top:24px;height:2px;background:linear-gradient(90deg,var(--ac),color-mix(in srgb,var(--ac) 25%,transparent))}
.pj-track::after{content:"";position:absolute;top:19px;left:24px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px var(--ac),0 0 16px var(--ac);animation:pjrun 7s cubic-bezier(.5,0,.5,1) infinite}
@keyframes pjrun{0%{left:24px;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:calc(100% - 36px);opacity:0}}
.pj-track li{position:relative;padding-right:8px}
.pj-k{position:relative;z-index:1;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;font:700 calc(18px * var(--fs,1))/1 var(--f-d);color:#fff;background:radial-gradient(circle at 32% 28%,color-mix(in srgb,var(--ac) 70%,#fff 25%),color-mix(in srgb,var(--ac) 80%,#0a1030));box-shadow:0 0 0 6px var(--paper),0 12px 26px -8px color-mix(in srgb,var(--ac) 80%,transparent)}
.pj-track h3{margin-top:22px;font-size:calc(clamp(18px,1.5vw,22px) * var(--fs,1));letter-spacing:-.025em;color:var(--ink)}
.pj-track p{margin-top:8px;color:var(--mute);font-size:calc(15px * var(--fs,1));line-height:1.5}
@media(max-width:900px){
  .pj-track{grid-template-columns:1fr;gap:0}
  .pj-track::before{left:24px;right:auto;top:24px;bottom:24px;width:2px;height:auto;background:linear-gradient(var(--ac),color-mix(in srgb,var(--ac) 25%,transparent))}
  .pj-track::after{display:none}
  .pj-track li{display:grid;grid-template-columns:50px 1fr;column-gap:20px;padding:0 0 26px}
  .pj-k{grid-row:1/3}.pj-track h3{margin-top:12px}
}

html:not(.js) .px-fit{--p:1}

/* ---------- "Built for" on a light background (between the dark capabilities and the dark screens) ---------- */
.px-roles{background:radial-gradient(ellipse 55% 45% at 50% 0,rgba(29,77,255,.08),transparent 70%),var(--paper);color:var(--ink)}
.px-roles .sh h2{color:var(--ink)}.px-roles .sh p{color:var(--mute)}
.px-roles .ro-card{background:#fff;border-color:var(--line);box-shadow:0 30px 60px -45px rgba(10,16,60,.35)}
.px-roles .ro-card::after{background:radial-gradient(circle,rgba(77,125,255,.12),transparent 70%)}
.px-roles .ro-card h3{color:var(--ink)}
.px-roles .ro-card>p{color:var(--mute)}
.px-roles .ro-card ul{border-top-color:var(--line)}
.px-roles .ro-card li{color:var(--ink)}
.px-roles .ro-card li::before{box-shadow:none}