/* ROOTKORE — /software/konnect (her mock-up: landing + "Your pricing"; Konnect = Konnect Plus product, Rootkore = official partner) */
:root{--knt:#eef2fd;--knt2:#dde6fd;--knb:#2f63ec;--knbd:#2453d6;--knink:#0f1730;--knmut:#5a6378;--knline:#e6eaf3}
.kn-eb{gap:9px;padding:7px 14px;font-size:12.5px;letter-spacing:.08em;color:var(--knb);background:var(--knt);align-self:flex-start}
.kn-eb em{font-style:normal;font-weight:600;opacity:.85}
.kn-eb>i.dot{width:7px;height:7px;border-radius:50%;background:var(--knb);flex:none}
.kn-eb svg{width:16px;height:16px}
html[dir=rtl] .kn-eb{letter-spacing:0}
.kn-h2{font:700 clamp(28px,3.1vw,42px)/1.12 var(--head);letter-spacing:-.02em;color:var(--knink);margin:0}
html[dir=rtl] .kn-h2{letter-spacing:0;line-height:1.3}
.kn-sub{margin:0;color:var(--knb);font-size:clamp(16px,1.4vw,19px);font-weight:500}
.kn-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 26px;border-radius:12px;background:#fff;border:1px solid #dfe4ee;color:var(--knink);font:600 15.5px var(--font);cursor:pointer;transition:background .25s,border-color .25s,color .25s,transform .25s}
.kn-btn svg{width:19px;height:19px;transition:transform .25s}
.kn-btn:hover{border-color:var(--knb);color:var(--knb);transform:translateY(-2px)}
.kn-btn.pri{background:var(--knb);border-color:var(--knb);color:#fff;box-shadow:0 14px 28px -14px rgba(47,99,236,.75)}
.kn-btn.pri:hover{background:var(--knbd);color:#fff}
.kn-btn.pri:hover .arr{transform:translateX(4px)}
html[dir=rtl] .kn-btn .arr{transform:scaleX(-1)}html[dir=rtl] .kn-btn.pri:hover .arr{transform:translateX(-4px) scaleX(-1)}
.kn-btn.sm{padding:12px 22px;font-size:14.5px}
.kn-btn.wide{width:100%}
.kn-btn.light{background:#fff;border-color:#fff;color:var(--knb);border-radius:99px}
.kn-note{font:600 23px/1.1 Caveat,var(--font);color:#5b5fe0;transform:rotate(-8deg);display:inline-block}
html[dir=rtl] .kn-note{font:600 16px/1.4 var(--font)}

/* hero */
.kn-hero{position:relative;overflow:hidden;padding:56px 0 70px;background:linear-gradient(180deg,#f5f8fe 0%,#f0f4fc 100%)}
.kn-blob.a{position:absolute;width:640px;height:640px;border-radius:50%;right:-120px;top:-160px;background:radial-gradient(circle,var(--knt2) 0,rgba(223,231,253,0) 66%);pointer-events:none}
.kn-ball{position:absolute;width:58px;height:58px;border-radius:50%;right:3%;top:26px;background:radial-gradient(circle at 35% 35%,#ffb3c4,#f0789a);opacity:.8;animation:knFloat 7s ease-in-out infinite}
html[dir=rtl] .kn-blob.a{right:auto;left:-120px}html[dir=rtl] .kn-ball{right:auto;left:5%}
.kn-hero-in{position:relative;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:44px;align-items:center}
.kn-txt{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.kn-h1{font:700 clamp(36px,4.6vw,62px)/1.06 var(--head);letter-spacing:-.03em;color:var(--knink);margin:4px 0 0}
html[dir=rtl] .kn-h1{letter-spacing:0;line-height:1.28}
.kn-h1 span,.kn-h1 em{display:block}.kn-h1 em{font-style:normal;color:var(--knb)}
.kn-lead{margin:0;font-size:clamp(15.5px,1.3vw,18px);line-height:1.62;color:var(--knmut);max-width:54ch}
.kn-acts{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px}
.kn-feats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;width:100%;max-width:600px;margin-top:14px}
.kn-feats a{display:flex;flex-direction:column;gap:10px;color:var(--knink)}
.kn-feats span{width:48px;height:48px;border-radius:13px;background:#fff;border:1px solid var(--knline);color:var(--knb);display:grid;place-items:center;box-shadow:0 10px 22px -16px rgba(31,45,110,.5);transition:transform .35s cubic-bezier(.2,.8,.2,1.5),background .3s,color .3s}
.kn-feats a:hover span{transform:translateY(-4px) rotate(-6deg);background:var(--knb);color:#fff}
.kn-feats span svg{width:23px;height:23px}
.kn-feats b{font:700 14.5px/1.3 var(--head)}
.kn-art{position:relative;padding:30px 150px 104px 0}
html[dir=rtl] .kn-art{padding:30px 0 104px 150px}
/* the morphing device: sizes are in container units of the stage, so width/height/radius animate smoothly */
.kn-stage{position:relative;container-type:inline-size;aspect-ratio:16/11.4}
.kn-stage:before{content:"";position:absolute;left:50%;top:46%;width:92cqw;height:92cqw;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,var(--knt2) 0,var(--knt2) 46%,rgba(233,239,253,0) 70%);z-index:0}
.kn-stage:after{content:"";position:absolute;right:-2cqw;top:-2cqw;width:22cqw;height:22cqw;background:radial-gradient(circle,#c3cff0 1.6px,transparent 2px) 0 0/13px 13px;opacity:.8;z-index:0}
html[dir=rtl] .kn-stage:after{right:auto;left:-2cqw}
.kn-dev{--bz:10px;position:absolute;z-index:1;left:50%;top:46%;width:100cqw;height:57cqw;transform:translate(-50%,-50%);background:#0d1430;border-radius:18px;padding:var(--bz);cursor:pointer;
  box-shadow:0 50px 80px -40px rgba(13,20,48,.6),0 18px 40px -24px rgba(47,99,236,.35);
  transition:width .8s cubic-bezier(.7,0,.2,1),height .8s cubic-bezier(.7,0,.2,1),border-radius .8s cubic-bezier(.7,0,.2,1),padding .8s,top .8s cubic-bezier(.7,0,.2,1)}
.kn-dev[data-mode=phone]{--bz:9px;width:31cqw;height:66cqw;border-radius:40px;top:49%}
.kn-dev[data-mode=pc]{--bz:12px;width:86cqw;height:51cqw;border-radius:14px;top:41%}
.kn-scr{position:relative;width:100%;height:100%;overflow:hidden;border-radius:10px;background:#111a3a;transition:border-radius .8s}
.kn-dev[data-mode=phone] .kn-scr{border-radius:32px}
.kn-layer{position:absolute;inset:0;opacity:0;transition:opacity .45s ease .25s}
.kn-layer.on{opacity:1}
.kn-layer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;opacity:0;transition:opacity .9s ease;transform:scale(1.02)}
.kn-layer img.on{opacity:1}
.kn-layer[data-layer=me] img,.kn-layer[data-layer=pulse] img{object-position:top left}
.kn-layer[data-layer=pulse] img{object-position:center}
.kn-notch{position:absolute;z-index:3;top:calc(var(--bz) + 8px);left:50%;width:30%;height:16px;margin-left:-15%;border-radius:10px;background:#0d1430;opacity:0;transition:opacity .3s}
.kn-dev[data-mode=phone] .kn-notch{opacity:1;transition-delay:.55s}
.kn-live{position:absolute;top:12px;inset-inline-start:12px;z-index:4;--c:#448DF2}
.kn-dev[data-mode=phone] .kn-live{top:auto;bottom:14px;inset-inline-start:50%;transform:translateX(-50%)}
html[dir=rtl] .kn-dev[data-mode=phone] .kn-live{transform:translateX(50%)}
/* stand: TV = two small feet, PC = neck + base */
.kn-stand{position:absolute;left:50%;top:100%;width:0;height:0;pointer-events:none}
.kn-stand i{position:absolute;display:block;background:#1b2550;opacity:0;transition:opacity .35s,width .6s,height .6s,left .6s}
.kn-dev[data-mode=tv] .kn-stand i{opacity:1;transition-delay:.5s;width:6px;height:16px;top:0;border-radius:0 0 3px 3px}
.kn-dev[data-mode=tv] .kn-stand i:first-child{left:-28cqw;transform:skewX(14deg)}
.kn-dev[data-mode=tv] .kn-stand i:last-child{left:28cqw;transform:skewX(-14deg)}
.kn-dev[data-mode=pc] .kn-stand i{opacity:1;transition-delay:.5s}
.kn-dev[data-mode=pc] .kn-stand i:first-child{left:-24px;width:48px;height:36px;top:0;background:linear-gradient(#1b2550,#2a3566);clip-path:polygon(18% 0,82% 0,100% 100%,0 100%)}
.kn-dev[data-mode=pc] .kn-stand i:last-child{left:-80px;width:160px;height:9px;top:36px;border-radius:6px;background:#2a3566}
.kn-cap{position:absolute;z-index:1;left:0;right:0;bottom:-2px;text-align:center;font-size:13px;font-weight:600;color:#6b7690;transition:opacity .3s}
.kn-cap.swap{opacity:0}
/* the product card (was the phone) */
.kn-pick{position:absolute;z-index:3;right:0;top:50%;transform:translateY(-58%);width:220px;background:#fff;border-radius:22px;padding:22px 16px 16px;box-shadow:0 30px 60px -28px rgba(31,45,110,.45),0 2px 6px rgba(16,24,40,.05)}
html[dir=rtl] .kn-pick{right:auto;left:0}
.kn-pick>img{display:block;width:130px;height:auto;margin:0 auto 6px}
.kn-pick>small{display:block;text-align:center;font-size:12px;color:#7a8399;margin-bottom:12px}
.kn-picks{display:grid;gap:6px}
.kn-picks button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:12px;border:1px solid transparent;background:none;font:600 13.5px var(--font);color:var(--knink);cursor:pointer;text-align:start;transition:background .25s,border-color .25s,color .25s}
.kn-picks button>span{width:30px;height:30px;border-radius:9px;background:var(--knt);color:var(--knb);display:grid;place-items:center;flex:none;transition:background .25s,color .25s}
.kn-picks button>span svg{width:16px;height:16px}
.kn-picks button bdi{flex:1}
.kn-picks .dv{width:15px;height:15px;color:#b3bbd0;transition:color .25s}
.kn-picks button:hover{background:var(--knt)}
.kn-picks button.on{background:var(--knt);border-color:var(--knt2);color:var(--knb)}
.kn-picks button.on>span{background:var(--knb);color:#fff}
.kn-picks button.on .dv{color:var(--knb)}
.kn-auto{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:10px;font-size:11.5px;font-weight:600;color:#7a8399}
.kn-auto i{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.5);animation:knPulse 1.8s infinite}
.kn-pick.held .kn-auto{opacity:.0}
@keyframes knPulse{70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.kn-foot{position:absolute;z-index:4;right:auto;left:4%;bottom:6px;display:flex;align-items:center;gap:14px;background:#fff;border-radius:16px;padding:14px 16px 14px 18px;min-width:270px;color:var(--knink);box-shadow:0 26px 50px -24px rgba(31,45,110,.45),0 2px 6px rgba(16,24,40,.05);transition:transform .3s}
html[dir=rtl] .kn-foot{left:auto;right:4%}
.kn-foot:hover{transform:translateY(-3px)}
.kn-foot .w{width:38px;height:38px;border-radius:11px;background:var(--knt);color:var(--knb);display:grid;place-items:center}.kn-foot .w svg{width:20px;height:20px}
.kn-foot b{display:block;font-size:13.5px}.kn-foot small{display:block;font-size:12.5px;color:#6b7690}
.kn-foot .go{margin-inline-start:auto;width:32px;height:32px;border-radius:50%;border:1.6px solid var(--knb);color:var(--knb);display:grid;place-items:center}
.kn-foot .go svg{width:16px;height:16px}html[dir=rtl] .kn-foot .go svg{transform:scaleX(-1)}

/* partner card — the partnership, big and clear */
.kn-partner{padding:0 0 10px;margin-top:-34px;position:relative;z-index:2}
.kn-pcard{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:34px;align-items:center;background:#fff;border:1px solid var(--knline);border-radius:24px;padding:26px 32px;box-shadow:0 30px 60px -36px rgba(31,45,110,.4)}
.kn-plogos{display:flex;align-items:center;gap:14px}
.kn-plogos .t{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 16px;border:1px solid var(--knline);border-radius:16px;background:#fafbff;min-width:150px}
.kn-plogos .t img{height:30px;width:auto}
.kn-plogos .t small{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--knb)}
html[dir=rtl] .kn-plogos .t small{letter-spacing:0}
.kn-plogos .hs{width:46px;height:46px;border-radius:50%;background:var(--knb);color:#fff;display:grid;place-items:center;box-shadow:0 12px 24px -12px rgba(47,99,236,.8);flex:none}
.kn-plogos .hs svg{width:22px;height:22px}
.kn-ptxt b{display:block;font:700 19px/1.35 var(--head);color:var(--knink)}
.kn-ptxt p{margin:6px 0 10px;color:var(--knmut);font-size:14.5px;line-height:1.55}
.kn-proles{display:flex;flex-wrap:wrap;gap:8px}
.kn-proles span{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:99px;background:var(--knt);color:var(--knb);font-size:12.5px;font-weight:600}
.kn-proles svg{width:14px;height:14px}
.kn-plink{display:inline-flex;align-items:center;gap:8px;color:var(--knb);font-weight:600;font-size:14.5px;white-space:nowrap}
.kn-plink svg{width:17px;height:17px}html[dir=rtl] .kn-plink .arr{transform:scaleX(-1)}

/* ecosystem */
.kn-eco-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);gap:44px;align-items:center}
.kn-eco-txt{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.kn-eco-txt>p:not(.kn-sub){margin:4px 0 0;color:var(--knmut);font-size:15px;line-height:1.6}
.kn-tabs{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:14px;border-bottom:1px solid var(--knline);width:100%}
.kn-tabs button{background:none;border:0;padding:10px 0;font:600 14px var(--font);color:#7a8399;cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-1px;transition:color .25s,border-color .25s}
.kn-tabs button.on{color:var(--knb);border-color:var(--knb)}
.kn-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.kn-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:20px 18px 18px;border-radius:18px;background:#fff;border:1.5px solid var(--knline);color:var(--knink);min-height:270px;transition:border-color .3s,transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.kn-card .ic{width:46px;height:46px;border-radius:13px;background:var(--knt);color:var(--knb);display:grid;place-items:center;transition:background .3s,color .3s}
.kn-card .ic svg{width:23px;height:23px}
.kn-card b{font:700 17px/1.25 var(--head)}
.kn-card p{margin:0;font-size:13px;line-height:1.5;color:var(--knmut);flex:1}
.kn-card small{font-size:12px;font-weight:600;color:var(--knb)}
.kn-card .go{width:30px;height:30px;border-radius:50%;background:var(--knt);color:var(--knb);display:grid;place-items:center}
.kn-card .go svg{width:15px;height:15px}html[dir=rtl] .kn-card .go svg{transform:scaleX(-1)}
.kn-card.on,.kn-card:hover{border-color:var(--knb);transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(47,99,236,.55)}
.kn-card.on .ic{background:var(--knb);color:#fff}

/* smart hospitality */
.kn-smart{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:44px;align-items:center;padding:30px;border-radius:26px;background:linear-gradient(120deg,#f2f6ff,var(--knt2));border:1px solid #dfe6fa}
.kn-ring{position:absolute;width:150px;height:150px;border-radius:50%;right:-30px;top:-20px;background:radial-gradient(circle at 35% 35%,#c9d7fb,#a9bdf6);opacity:.55}
html[dir=rtl] .kn-ring{right:auto;left:-30px}
.kn-smart-art{position:relative;padding:0 70px 24px 0}
html[dir=rtl] .kn-smart-art{padding:0 0 24px 70px}
.kn-room{border-radius:18px;overflow:hidden;background:#0d1430;padding:8px;box-shadow:0 34px 60px -34px rgba(13,20,48,.55)}
.kn-room{aspect-ratio:16/10}.kn-room img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:top;border-radius:12px}
.kn-mphone{position:absolute;right:0;bottom:-6px;width:27%;aspect-ratio:9/19.2;background:#0b0f1c;border-radius:28px;padding:6px;box-shadow:0 30px 50px -24px rgba(13,20,48,.6)}
.kn-mphone .notch{position:absolute;z-index:2;top:12px;left:50%;width:34%;height:10px;margin-left:-17%;border-radius:8px;background:#0b0f1c}
html[dir=rtl] .kn-mphone{right:auto;left:0}
.kn-mphone img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:top center;border-radius:22px;display:block}
/* TV behind the phone: hero TV frame, the screen is mapped into it like .kx .kn-dev[data-mode=tv] .kn-scr */
/* front-facing TV (CSS): thin bezel, 16:9 glass, two angled feet */
.kn-tvbox{position:relative;padding-bottom:7%;filter:drop-shadow(0 34px 30px rgba(13,20,48,.22))}
.kn-tvbox .scr{position:relative;z-index:2;aspect-ratio:16/9;overflow:hidden;background:#05070f;border:solid #0b0f1c;border-width:7px 7px 10px;border-radius:9px;box-shadow:0 0 0 1px #3a4152,inset 0 0 0 1px #1c2232}
.kn-tvbox .scr:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.08) 0,rgba(255,255,255,0) 38%)}
.kn-tvbox .scr img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center}
/* legs start under the bottom bezel and splay out to a flat pad; LED in the chin */
.kn-tvbox .feet{position:relative;display:block;height:0}
.kn-tvbox .feet svg{position:absolute;z-index:1;top:-3px;width:9.5%;height:auto;aspect-ratio:44/30;fill:#141a2b;overflow:visible}
.kn-tvbox .feet svg path{fill:#1a2032}
.kn-tvbox .feet .l{left:9%}
.kn-tvbox .feet .r{right:9%;transform:scaleX(-1)}
.kn-tvbox .feet .led{position:absolute;z-index:3;left:50%;top:-6px;width:5px;height:2px;margin-left:-2.5px;border-radius:2px;background:#e8463c;box-shadow:0 0 4px rgba(232,70,60,.8)}
.kn-smart-art:has(.kn-tvbox),html[dir=rtl] .kn-smart-art:has(.kn-tvbox){padding-inline-end:110px;padding-top:16px}
.kn-smart-art:has(.kn-tvbox) .kn-mphone{width:24%;bottom:-14px}
@media (max-width:760px){.kn-smart-art:has(.kn-tvbox),html[dir=rtl] .kn-smart-art:has(.kn-tvbox){padding-inline-end:56px;padding-top:6px}.kn-smart-art:has(.kn-tvbox) .kn-mphone{width:27%}}
.kn-smart-txt{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.kn-smart-txt>p{margin:0;color:var(--knmut);font-size:15.5px;line-height:1.6}
.kn-smart-txt ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.kn-smart-txt li{display:flex;align-items:center;gap:10px;font-size:15px;color:#2b3550;font-weight:500}
.kn-smart-txt li svg{width:20px;height:20px;color:#fff;fill:var(--knb);stroke:#fff}
.kn-smart-txt .kn-note{position:absolute;right:0;bottom:-6px}
html[dir=rtl] .kn-smart-txt .kn-note{right:auto;left:0}

/* stats */
.kn-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#fff;border:1px solid var(--knline);border-radius:22px;padding:22px 10px;box-shadow:0 20px 44px -34px rgba(31,45,110,.35)}
.kn-stats>div{display:flex;align-items:center;gap:16px;padding:6px 24px;position:relative}
.kn-stats>div+div:before{content:"";position:absolute;inset-inline-start:0;top:12%;bottom:12%;width:1px;background:var(--knline)}
.kn-stats span{width:50px;height:50px;border-radius:14px;background:var(--knt);color:var(--knb);display:grid;place-items:center;flex:none}
.kn-stats span svg{width:24px;height:24px}
.kn-stats p{margin:0;display:flex;flex-direction:column}
.kn-stats b{font:700 26px/1.1 var(--head);color:var(--knink)}
.kn-stats small{font-size:13.5px;color:#6b7690}

/* integration */
.kn-int-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:44px;align-items:center}
.kn-int-txt{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.kn-int-txt .kn-h2 span{display:block}
.kn-int-txt>p{margin:0;color:var(--knmut);font-size:15.5px;line-height:1.6}
.kn-int-txt .kn-note{margin:6px 0 0 120px}
html[dir=rtl] .kn-int-txt .kn-note{margin:6px 120px 0 0}
.kn-int-art{position:relative;padding:0 0 70px;min-height:0}
.kn-w{border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--knline);box-shadow:0 34px 64px -34px rgba(31,45,110,.5)}
.kn-w .bar{display:flex;gap:6px;padding:9px 12px;background:#fff;border-bottom:1px solid #eef1f6}
.kn-w .bar i{width:8px;height:8px;border-radius:50%;background:#ff8d8d}.kn-w .bar i:nth-child(2){background:#ffd47a}.kn-w .bar i:nth-child(3){background:#7ddc9c}
.kn-w .bar span{margin-inline-start:8px;font-size:11px;color:#8a93a8;direction:ltr}
.kn-w .shot{position:relative;aspect-ratio:16/10;overflow:hidden;background:#f3f5fb}
.kn-w .shot img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:top left;display:block}
.kn-w.a{width:76%}
.kn-w.b{position:absolute;width:52%;right:0;bottom:0;box-shadow:0 40px 70px -30px rgba(31,45,110,.55)}
html[dir=rtl] .kn-w.b{right:auto;left:0}

/* pricing (no prices: custom quote) */
.kn-price{position:relative;overflow:hidden;background:linear-gradient(180deg,#f7f9fe,#f3f6fc)}
.kn-ring2{position:absolute;width:420px;height:420px;border-radius:50%;border:70px solid #e6ecfb;right:-180px;top:-200px;pointer-events:none}
html[dir=rtl] .kn-ring2{right:auto;left:-180px}
.kn-phead{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:30px}
.kn-pgrid{position:relative;display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:22px;align-items:start}
.kn-lines{background:#fff;border:1px solid var(--knline);border-radius:22px;padding:10px 26px 18px;box-shadow:0 24px 50px -36px rgba(31,45,110,.35)}
.kn-line{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:20px;align-items:center;padding:18px 0;border-bottom:1px solid #eef1f6}
.kn-line .ic{width:50px;height:50px;border-radius:14px;background:var(--knt);color:var(--knb);display:grid;place-items:center}
.kn-line .ic svg{width:23px;height:23px}
.kn-line b{display:block;font:700 16.5px var(--head);color:var(--knink)}
.kn-line p{margin:4px 0 0;font-size:13.5px;line-height:1.5;color:var(--knmut);max-width:54ch}
.kn-line em{font-style:normal;font-weight:700;font-size:15px;color:var(--knb);padding-inline-start:24px;border-inline-start:1px solid var(--knline);white-space:nowrap;align-self:stretch;display:flex;align-items:center}
.kn-pnote{display:flex;align-items:center;gap:10px;margin-top:14px;padding:12px 16px;border-radius:12px;background:var(--knt);font-size:13px;color:var(--knmut)}
.kn-pnote svg{width:18px;height:18px;color:#fff;fill:var(--knb);stroke:#fff;flex:none}
.kn-sum{position:sticky;top:96px;display:flex;flex-direction:column;gap:14px;background:#fff;border:1px solid var(--knline);border-radius:22px;padding:22px;box-shadow:0 24px 50px -36px rgba(31,45,110,.35)}
.kn-sumh{display:flex;gap:14px;align-items:center;padding-bottom:14px;border-bottom:1px solid #eef1f6}
.kn-sumh .ic{width:50px;height:50px;border-radius:14px;background:var(--knt);color:var(--knb);display:grid;place-items:center;flex:none}
.kn-sumh .ic svg{width:23px;height:23px}
.kn-sumh b{display:block;font:700 20px var(--head);color:var(--knink)}
.kn-sumh small{color:var(--knmut);font-size:13.5px}
.kn-kv{list-style:none;margin:0;padding:0}
.kn-kv li{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid #f0f2f7;font-size:14.5px;color:#2b3550}
.kn-kv li svg{width:20px;height:20px;color:var(--knb)}
.kn-kv li b{margin-inline-start:auto;font-weight:700;color:var(--knink)}
.kn-total{display:flex;gap:12px;align-items:flex-start;padding:16px;border-radius:14px;background:var(--knt)}
.kn-total svg{width:20px;height:20px;color:var(--knb);margin-top:2px}
.kn-total small{display:block;font-size:13px;font-weight:700;color:var(--knb)}
.kn-total b{font:700 21px var(--head);color:var(--knink)}
.kn-lbl{font-size:13px;font-weight:600;color:#3a4460;margin-bottom:-6px}
.kn-bill{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:12px;border:1px solid var(--knline);background:#fff}
.kn-bill button{border:0;background:none;padding:10px;border-radius:9px;font:600 14px var(--font);color:#3a4460;cursor:pointer;transition:background .25s,color .25s}
.kn-bill button.on{background:var(--knb);color:#fff}
.kn-by{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;color:#7a8399;font-size:12px;padding-top:4px}
.kn-by img{height:20px;width:auto}
.kn-trust{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:34px}
.kn-trust>div{display:flex;gap:16px;align-items:flex-start;padding:4px 26px;position:relative}
.kn-trust>div+div:before{content:"";position:absolute;inset-inline-start:0;top:10%;bottom:10%;width:1px;background:var(--knline)}
.kn-trust span{width:50px;height:50px;border-radius:14px;background:var(--knt);color:var(--knb);display:grid;place-items:center;flex:none}
.kn-trust span svg{width:23px;height:23px}
.kn-trust p{margin:0;display:flex;flex-direction:column;gap:4px}
.kn-trust b{font:700 15.5px var(--head);color:var(--knink)}
.kn-trust small{font-size:13.5px;color:var(--knmut);line-height:1.5}

/* final CTA */
.kn-cta{position:relative;overflow:hidden;display:flex;align-items:center;gap:30px;flex-wrap:wrap;padding:30px 40px;border-radius:24px;background:linear-gradient(110deg,#1e3a9e 0%,#2f55d4 55%,#3f6df0 100%);color:#fff;box-shadow:0 30px 60px -34px rgba(30,58,158,.7)}
.kn-cta-ring{position:absolute;width:300px;height:300px;border-radius:50%;border:50px solid rgba(255,255,255,.07);right:-80px;top:-140px}
.kn-cta-logos{display:flex;align-items:center;gap:14px}
.kn-cta-logos img{height:30px;width:auto;filter:brightness(0) invert(1)}
.kn-cta-logos span{font-size:22px;opacity:.7}
.kn-cta-txt{flex:1;min-width:240px;display:flex;flex-direction:column;gap:4px;text-align:center}
.kn-cta-txt b{font:700 21px var(--head)}
.kn-cta-txt span{font-size:14.5px;opacity:.85}

/* motion */
@keyframes knUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes knTv{from{opacity:0;transform:perspective(1600px) rotateY(-30deg) translateX(60px) scale(.94)}to{opacity:1}}
@keyframes knPh{from{opacity:0;transform:translateY(60px) rotate(5deg)}to{opacity:1;transform:none}}
@keyframes knPick{from{opacity:0;transform:translate(30px,-58%)}to{opacity:1;transform:translateY(-58%)}}
@keyframes knFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.kn-txt>*{animation:knUp .7s cubic-bezier(.2,.8,.2,1) both}
.kn-txt>:nth-child(2){animation-delay:.08s}.kn-txt>:nth-child(3){animation-delay:.16s}.kn-txt>:nth-child(4){animation-delay:.24s}.kn-txt>:nth-child(5){animation-delay:.34s}
.kn-stage{animation:knUp 1s .15s cubic-bezier(.2,.8,.2,1) both}
.kn-pick{animation:knPick .9s .5s cubic-bezier(.2,.8,.2,1) both}
.kn-foot{animation:knUp .8s .85s cubic-bezier(.2,.8,.2,1) both}
.kn-pcard{animation:knUp .8s .4s cubic-bezier(.2,.8,.2,1) both}

@media (max-width:1180px){
  .kn-hero-in,.kn-eco-in,.kn-int-in,.kn-smart{grid-template-columns:minmax(0,1fr)}
  .kn-art{max-width:720px;width:100%}
  .kn-pcard{grid-template-columns:minmax(0,1fr)}
  .kn-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kn-pgrid{grid-template-columns:minmax(0,1fr)}
  .kn-sum{position:static}
}
@media (max-width:1180px){.kn-art{padding-bottom:110px}}
@media (max-width:760px){
  .kn-hero{padding:34px 0 60px}.kn-ball{display:none}
  .kn-feats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kn-art,html[dir=rtl] .kn-art{padding:10px 0 0}
  .kn-pick,html[dir=rtl] .kn-pick{position:relative;right:auto;left:auto;top:auto;transform:none;width:auto;margin-top:18px;animation:none}
  .kn-picks{grid-template-columns:1fr 1fr}
  .kn-foot,html[dir=rtl] .kn-foot{position:relative;right:auto;left:auto;bottom:auto;margin-top:14px;min-width:0}
  .kn-partner{margin-top:-24px}
  .kn-pcard{padding:20px}
  .kn-plogos{flex-wrap:wrap;justify-content:center}
  .kn-plogos .t{min-width:0;flex:1}
  .kn-cards,.kn-stats,.kn-trust{grid-template-columns:minmax(0,1fr)}
  .kn-stats>div+div:before,.kn-trust>div+div:before{display:none}
  .kn-stats{gap:14px;padding:18px 6px}
  .kn-trust{gap:18px}
  .kn-smart{padding:18px}
  .kn-smart-art,html[dir=rtl] .kn-smart-art{padding:0 40px 20px 0}
  .kn-smart-txt .kn-note{position:static;margin-top:4px}
  .kn-line{grid-template-columns:44px minmax(0,1fr);gap:12px}
  .kn-line em{grid-column:2;border:0;padding:0}
  .kn-cta{padding:24px;flex-direction:column;align-items:flex-start}
  .kn-cta-txt{text-align:start}
}
@media (prefers-reduced-motion:reduce){.kn-hero *,.kn-pcard,.kn-ball{animation:none!important}}

/* ================= own suites (Valoria / Pleno) on the same layout ================= */
.kn-own{--knt:color-mix(in srgb,var(--knb) 10%,#fff);--knt2:color-mix(in srgb,var(--knb) 20%,#fff)}
.kn-own .kn-hero{background:linear-gradient(180deg,color-mix(in srgb,var(--knb) 4%,#fff) 0%,color-mix(in srgb,var(--knb) 7%,#fff) 100%)}
.kn-own .kn-smart{background:linear-gradient(120deg,color-mix(in srgb,var(--knb) 5%,#fff),color-mix(in srgb,var(--knb) 11%,#fff));border-color:color-mix(in srgb,var(--knb) 18%,#fff)}
.kn-own .kn-price{background:linear-gradient(180deg,color-mix(in srgb,var(--knb) 3%,#fff),color-mix(in srgb,var(--knb) 6%,#fff))}
.kn-own .kn-ring2{border-color:color-mix(in srgb,var(--knb) 9%,#fff)}
.kn-own .kn-cta{background:linear-gradient(110deg,color-mix(in srgb,var(--knb) 62%,#0b1240) 0%,var(--knb) 70%,color-mix(in srgb,var(--knb) 80%,#fff) 100%);box-shadow:0 30px 60px -34px color-mix(in srgb,var(--knb) 70%,transparent)}
.kn-own .kn-note{color:color-mix(in srgb,var(--knb) 80%,#3b2fbf)}
/* hero highlights (4 short lines) */
.kn-hls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px;width:100%;max-width:600px;margin-top:12px}
.kn-hls>div{display:flex;align-items:flex-start;gap:12px}
.kn-hls span{width:40px;height:40px;border-radius:11px;background:#fff;border:1px solid var(--knline);color:var(--knb);display:grid;place-items:center;flex:none;box-shadow:0 10px 22px -16px rgba(31,45,110,.5)}
.kn-hls span svg{width:19px;height:19px}
.kn-hls p{margin:0;font-size:13.5px;line-height:1.45;color:#3a4460;font-weight:500}
/* pick card brand (no vendor logo for our own products) */
.kn-pbrand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:4px}
.kn-pbrand .sw{width:34px;height:34px;border-radius:10px;background:var(--knb);color:#fff;display:grid;place-items:center}
.kn-pbrand .sw svg{width:18px;height:18px}
.kn-pbrand b{font:700 21px var(--head);color:var(--knink)}
.kn-ptile{display:inline-flex;align-items:center;gap:8px;font:700 19px var(--head);color:var(--knink)}
.kn-ptile svg{width:28px;height:28px;padding:5px;border-radius:9px;background:var(--knb);color:#fff}
.kn-cta-tile{display:inline-flex;align-items:center;gap:9px;font:700 22px var(--head);color:#fff}
.kn-cta-tile svg{width:30px;height:30px;padding:6px;border-radius:9px;background:rgba(255,255,255,.18)}
/* tablet mode for the device */
.kn-dev[data-mode=tablet]{--bz:13px;width:78cqw;height:56cqw;border-radius:28px;top:46%}
.kn-dev[data-mode=tablet] .kn-scr{border-radius:14px}
.kn-dev[data-mode=tablet] .kn-notch{opacity:1;transition-delay:.55s;top:4px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:#2a3566}
/* the suite: all systems in a wide grid */
.kn-eco.wide .kn-eco-txt{max-width:820px;margin-bottom:28px}
.kn-eco.wide .kn-cards{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.kn-eco.wide .kn-card{min-height:240px}
@media (max-width:760px){.kn-hls{grid-template-columns:minmax(0,1fr)}.kn-eco.wide .kn-cards{grid-template-columns:minmax(0,1fr)}}

/* ================= Konnect hero v4 (.kx) — her mock-ups. Geometry is constant: the stage never changes size, only the device morphs (no layout shifts = no jitter) ================= */
.kn-hero.kx{background:linear-gradient(180deg,#f8faff 0%,#f3f6fd 100%);padding:56px 0 84px}
.kx-qc{position:absolute;z-index:0;width:520px;height:520px;border-radius:50%;left:-300px;bottom:-330px;background:linear-gradient(135deg,#4f7dff,#2f63ec);pointer-events:none}
html[dir=rtl] .kx-qc{left:auto;right:-300px}
.kx .kn-hero-in{z-index:1}
@media (min-width:1181px){.kx .kn-hero-in{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:30px}}
.kx .kn-art{--ext:min(150px,max(0px,(100vw - 1240px)/2 - 20px));padding:6px 150px 118px 0;margin-right:calc(-1 * var(--ext))}
html[dir=rtl] .kx .kn-art{padding:6px 0 118px 150px;margin-right:0;margin-left:calc(-1 * var(--ext))}
.kx .kn-stage{aspect-ratio:1/.84;animation:knUp 1s .15s cubic-bezier(.2,.8,.2,1) both}
.kx .kn-stage:before,.kx .kn-stage:after,.kx .kn-cap{display:none}
.kx .kn-live{display:none}
/* circle */
.kx-circle{position:absolute;z-index:0;left:35.9cqw;top:40.7cqw;width:71.8cqw;height:71.8cqw;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 32% 24%,#8aaeff 0,#5a88f7 42%,#3f73f2 100%);transition:left .8s cubic-bezier(.7,0,.2,1),top .8s cubic-bezier(.7,0,.2,1),width .8s cubic-bezier(.7,0,.2,1),height .8s cubic-bezier(.7,0,.2,1),background .6s;animation:kxPop 1s .1s cubic-bezier(.2,.8,.2,1.2) both}
@keyframes kxPop{from{opacity:0;transform:translate(-50%,-50%) scale(.6)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.kx .kn-art[data-kx=tv] .kx-circle{left:60.8cqw;top:37.7cqw;width:70.3cqw;height:70.3cqw;background:linear-gradient(180deg,#c6d7fb 0,#dbe6fc 45%,rgba(232,239,253,0) 78%)}
html[dir=rtl] .kx-circle{left:64.1cqw}
html[dir=rtl] .kx .kn-art[data-kx=tv] .kx-circle{left:39.2cqw}
/* device: one box, morphs between phone / tv / pc */
.kx .kn-dev{transform:translate(-50%,-50%);padding:0;border-radius:0;background:none;box-shadow:none;transition:opacity .2s}
@keyframes kxIn{from{opacity:0;transform:var(--kxt,translate(-50%,-50%)) translateY(22px) scale(.95)}to{opacity:1;transform:var(--kxt,translate(-50%,-50%))}}
.kx .kn-dev.kx-out{opacity:0}
.kx .kn-dev.kx-in{animation:kxIn .6s cubic-bezier(.2,.8,.2,1) both}
.kx .kn-dev{transform:var(--kxt,translate(-50%,-50%))}
/* the phone is built in CSS (crisp at any size): metal rim, glass bezel, island, side buttons; tilted like her mock-up */
.kx .kn-dev[data-mode=phone]{left:27.9cqw;top:47cqw;width:31cqw;height:64cqw;padding:1.15cqw;border-radius:9.4cqw;
  --kxt:translate(-50%,-50%) perspective(1700px) rotateY(-15deg) rotateX(3deg) rotate(-6.5deg);
  background:linear-gradient(150deg,#7c86a8 0,#1c2340 22%,#0a0e1c 55%,#232b49 82%,#5d6788 100%);
  box-shadow:inset 0 0 0 .22cqw rgba(214,222,245,.55),inset 0 0 0 .5cqw #0a0e1c,0 3.6cqw 5cqw -2.6cqw rgba(13,20,48,.55),0 1.2cqw 2.4cqw -1.4cqw rgba(13,20,48,.4)}
html[dir=rtl] .kx .kn-dev[data-mode=phone]{--kxt:translate(-50%,-50%) perspective(1700px) rotateY(15deg) rotateX(3deg) rotate(6.5deg)}
.kx .kn-dev[data-mode=phone]:before,.kx .kn-dev[data-mode=phone]:after{content:"";position:absolute;background:linear-gradient(90deg,#3a4468,#10152a);border-radius:.4cqw}
.kx .kn-dev[data-mode=phone]:before{left:-.45cqw;top:11cqw;width:.55cqw;height:4.2cqw;box-shadow:0 6.4cqw 0 #1d2542}
.kx .kn-dev[data-mode=phone]:after{right:-.45cqw;top:17cqw;width:.55cqw;height:7cqw}
.kx .kn-dev[data-mode=phone] .kn-scr{border-radius:8.2cqw;background:#cfe3ee;z-index:1}
.kx .kn-dev[data-mode=phone] .kn-notch{display:block;position:absolute;z-index:5;top:2.5cqw;left:50%;width:9.4cqw;height:2.7cqw;margin-left:-4.7cqw;border-radius:2cqw;background:#05070f;opacity:1}
.kx .kn-dev[data-mode=phone] .kn-scr:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;background:linear-gradient(115deg,rgba(255,255,255,.22) 0,rgba(255,255,255,0) 32%)}
.kx .kn-layer[data-layer=access] img{object-fit:cover;object-position:center}
.kx .kn-dev[data-mode=tv]{left:38.5cqw;top:48cqw;width:77cqw;height:64.3cqw}
.kx .kn-dev[data-mode=pc]{left:35.9cqw;top:36cqw;width:62cqw;height:36.3cqw;padding:7px;border-radius:12px;background:#0d1430;box-shadow:0 40px 60px -34px rgba(13,20,48,.55)}
html[dir=rtl] .kx .kn-dev[data-mode=phone]{left:72.1cqw}
html[dir=rtl] .kx .kn-dev[data-mode=tv]{left:61.5cqw}
html[dir=rtl] .kx .kn-dev[data-mode=pc]{left:64.1cqw}
.kx .kn-notch{display:none}
.kx-phone{display:none}
.kx .kn-dev[data-mode=tv] .kn-stand,.kx .kn-dev[data-mode=phone] .kn-stand{display:none}
/* frames cut from her mock-ups; the screens are real windows, the system's own screenshots sit behind them */
.kx-phone,.kx-tvimg{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;opacity:0;pointer-events:none;z-index:3}
.kx-phone{filter:drop-shadow(0 34px 34px rgba(13,20,48,.38))}
.kx-tvimg{filter:drop-shadow(0 40px 36px rgba(13,20,48,.28))}
.kx .kn-dev[data-mode=tv] .kx-tvimg{opacity:1}
.kx .kn-scr{z-index:1;background:none}
.kx .kn-dev[data-mode=tv] .kn-scr{position:absolute;left:0;top:0;width:608px;height:380px;border-radius:0;background:#0c1a3a;transform-origin:0 0;transform:scale(var(--ks,.8)) matrix3d(0.781530,-0.046355,0,-0.00019841,0,0.934211,0,0,0,0,1,0,9.8,39,0,1)}
.kx .kn-dev[data-mode=phone] .kn-live{display:inline-flex;top:auto;bottom:3.4cqw;inset-inline-start:50%;transform:translateX(-50%);z-index:4;font-size:max(10px,1.5cqw);padding:.9cqw 1.8cqw}
html[dir=rtl] .kx .kn-dev[data-mode=phone] .kn-live{transform:translateX(50%)}
.kx .kn-layer{transition:opacity .35s}
.kx .kn-layer img{object-fit:fill;transform:none}
.kx .kn-layer[data-layer=me] img,.kx .kn-layer[data-layer=pulse] img{object-fit:cover}
.kx .kn-layer[data-layer=access] img{object-fit:fill}
/* product card + ring + red dot */
.kx-pickw{position:absolute;z-index:3;left:41.9%;top:150px;width:min(300px,34%);transition:left .8s cubic-bezier(.7,0,.2,1),top .8s cubic-bezier(.7,0,.2,1)}
html[dir=rtl] .kx-pickw{left:auto;right:41.9%;transition-property:right,top}
.kx .kn-art[data-kx=tv] .kx-pickw{left:61%;top:170px}
html[dir=rtl] .kx .kn-art[data-kx=tv] .kx-pickw{left:auto;right:61%}
.kx-ring{position:absolute;z-index:0;width:270px;height:270px;border-radius:50%;border:1.5px solid #d3dcf2;right:-50px;top:-92px;pointer-events:none;transition:opacity .5s}
.kx-dot{position:absolute;z-index:2;width:62px;height:62px;border-radius:50%;right:-44px;top:-72px;background:radial-gradient(circle at 35% 30%,#ff4a50,#ED1C24 65%);animation:kxDot .7s 1.1s cubic-bezier(.2,.8,.2,1.5) both;transition:right .6s,top .6s,width .6s,height .6s}
html[dir=rtl] .kx-ring{right:auto;left:-50px}html[dir=rtl] .kx-dot{right:auto;left:-44px}
@keyframes kxDot{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
.kx .kn-art[data-kx=tv] .kx-ring{opacity:0}
.kx .kn-art[data-kx=tv] .kx-dot{width:56px;height:56px;right:14px;top:-98px}
html[dir=rtl] .kx .kn-art[data-kx=tv] .kx-dot{right:auto;left:14px}
.kx .kn-pick{position:relative;z-index:1;right:auto;left:auto;top:auto;transform:none;width:auto;border-radius:22px;padding:26px 20px 14px;box-shadow:0 40px 70px -34px rgba(31,45,110,.4),0 2px 6px rgba(16,24,40,.04);animation:knUp .9s .5s cubic-bezier(.2,.8,.2,1) both}
.kx .kn-pick>img{width:150px}
.kx .kn-pick>small{font-size:12.5px;margin-bottom:14px}
.kx .kn-picks{gap:0}
.kx .kn-picks button{padding:14px;border-radius:14px;font-size:15.5px;gap:14px;position:relative}
.kx .kn-picks button+button:before{content:"";position:absolute;left:14px;right:14px;top:0;height:1px;background:#eef1f7}
.kx .kn-picks button.on:before,.kx .kn-picks button.on+button:before{display:none}
.kx .kn-picks button>span{width:38px;height:38px;border-radius:11px}
.kx .kn-picks button>span svg{width:19px;height:19px}
.kx .kn-picks .dv{width:18px;height:18px;color:#8b95ad;transition:color .25s,transform .25s}
.kx .kn-picks button:hover .dv,.kx .kn-picks button.on .dv{color:var(--knb);transform:translateX(3px)}
html[dir=rtl] .kx .kn-picks .dv{transform:scaleX(-1)}
html[dir=rtl] .kx .kn-picks button:hover .dv,html[dir=rtl] .kx .kn-picks button.on .dv{transform:scaleX(-1) translateX(3px)}
.kx .kn-foot{left:auto;right:0;bottom:0;min-width:0;width:390px;padding:16px 18px 16px 20px;border-radius:18px}
html[dir=rtl] .kx .kn-foot{right:auto;left:0}
.kx .kn-foot .w{width:46px;height:46px;border-radius:13px}.kx .kn-foot .w svg{width:23px;height:23px}
.kx .kn-foot b{font-size:15px}.kx .kn-foot small{font-size:13.5px}
.kx .kn-foot .go{width:38px;height:38px}
.kx .kn-feats b{white-space:nowrap}
@media (max-width:1180px){.kx .kn-art{max-width:760px}}
@media (max-width:760px){
  .kx .kn-art,html[dir=rtl] .kx .kn-art{padding:10px 0 0;margin:0}
  .kx .kn-stage{aspect-ratio:1/1}
  .kx .kn-art .kx-circle,.kx .kn-art[data-kx=tv] .kx-circle,html[dir=rtl] .kx .kn-art .kx-circle,html[dir=rtl] .kx .kn-art[data-kx=tv] .kx-circle{left:50%;top:48cqw;width:90cqw;height:90cqw}
  .kx .kn-dev[data-mode=phone],html[dir=rtl] .kx .kn-dev[data-mode=phone]{left:50%;top:50cqw;width:46cqw;height:95cqw}
  .kx .kn-dev[data-mode=tv],html[dir=rtl] .kx .kn-dev[data-mode=tv]{left:50%;top:46cqw;width:100cqw;height:83.5cqw}
  .kx .kn-dev[data-mode=pc],html[dir=rtl] .kx .kn-dev[data-mode=pc]{left:50%;top:44cqw;width:86cqw;height:50cqw}
  .kx-pickw,html[dir=rtl] .kx-pickw,.kx .kn-art[data-kx=tv] .kx-pickw,html[dir=rtl] .kx .kn-art[data-kx=tv] .kx-pickw{position:relative;left:auto;right:auto;top:auto;width:auto;margin-top:22px}
  .kx-ring{display:none}.kx-dot,html[dir=rtl] .kx-dot,.kx .kn-art[data-kx=tv] .kx-dot{width:40px;height:40px;right:-6px;left:auto;top:-18px}
  .kx .kn-picks button+button:before{display:none}
  .kx .kn-picks{grid-template-columns:1fr 1fr;gap:6px}
  .kx .kn-picks button{padding:10px;gap:10px;font-size:14px}
  .kx .kn-picks .dv{display:none}
  .kx .kn-picks button>span{width:34px;height:34px}
  .kx .kn-foot,html[dir=rtl] .kx .kn-foot{width:auto}
  .kx-qc{width:300px;height:300px;left:-190px;bottom:-200px}
}
@media (prefers-reduced-motion:reduce){.kx .kn-stage,.kx-circle,.kx-dot{animation:none!important}}