/* ===== Product pages v5 (JumpCloud) ===== */
/* hero: heading starts level with the image */
@media(min-width:1001px){.hero-grid{align-items:start!important}.hero-text.ht-top{padding-top:0!important}.hero-text.ht-top h1{margin-top:-6px}}
.hero-rule{display:none!important}
.cap-note{display:none!important}

/* benefits: bento cards, like the homepage lifecycle grid */
.jb-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.jb-card{grid-column:span 2;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line,#E1DCEF);border-radius:16px;overflow:hidden;transition:transform .3s,box-shadow .3s,border-color .3s}
.jb-card:hover{transform:translateY(-4px);border-color:#CDBDF3;box-shadow:0 22px 50px rgba(64,44,150,.1)}
.jb-card.jb-1{grid-column:span 4}
.jb-card.jb-6{grid-column:span 6;flex-direction:row;align-items:stretch}
.jb-card.jb-6 .jb-copy{flex:0 0 40%;display:flex;flex-direction:column;justify-content:center}
.jb-card.jb-6 .jb-vis{flex:1;margin:12px 12px 12px 0}
.jb-copy{padding:20px 22px 14px}
.jb-num{display:block;font-size:10px;font-weight:750;letter-spacing:.06em;color:#6D55A7}
.jb-num small{font-size:8.5px;letter-spacing:.14em;color:#A99CC2;margin-left:6px;font-weight:700}
.jb-copy h3{margin:10px 0 8px;font-size:20px;font-weight:750;letter-spacing:-.035em;line-height:1.2;color:#12121A}
.jb-copy p{margin:0;font-size:12.5px;line-height:1.65;color:var(--slate,#252A35);max-width:460px}
.jb-vis{position:relative;margin:auto 12px 12px;min-height:180px;border-radius:12px;background:linear-gradient(150deg,#EFEAFE 0%,#DCD2FA 100%);display:flex;align-items:center;justify-content:center;padding:22px;overflow:hidden}
.jb-vis:before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;right:-60px;top:-80px;background:rgba(255,255,255,.35)}
.jb-ui{position:relative;width:100%;max-width:300px;background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.9);border-radius:12px;padding:12px 14px;box-shadow:0 18px 40px -20px rgba(64,44,150,.45);font-size:11px;color:#2A2440}
.jb-ui-h{display:flex;justify-content:space-between;align-items:center;font-weight:750;font-size:11.5px;margin-bottom:8px}
.jb-ui-h span{font-weight:600;font-size:10px;color:#7B5FD0;background:#EFEAFD;border-radius:999px;padding:2px 8px}
.jb-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px solid #F0ECF8}
.jb-row b{font-weight:650;flex:1}
.jb-row em{font-style:normal;color:#8A82A0;font-size:10px}
.jb-ok{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#22B07D;color:#fff;font-size:9px;font-style:normal;flex-shrink:0}
.jb-tg{width:26px;height:15px;border-radius:999px;background:#B9A4FF;position:relative}
.jb-tg:after{content:"";position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#fff}
.jb-center{text-align:center}
.jb-apps{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:6px 0 10px}
.jb-apps i{font-style:normal;font-size:9.5px;font-weight:650;padding:9px 0;border-radius:8px;background:#F4F1FD;color:#5C4A93}
.jb-btn{background:#B9A4FF;color:#1D1830;border-radius:7px;padding:7px 0;font-weight:750;font-size:10.5px}
.jb-bar{display:grid;grid-template-columns:72px 1fr;align-items:center;gap:8px;padding:6px 0}
.jb-bar b{font-weight:650}
.jb-bar span{height:6px;border-radius:999px;background:#EEE9FB;overflow:hidden}
.jb-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#CDBDF7,#8F73E3)}
.jb-step{display:flex;align-items:center;gap:8px;padding:6px 0}
.jb-step b{font-weight:650}
.jb-wait .jb-ok{background:#fff;border:1.5px dashed #B9A4FF}
.jb-dir{position:relative;display:flex;align-items:center;gap:18px;width:100%;justify-content:center}
.jb-srcs{display:flex;flex-direction:column;gap:8px}
.jb-srcs span{background:#fff;border-radius:8px;padding:8px 12px;font-size:11px;font-weight:650;color:#2A2440;box-shadow:0 10px 24px -16px rgba(64,44,150,.5)}
.jb-arrow{width:60px;height:2px;background:repeating-linear-gradient(90deg,#8F73E3 0 6px,transparent 6px 11px);position:relative}
.jb-arrow:after{content:"";position:absolute;right:-2px;top:-4px;border-left:8px solid #8F73E3;border-top:5px solid transparent;border-bottom:5px solid transparent}
.jb-hub{max-width:220px}
@media(max-width:1000px){.jb-grid{grid-template-columns:1fr 1fr}.jb-card,.jb-card.jb-1{grid-column:span 1}.jb-card.jb-6{grid-column:span 2}}
@media(max-width:700px){.jb-grid{grid-template-columns:1fr}.jb-card,.jb-card.jb-1,.jb-card.jb-6{grid-column:span 1}.jb-card.jb-6{flex-direction:column}.jb-card.jb-6 .jb-vis{margin:auto 12px 12px}.jb-dir{flex-direction:column}.jb-arrow{transform:rotate(90deg)}}

/* use cases: three cards side by side */
.story-head{align-items:start!important}
.scenario-list.jc-scen{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;border-top:0}
.jc-scen .scenario{display:flex;flex-direction:column;gap:14px;padding:26px 24px 24px;background:#fff;border:1px solid var(--line,#E1DCEF);border-radius:16px;position:relative;transition:transform .3s,box-shadow .3s,border-color .3s}
.jc-scen .scenario:hover{padding-left:24px;transform:translateY(-4px);border-color:#CDBDF3;box-shadow:0 22px 50px rgba(64,44,150,.1)}
.jc-scen .scenario-index{display:inline-flex;align-items:center;justify-content:center;width:34px;height:24px;border-radius:999px;background:#EFEAFD;color:#6D55A7;font-size:11px}
.jc-scen .scenario h3{font-size:19px;margin:0 0 10px;line-height:1.25}
.jc-scen .scenario p{font-size:13px;line-height:1.7}
.jc-scen .scenario-arrow{position:absolute;top:20px;right:22px;font-size:20px}
@media(max-width:900px){.scenario-list.jc-scen{grid-template-columns:1fr}}

/* implementation heading on one line */
.service-intro{max-width:none!important}
.service-intro h2{white-space:normal;max-width:none!important;font-size:clamp(28px,2.9vw,42px)!important}
.service-intro>p{max-width:1000px!important}

/* FAQ, homepage style */
.hf-section{padding:72px 0!important;background:#fff}
.hf-wrap{--ink:#1f1d2b;--text:#555869;--muted:#8a8c99;--accent:#6d4aff;--line2:#ece9f3;--tint-a:#fff7f2;--tint-b:#f6f3ff;max-width:1200px;margin:0 auto;padding:0 32px;color:var(--ink)}
.hf-wrap *{box-sizing:border-box}
.hf-hero{position:relative;overflow:hidden;padding:56px 24px 64px;border-radius:24px;background:linear-gradient(120deg,var(--tint-a) 0%,#fbf8fb 50%,var(--tint-b) 100%);border:1px solid #f1ecf2;text-align:center}
.hf-shape{position:absolute;pointer-events:none;border:1.5px solid rgba(109,74,255,.10)}
.hf-s1{width:140px;height:140px;left:-36px;bottom:-44px;border-radius:50%}
.hf-s2{width:90px;height:90px;right:8%;top:22px;border-radius:22px;transform:rotate(18deg);border-color:rgba(255,150,110,.16)}
.hf-s3{width:14px;height:14px;left:14%;top:38px;border-radius:50%}
.hf-eyebrow{position:relative;margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.hf-h2{position:relative;margin:0;font-size:clamp(28px,3.2vw,42px)!important;font-weight:700;line-height:1.1;letter-spacing:-.02em}
.hf-sub{position:relative;max-width:560px;margin:14px auto 0;font-size:16px;line-height:1.6;color:var(--text)}
.hf-search{position:relative;display:flex;align-items:center;max-width:560px;margin:28px auto 0;background:#fff;border:1px solid var(--line2);border-radius:12px;box-shadow:0 10px 30px -18px rgba(60,40,120,.25)}
.hf-search:focus-within{border-color:#cdbdf7;box-shadow:0 0 0 4px rgba(109,74,255,.08)}
.hf-search input{flex:1;min-width:0;height:52px;padding:0 18px;border:0;outline:0;background:transparent;font:inherit;font-size:15px;color:var(--ink)}
.hf-search svg{width:20px;height:20px;margin-right:18px;flex-shrink:0}
.hf-body{display:grid;grid-template-columns:260px minmax(0,1fr);gap:48px;align-items:start;margin-top:48px}
.hf-side{position:sticky;top:110px}
.hf-side-label{margin:0 0 14px;padding-left:14px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hf-cats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.hf-cat{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:11px 14px;font:inherit;font-size:15px;color:var(--text);text-align:left;background:transparent;border:0;border-radius:10px;cursor:pointer;transition:background .2s,color .2s}
.hf-cat small{font-size:12px;color:var(--muted)}
.hf-cat:hover{background:#faf8fd;color:var(--ink)}
.hf-cat.on,.hf-cat.on:hover{background:var(--tint-b);color:var(--accent);font-weight:600}
.hf-cat.on small{color:var(--accent)}
.hf-help{margin-top:28px;padding:22px;border-radius:16px;background:linear-gradient(150deg,var(--tint-a) 0%,var(--tint-b) 100%);border:1px solid #f0eaf3}
.hf-help strong{display:block;font-size:16px}
.hf-help p{margin:8px 0 16px;font-size:13.5px;line-height:1.55;color:var(--text)}
.hf-help-btn{display:inline-block;padding:10px 20px;font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;background:#e4dafd;border:1px solid #d6cbfa;border-radius:10px}
.hf-help-btn:hover{background:#d8cbfb}
.hf-main-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.hf-main-label{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hf-expand{padding:4px 0;font:inherit;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);background:none;border:0;cursor:pointer}
.hf-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.hf-item{background:#fff;border:1px solid var(--line2);border-radius:14px;transition:border-color .25s,box-shadow .25s;animation:hfRise .4s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*40ms)}
.hf-item:hover{border-color:#ddd5f3}
.hf-item.open{border-color:#d9cff7;box-shadow:0 16px 36px -28px rgba(80,60,170,.45)}
.hf-q{display:flex;align-items:center;gap:16px;width:100%;padding:18px 22px;font:inherit;text-align:left;color:var(--ink);background:transparent;border:0;cursor:pointer}
.hf-qt{flex:1;min-width:0;font-size:16px;font-weight:600;line-height:1.4}
.hf-tag{display:inline-block;margin-left:10px;padding:2px 8px;font-style:normal;font-size:11px;font-weight:600;color:var(--accent);background:var(--tint-b);border-radius:12px;vertical-align:middle}
.hf-tog{position:relative;flex-shrink:0;width:26px;height:26px;border:1px solid #ddd5f3;border-radius:8px;transition:background .25s,border-color .25s}
.hf-tog:before,.hf-tog:after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.6px;margin:-.8px 0 0 -5px;background:var(--accent);border-radius:1px;transition:transform .25s}
.hf-tog:after{transform:rotate(90deg)}
.hf-item.open .hf-tog{background:var(--tint-b);border-color:#cdbdf7}
.hf-item.open .hf-tog:after{transform:rotate(0)}
.hf-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.hf-a>div{overflow:hidden}
.hf-item.open .hf-a{grid-template-rows:1fr}
.hf-ab{padding:0 22px 20px;font-size:15px;line-height:1.7;color:var(--text)}
.hf-empty{padding:36px;text-align:center;border:1px dashed var(--line2);border-radius:14px;color:var(--text)}
@keyframes hfRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:900px){.hf-body{grid-template-columns:minmax(0,1fr);gap:24px;margin-top:32px}.hf-side{position:static}.hf-side-label{padding-left:0}.hf-cats{flex-direction:row;flex-wrap:wrap;gap:8px}.hf-cat{width:auto;padding:8px 14px;font-size:14px;border:1px solid var(--line2);border-radius:12px}.hf-help{display:none}}
@media(max-width:560px){.hf-wrap{padding:0 16px}.hf-hero{padding:44px 18px 48px;border-radius:18px}.hf-q{padding:16px;gap:12px}.hf-qt{font-size:15px}.hf-ab{padding:0 16px 16px;font-size:14px}.hf-tag{display:none}}

/* footer, homepage style */
.sf{border-top:1px solid #E6E0F2;background:#fff;padding:56px 0 26px;color:#2A2440}
.sf-shell{width:min(calc(100% - 112px),1200px);margin:0 auto}
.sf-top{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:32px}
.sf-logo img{display:block;height:auto}
.sf-brand p{margin:16px 0 0;max-width:240px;font-size:13px;line-height:1.55;color:#6A6480}
.sf-col h4,.sf-news h4{margin:0 0 18px;font-size:11px;letter-spacing:.14em;font-weight:700;color:#8F86A8}
.sf-col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sf-col a{font-size:13.5px;color:#3D3654;text-decoration:none}
.sf-col a:hover{color:#6B4FD8}
.sf-news{max-width:420px;margin-top:40px;padding-top:28px;border-top:1px solid #E6E0F2}
.sf-news h4{font-size:14px;letter-spacing:0;color:#1D1830;margin-bottom:12px}
.sf-news label{display:block;font-size:10.5px;letter-spacing:.14em;font-weight:700;color:#8F86A8;margin-bottom:8px}
.sf-form{display:flex;gap:8px}
.sf-form input{flex:1;min-width:0;height:42px;border:1px solid #D9D2EA;border-radius:6px;padding:0 12px;font:inherit;font-size:13px}
.sf-form input:focus{outline:none;border-color:#8F78DA}
.sf-form button{height:42px;padding:0 20px;border:1.5px solid #1D1830;border-radius:6px;background:#D9CEFB;font:inherit;font-size:13px;font-weight:700;color:#1D1830;cursor:pointer}
.sf-socials{display:flex;gap:8px;margin-top:22px}
.sf-soc{width:32px;height:32px;border:1px solid #D9D2EA;border-radius:7px;display:flex;align-items:center;justify-content:center;color:#3D3654}
.sf-soc svg{width:16px;height:16px}
.sf-soc:hover{border-color:#8F78DA;color:#6B4FD8}
.sf-bottom{display:flex;justify-content:space-between;gap:16px;margin-top:34px;padding-top:18px;border-top:1px solid #E6E0F2;font-size:12px;color:#8F86A8}
.sf-bottom a{color:#6A6480;text-decoration:none}
@media(max-width:900px){.sf-top{grid-template-columns:1fr 1fr}.sf-brand{grid-column:1/-1}.sf-shell{width:calc(100% - 48px)}}
@media(max-width:520px){.sf-top{grid-template-columns:1fr}.sf-bottom{flex-direction:column}}

/* ===== Benefits v2: dark interactive console ===== */
.jx-section{background:radial-gradient(1200px 600px at 85% 0%,#3B2A7A 0%,transparent 60%),radial-gradient(900px 500px at 0% 100%,#2A1F5C 0%,transparent 60%),#120E24!important;color:#fff;overflow:hidden}
.jx-section .section-heading h2{color:#fff}
.jx-section .section-heading p{color:#C9C1E6!important}
.jx{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:stretch}
.jx-tabs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.jx-tab{position:relative;display:grid;grid-template-columns:44px 1fr;gap:14px;width:100%;text-align:left;padding:16px 18px;border-radius:14px;border:1px solid transparent;background:transparent;color:#fff;font:inherit;cursor:pointer;transition:background .3s,border-color .3s}
.jx-tab:hover{background:rgba(255,255,255,.04)}
.jx-tab.on{background:linear-gradient(135deg,rgba(185,164,255,.16),rgba(185,164,255,.05));border-color:rgba(185,164,255,.35);box-shadow:0 20px 50px -30px rgba(160,130,255,.8)}
.jx-n{font-size:12px;font-weight:750;color:#8F7FC4;padding-top:3px;transition:color .3s}
.jx-tab.on .jx-n{color:#CDBDFF}
.jx-tt small{display:block;font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#8F86B3;margin-bottom:4px}
.jx-tt strong{display:block;font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.25;color:#E8E3FA;transition:color .3s}
.jx-tab.on .jx-tt strong{color:#fff}
.jx-desc{display:block;max-height:0;overflow:hidden;font-size:13px;line-height:1.6;color:#BDB4DD;transition:max-height .45s ease,margin .45s ease}
.jx-tab.on .jx-desc{max-height:140px;margin-top:8px}
.jx-prog{position:absolute;left:18px;right:18px;bottom:0;height:2px;border-radius:2px;background:transparent;overflow:hidden}
.jx-tab.on .jx-prog{background:rgba(255,255,255,.08)}
.jx-tab.on .jx-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,#B9A4FF,#F3A6FF);animation:jxProg var(--dur,5s) linear forwards}
.jx.paused .jx-tab.on .jx-prog i{animation-play-state:paused}
@keyframes jxProg{to{width:100%}}

.jx-stage{position:relative;min-height:480px;border-radius:22px;border:1px solid rgba(185,164,255,.22);background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));overflow:hidden;display:flex;align-items:center;justify-content:center;padding:40px 34px}
.jx-gridbg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:34px 34px;mask-image:radial-gradient(circle at 50% 50%,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 30%,transparent 75%)}
.jx-glow{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;animation:jxFloat 9s ease-in-out infinite}
.jx-glow.g1{width:280px;height:280px;background:#8B6CFF;top:-60px;right:-40px}
.jx-glow.g2{width:240px;height:240px;background:#E58BFF;bottom:-80px;left:-50px;animation-delay:-4s;opacity:.35}
@keyframes jxFloat{50%{transform:translate(-20px,24px) scale(1.08)}}
.jx-win{position:relative;z-index:1;width:100%;max-width:470px;border-radius:16px;background:rgba(22,17,44,.72);border:1px solid rgba(255,255,255,.12);box-shadow:0 40px 80px -30px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transform:perspective(1200px) rotateY(-6deg) rotateX(3deg);transition:transform .6s ease}
.jx-stage:hover .jx-win{transform:perspective(1200px) rotateY(0) rotateX(0)}
.jx-chrome{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.jx-chrome span{width:9px;height:9px;border-radius:50%;background:#4A3F75}
.jx-chrome span:nth-child(1){background:#FF7A90}.jx-chrome span:nth-child(2){background:#FFC56B}.jx-chrome span:nth-child(3){background:#6BE3A4}
.jx-chrome small{margin-left:10px;font-size:10.5px;letter-spacing:.08em;color:#9B92C2;text-transform:uppercase}
.jx-chrome b{color:#E4DCFF;font-weight:700}
.jx-panes{position:relative;min-height:300px;padding:22px}
.jx-pane{position:absolute;inset:22px;opacity:0;visibility:hidden;transform:translateY(14px) scale(.98);transition:opacity .45s ease,transform .45s ease,visibility 0s .45s}
.jx-pane.on{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease,transform .45s ease}
.jx-ui{position:relative;background:#fff;border-radius:12px;padding:14px 16px;color:#231D3D;font-size:12px;box-shadow:0 20px 40px -20px rgba(0,0,0,.5)}
.jx-ui-h{display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:750;font-size:13px;margin-bottom:8px}
.jx-pill{font-weight:650;font-size:10px;color:#6D4FD8;background:#EFEAFD;border-radius:999px;padding:3px 9px}
.jx-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid #F0ECF8}
.jx-row b{flex:1;font-weight:650}
.jx-row em{font-style:normal;color:#8A82A0;font-size:10.5px}
.jx-ico{width:24px;height:24px;border-radius:7px;background:#F1ECFE;color:#6D4FD8;display:grid;place-items:center;font-size:12px}
.jx-ok{position:relative;display:inline-block;width:18px;height:18px;border-radius:50%;background:#22B07D;flex-shrink:0}
.jx-ok:after{content:"";position:absolute;left:6px;top:3px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.jx-tg{width:30px;height:17px;border-radius:999px;background:#DCD5EE;position:relative;transition:background .3s}
.jx-tg:after{content:"";position:absolute;left:2px;top:2px;width:13px;height:13px;border-radius:50%;background:#fff;transition:left .3s}
.jx-apps{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:6px 0 12px}
.jx-apps i{font-style:normal;font-size:10.5px;font-weight:650;text-align:center;padding:12px 0;border-radius:9px;background:#F4F1FD;color:#5C4A93}
.jx-cta{text-align:center;background:linear-gradient(90deg,#B9A4FF,#D5A8FF);color:#1D1830;border-radius:8px;padding:9px 0;font-weight:750}
.jx-bar{display:grid;grid-template-columns:84px 1fr 36px;align-items:center;gap:10px;padding:8px 0}
.jx-bar b{font-weight:650}
.jx-bar em{font-style:normal;font-size:10.5px;color:#6D4FD8;font-weight:700;text-align:right}
.jx-bar span{height:7px;border-radius:999px;background:#EEE9FB;overflow:hidden}
.jx-bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#CDBDF7,#7B5CE0)}
.jx-step{display:flex;align-items:center;gap:10px;padding:8px 0}
.jx-step b{font-weight:650}
.jx-dir{display:flex;align-items:center;gap:16px}
.jx-srcs{display:flex;flex-direction:column;gap:9px}
.jx-srcs span{background:#fff;color:#231D3D;border-radius:9px;padding:9px 12px;font-size:11.5px;font-weight:650;white-space:nowrap}
.jx-beam{position:relative;flex:1;height:70px;min-width:40px}
.jx-beam i{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#B9A4FF,transparent);background-size:200% 100%}
.jx-beam i:nth-child(1){top:12px}.jx-beam i:nth-child(2){top:34px}.jx-beam i:nth-child(3){top:56px}
.jx-hub{flex:0 0 170px}
.jx-float{position:absolute;z-index:2;font-size:11px;font-weight:700;color:#1D1830;background:#fff;border-radius:999px;padding:7px 12px;box-shadow:0 14px 30px -12px rgba(0,0,0,.5);opacity:0}
.jx-f1{right:-14px;bottom:-6px}
.jx-f2{left:-10px;bottom:-10px}

/* animations when a pane becomes active */
.jx-pane.on .jx-row,.jx-pane.on .jx-step,.jx-pane.on .jx-bar,.jx-pane.on .jx-srcs span{animation:jxIn .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.15s + var(--d,0)*.12s)}
.jx-pane.on .jx-ok{animation:jxPop .45s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(.45s + var(--d,0)*.12s)}
.jx-pane.on .jx-step .jx-ok{animation-delay:calc(.4s + var(--d,0)*.25s)}
.jx-pane.on .jx-tg{animation:jxTgBg .3s forwards;animation-delay:calc(.5s + var(--d,0)*.2s)}
.jx-pane.on .jx-tg:after{animation:jxTg .3s forwards;animation-delay:calc(.5s + var(--d,0)*.2s)}
.jx-pane.on .jx-bar i{animation:jxFill 1.1s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(.3s + var(--d,0)*.15s)}
.jx-pane.on .jx-apps i{animation:jxApp .4s ease both;animation-delay:calc(.2s + var(--d,0)*.07s)}
.jx-pane.on .jx-float{animation:jxFloatIn .6s cubic-bezier(.3,1.5,.5,1) 1.1s forwards}
.jx-pane.on .jx-beam i{animation:jxBeam 1.6s linear infinite}
.jx-pane.on .jx-beam i:nth-child(2){animation-delay:.3s}.jx-pane.on .jx-beam i:nth-child(3){animation-delay:.6s}
@keyframes jxIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes jxPop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes jxTgBg{to{background:#8F73E3}}
@keyframes jxTg{to{left:15px}}
@keyframes jxFill{to{width:var(--w)}}
@keyframes jxApp{0%{opacity:0;transform:scale(.8)}60%{background:#DCD0FF}100%{opacity:1;transform:none}}
@keyframes jxFloatIn{from{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:none}}
@keyframes jxBeam{from{background-position:100% 0}to{background-position:-100% 0}}
@media(prefers-reduced-motion:reduce){.jx-pane *{animation:none!important}.jx-bar i{width:var(--w)}.jx-tg{background:#8F73E3}.jx-tg:after{left:15px}.jx-float{opacity:1}}
@media(max-width:1000px){.jx{grid-template-columns:1fr}.jx-stage{min-height:420px;order:-1}.jx-win{transform:none}}
@media(max-width:560px){.jx-stage{padding:24px 14px;min-height:400px}.jx-panes{padding:14px}.jx-pane{inset:14px}.jx-dir{flex-direction:column}.jx-beam{height:30px;width:100%}}

/* ===== Benefits v3: lavender theme + seconds timer ===== */
.jx-section{background:radial-gradient(1100px 560px at 90% 0%,#E4DAFF 0%,transparent 60%),radial-gradient(900px 500px at 0% 100%,#EFE6FF 0%,transparent 60%),#F5F2FF!important;color:#12121A}
.jx-section .section-heading h2{color:#12121A}
.jx-section .section-heading p{color:#4A4560!important}
.jx-tab{color:#12121A}
.jx-tab:hover{background:rgba(255,255,255,.55)}
.jx-tab.on{background:#fff;border-color:#DCD0FB;box-shadow:0 24px 50px -30px rgba(109,74,255,.45)}
.jx-n{color:#A99CCB}
.jx-tab.on .jx-n{color:#6D4FD8}
.jx-tt small{color:#9A90B8}
.jx-tt strong{color:#3A3452}
.jx-tab.on .jx-tt strong{color:#12121A}
.jx-desc{color:#5A556E}
.jx-tab.on .jx-prog{background:#EEE9FB}
.jx-tab.on .jx-prog i{background:linear-gradient(90deg,#B9A4FF,#7B5CE0)}
.jx-stage{background:linear-gradient(155deg,#FFFFFF 0%,#EEE7FF 55%,#DED1FF 100%);border-color:#DCD0FB;box-shadow:0 40px 80px -50px rgba(109,74,255,.5)}
.jx-gridbg{background-image:linear-gradient(rgba(109,74,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(109,74,255,.07) 1px,transparent 1px)}
.jx-glow.g1{background:#C7B5FF;opacity:.6}
.jx-glow.g2{background:#F3C6FF;opacity:.5}
.jx-win{background:rgba(255,255,255,.7);border-color:rgba(255,255,255,.9);box-shadow:0 40px 80px -36px rgba(80,55,170,.45),inset 0 1px 0 #fff}
.jx-chrome{border-bottom-color:#ECE6FB}
.jx-chrome small{color:#9A90B8}
.jx-chrome b{color:#4B3A8F}
.jx-ui{box-shadow:0 20px 40px -24px rgba(80,55,170,.45);border:1px solid #EFEAFB}
.jx-srcs span{border:1px solid #EFEAFB;box-shadow:0 10px 24px -16px rgba(80,55,170,.45)}
.jx-float{box-shadow:0 14px 30px -14px rgba(80,55,170,.5);border:1px solid #EFEAFB}
.jx-beam i{background:linear-gradient(90deg,transparent,#8F73E3,transparent);background-size:200% 100%}
/* seconds timer */
.jx-timer{margin-left:auto;display:inline-flex;align-items:center;gap:2px;font-size:11px;font-weight:700;color:#6D4FD8}
.jx-timer svg{width:22px;height:22px;margin-right:5px;transform:rotate(-90deg)}
.jx-timer circle{fill:none;stroke:#E6DEFF;stroke-width:3.5}
.jx-timer .jx-ring{stroke:#7B5CE0;stroke-linecap:round;stroke-dasharray:94.25;stroke-dashoffset:0;transition:stroke-dashoffset .1s linear}
.jx-timer b{min-width:8px;text-align:right}
.jx.paused .jx-timer{opacity:.45}

/* ===== Benefits v4: console fills the whole box, static (no tilt), always auto-plays ===== */
.jx-stage{padding:0!important;align-items:stretch!important;justify-content:stretch!important;min-height:520px}
.jx-win,.jx-stage:hover .jx-win{max-width:none;width:100%;transform:none!important;border-radius:22px;display:flex;flex-direction:column;background:rgba(255,255,255,.55)}
.jx-chrome{padding:16px 22px}
.jx-panes{flex:1;min-height:0;padding:0}
.jx-pane{inset:0;padding:30px 30px 40px;display:flex;flex-direction:column;justify-content:center}
.jx-ui{font-size:13.5px;padding:20px 22px;border-radius:16px}
.jx-ui-h{font-size:15px;margin-bottom:12px}
.jx-pill{font-size:11px}
.jx-row{padding:13px 0}
.jx-row em{font-size:12px}
.jx-ico{width:30px;height:30px;font-size:14px}
.jx-ok{width:22px;height:22px}
.jx-ok:after{left:7.5px;top:4px;width:5px;height:10px}
.jx-tg{width:38px;height:21px}
.jx-tg:after{width:17px;height:17px}
@keyframes jxTg{to{left:19px}}
.jx-apps{gap:10px}
.jx-apps i{font-size:12px;padding:18px 0}
.jx-cta{padding:12px 0;font-size:13px}
.jx-bar{grid-template-columns:110px 1fr 44px;padding:12px 0}
.jx-bar span{height:9px}
.jx-bar em{font-size:12px}
.jx-step{padding:11px 0}
.jx-srcs span{font-size:13px;padding:12px 16px}
.jx-hub{flex:0 0 220px}
.jx-beam{height:110px}
.jx-beam i:nth-child(1){top:18px}.jx-beam i:nth-child(2){top:54px}.jx-beam i:nth-child(3){top:90px}
.jx-float{font-size:12px;padding:9px 14px}
.jx-f1{right:24px;bottom:16px}
.jx-f2{left:24px;bottom:16px}
.jx-timer{font-size:12px}
@media(max-width:560px){.jx-stage{min-height:460px}.jx-pane{padding:18px 16px 46px}.jx-ui{font-size:12px;padding:14px}.jx-bar{grid-template-columns:80px 1fr 36px}.jx-hub{flex:none;width:100%}.jx-beam{height:30px}}

/* ===== Benefits v5: lavender box, timer hidden ===== */
.jx-stage{background:linear-gradient(155deg,#ECE5FF 0%,#E2D8FF 55%,#D6C9FF 100%)!important;border-color:#D3C5FB!important}
.jx-win,.jx-stage:hover .jx-win{background:transparent!important;border-color:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.jx-chrome{border-bottom-color:rgba(109,74,255,.12)!important}
.jx-glow.g1{background:#C2AEFF;opacity:.55}
.jx-glow.g2{background:#E9C2FF;opacity:.45}
.jx-timer{display:none!important}

/* ===== Benefits v6: soft lavender box, no white cards inside ===== */
.jx-stage{background:#EEE8FF!important;border-color:#E0D6FB!important;box-shadow:0 30px 60px -45px rgba(109,74,255,.35)!important}
.jx-glow{display:none!important}
.jx-gridbg{opacity:.5}
.jx-ui,.jx-hub{background:transparent!important;border:0!important;box-shadow:none!important;padding:6px 4px!important}
.jx-row{border-top-color:#DDD2FA!important}
.jx-ico{background:#E2D8FF!important}
.jx-pill{background:#E2D8FF!important}
.jx-apps i{background:#E4DBFF!important}
.jx-bar span{background:#DDD2FA!important}
.jx-srcs span{background:#E4DBFF!important;border:0!important;box-shadow:none!important}
.jx-float{background:#E2D8FF!important;border:0!important;box-shadow:none!important;color:#3A2E6E!important}
.jx-tg{background:#D6CBF5}
.jx-wait .jx-ok,.jx-step .jx-ok{box-shadow:none}
/* v7: no progress line, no black outline on click */
.jx-prog{display:none!important}
.jx-tab:focus{outline:none!important}
.jx-tab:focus-visible{outline:2px solid #B9A4FF!important;outline-offset:2px}

/* ===== v8: hero art + implementation figure ===== */
.art-footer,.hero-micro{display:none!important}
/* ManageEngine hero: keep the inventory row inside the card */
.ops-ui{inset:79px 28px 26px!important;padding-bottom:20px!important}
.ops-tracks{padding:14px 0!important;gap:9px!important}
.ops-foot{padding-top:12px!important}
@media(max-width:760px){.ops-ui{inset:60px 14px 16px!important;padding-bottom:12px!important}}
/* implementation figure: not sticky, centred next to the steps */
.implementation-grid{align-items:center!important}
.implementation-sticky{position:static!important;top:auto!important}
.hp-cta .hp-mark{opacity:1!important;width:min(280px,24vw)!important;right:0!important}

/* ===== v11: rollout roadmap (replaces "How Assetze helps set up…") ===== */
.assetze-service{padding-top:72px!important}
.rm{position:relative;padding:34px 30px 32px;border-radius:24px;background:linear-gradient(160deg,#F3EEFF 0%,#E9E1FF 100%);border:1px solid #E0D6FB;margin-bottom:28px;overflow:hidden}
.rm:before{content:"";position:absolute;width:320px;height:320px;border-radius:50%;right:-90px;top:-140px;background:rgba(255,255,255,.45)}
.rm-line{position:absolute;left:calc(30px + 10%);right:calc(30px + 10%);top:62px;height:2px;background:#D9CDFA;border-radius:2px}
.rm-line i{display:block;height:100%;width:0;border-radius:2px;background:linear-gradient(90deg,#CDBDF7,#9C82EC);transition:width 1.6s cubic-bezier(.2,.7,.2,1)}
.rm.in .rm-line i,.rm:not(.anim) .rm-line i{width:100%}
.rm-steps{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.rm-step{display:flex;flex-direction:column;align-items:center;text-align:center;transition:opacity .6s ease,transform .6s ease;transition-delay:calc(var(--i)*.15s)}
.rm.anim:not(.in) .rm-step{opacity:0;transform:translateY(14px)}
.rm-node{position:relative;z-index:1;width:56px;height:56px;border-radius:18px;background:#B09CE4;color:#fff;display:grid;place-items:center;box-shadow:0 0 0 6px #F1ECFF,0 14px 30px -12px rgba(109,74,255,.55);transition:transform .3s}
.rm-node svg{width:24px;height:24px}
.rm-step:hover .rm-node{transform:translateY(-3px) rotate(-4deg)}
.rm-card{margin-top:18px;padding:16px 14px 18px;border-radius:16px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.8);height:100%;transition:background .3s,transform .3s,box-shadow .3s}
.rm-step:hover .rm-card{background:rgba(255,255,255,.85);transform:translateY(-3px);box-shadow:0 18px 36px -26px rgba(80,55,170,.5)}
.rm-top{display:flex;justify-content:center;align-items:center;gap:8px;margin-bottom:10px}
.rm-num{font-size:11px;font-weight:800;color:#9C82EC;letter-spacing:.06em}
.rm-tag{font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#6D55A7;background:#E4DBFF;border-radius:999px;padding:3px 9px}
.rm-card h3{margin:0 0 8px;font-size:16px;font-weight:750;letter-spacing:-.02em;line-height:1.3;color:#12121A}
.rm-card p{margin:0;font-size:12.5px;line-height:1.6;color:#4A4560}
/* the note under it, lavender */
.service-note{background:#F3EEFF!important;border-color:#E0D6FB!important}
.service-note-symbol{background:#E4DBFF!important;color:#7B5FD0!important}
@media(max-width:1000px){.rm-steps{grid-template-columns:1fr 1fr}.rm-line{display:none}}
@media(max-width:600px){.rm{padding:22px 16px}.rm-steps{grid-template-columns:1fr}.rm-step{flex-direction:row;text-align:left;align-items:flex-start;gap:14px}.rm-card{margin-top:0}.rm-top{justify-content:flex-start}}
@media(prefers-reduced-motion:reduce){.rm-step{opacity:1;transform:none;transition:none}.rm-line i{width:100%;transition:none}}
.rm-node{flex-shrink:0}