/* "Before / after" store showcase on the homepage: tilted phone screens fanned around a phone.
   Everything is sized from one design unit (--u) so the fan scales with the section width. */
.kx-show{position:relative;overflow:hidden;padding:96px 0 40px;background:radial-gradient(42% 60% at 18% 70%,rgba(244,63,94,.16),transparent 70%),radial-gradient(42% 60% at 84% 68%,rgba(34,197,94,.15),transparent 70%),#f4f1fb;color:#160f2a;font-family:Inter,system-ui,sans-serif}
.kx-show *{box-sizing:border-box}
.kx-show::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(transparent,#f4f1fb);pointer-events:none;z-index:20}
.kx-show-head{max-width:980px;margin:0 auto;padding:0 20px;text-align:center}
.kx-show-head h2{margin:0;text-wrap:balance;font-family:'Space Grotesk',system-ui,sans-serif;font-size:clamp(26px,3.2vw,44px);font-weight:600;line-height:1.18;letter-spacing:-.03em;color:#160f2a}
.kx-show-head p{margin:14px auto 0;text-wrap:balance;max-width:860px;font-family:'Space Grotesk',system-ui,sans-serif;font-size:clamp(18px,2.1vw,30px);font-weight:500;line-height:1.3;letter-spacing:-.025em;color:#7a7289}
.kx-show-head mark{color:#160f2a;background:linear-gradient(100deg,#d4c4ff 0%,#c4b2fb 45%,#b9ecf7 100%) no-repeat 0 62%/100% 74%;padding:0 .12em;border-radius:.14em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.kx-fan{container-type:inline-size;max-width:1500px;margin:44px auto 0}
.kx-fan-stage{--u:calc(min(100vw,1500px)/1440);position:relative;height:calc(634*var(--u) + 66px);perspective:calc(1800*var(--u))}
@supports (width:1cqw){.kx-fan-stage{--u:calc(100cqw/1440)}}
.kx-card{position:absolute;left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u));width:calc(var(--w)*var(--u));height:calc(var(--h)*var(--u));z-index:var(--z);transform:rotateZ(var(--rz)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.kx-card-screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:calc(26*var(--u));background:#fff;border:calc(5*var(--u)) solid #fff;box-shadow:0 calc(30*var(--u)) calc(60*var(--u)) calc(-24*var(--u)) rgba(22,15,42,.45),0 0 0 1px rgba(22,15,42,.06)}
.kx-card-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:calc(20*var(--u))}
.kx-card.is-bad .kx-card-screen::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(244,63,94,.28),rgba(244,63,94,.12) 55%,rgba(190,18,60,.32));mix-blend-mode:multiply;pointer-events:none}
.kx-label{position:absolute;top:calc(-14*var(--u));left:calc(18*var(--u));z-index:2;display:inline-flex;align-items:center;gap:calc(6*var(--u));padding:calc(6*var(--u)) calc(12*var(--u)) calc(6*var(--u)) calc(9*var(--u));border-radius:999px;color:#fff;font-family:Inter,system-ui,sans-serif;font-size:max(10px,calc(13*var(--u)));font-weight:600;line-height:1.2;white-space:nowrap;box-shadow:0 calc(8*var(--u)) calc(20*var(--u)) calc(-8*var(--u)) rgba(0,0,0,.35)}
.kx-label svg{width:max(10px,calc(13*var(--u)));height:max(10px,calc(13*var(--u)));flex:0 0 auto}
.is-bad .kx-label{background:#f43f5e}
.is-good .kx-label{background:#22c55e;left:auto;right:calc(18*var(--u))}
/* Inner cards sit beside the phone: push their labels outward so the phone never covers them. */
.is-bad.is-inner .kx-label{left:auto;right:calc(100% - 128*var(--u))}
.is-good.is-inner .kx-label{right:auto;left:calc(68*var(--u))}
.kx-label-short{display:none}
@media (hover:hover) and (pointer:fine){.kx-card:hover{transform:rotateZ(var(--rz)) rotateY(var(--ry)) translateY(calc(-12*var(--u)))}}
/* Generic "problem" store screens drawn in CSS (no client is shown as a bad example). */
.kx-mock{position:absolute;inset:0;display:flex;flex-direction:column;gap:calc(10*var(--u));padding:calc(16*var(--u)) calc(14*var(--u));background:#f4f2f5;color:#8a8392;font-size:calc(11*var(--u));border-radius:calc(20*var(--u))}
.kx-mock-bar{display:flex;align-items:center;justify-content:space-between;font-weight:700;letter-spacing:.2em;color:#9b94a3;font-size:calc(12*var(--u))}
.kx-mock-bar i{display:block;width:calc(18*var(--u));height:calc(12*var(--u));border-top:2px solid currentColor;border-bottom:2px solid currentColor}
.kx-mock-bar b{display:block;width:calc(16*var(--u));height:calc(16*var(--u));border:2px solid currentColor;border-radius:calc(4*var(--u))}
.kx-mock-block{background:#dedbe2;border-radius:calc(10*var(--u))}
.kx-mock-line{height:calc(9*var(--u));border-radius:99px;background:#dcd8e0}
.kx-mock-title{font-family:Georgia,serif;font-size:calc(24*var(--u));line-height:1.1;color:#9a93a2}
.kx-mock-btn{display:flex;align-items:center;justify-content:center;height:calc(34*var(--u));border-radius:calc(6*var(--u));background:#a7a1ad;color:#fff;font-weight:600;font-size:calc(11*var(--u))}
.kx-mock-grid{display:grid;grid-template-columns:1fr 1fr;gap:calc(8*var(--u))}
.kx-mock-grid span{aspect-ratio:1;background:#dedbe2;border-radius:calc(8*var(--u))}
.kx-mock-spin{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(10*var(--u));background:rgba(244,242,245,.72);font-weight:600;color:#7d7586;font-size:calc(13*var(--u))}
.kx-mock-spin::before{content:"";width:calc(44*var(--u));height:calc(44*var(--u));border-radius:50%;border:calc(4*var(--u)) solid #d8d3dd;border-top-color:#8f8798}
.kx-mock-stars{letter-spacing:.15em;color:#c9c3cf;font-size:calc(13*var(--u))}
/* Center phone with a slowly scrolling live store. */
.kx-phone{position:absolute;left:calc(574*var(--u));top:calc(34*var(--u));width:calc(292*var(--u));height:calc(600*var(--u));z-index:10;padding:calc(10*var(--u));border-radius:calc(48*var(--u));background:linear-gradient(145deg,#2c2b33,#0b0b0f 40%,#1b1a21);box-shadow:0 calc(50*var(--u)) calc(90*var(--u)) calc(-30*var(--u)) rgba(22,15,42,.6),inset 0 0 0 calc(2*var(--u)) #3a3942}
.kx-phone::before{content:"";position:absolute;top:calc(22*var(--u));left:50%;z-index:3;width:calc(88*var(--u));height:calc(25*var(--u));border-radius:999px;background:#000;transform:translateX(-50%)}
.kx-phone-screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:calc(38*var(--u));background:#fff;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.kx-phone{cursor:grab;outline:none}
.kx-phone.is-dragging{cursor:grabbing}
.kx-phone:focus-visible{box-shadow:0 0 0 3px #f4f1fb,0 0 0 5px #6234b8,0 calc(50*var(--u)) calc(90*var(--u)) calc(-30*var(--u)) rgba(22,15,42,.6)}
.kx-phone-track{display:flex;width:100%;height:100%;transform:translateX(calc(var(--kx-i,0)*-100% + var(--kx-drag,0px)));transition:transform .55s cubic-bezier(.22,1,.36,1)}
.kx-phone.is-dragging .kx-phone-track{transition:none}
.kx-phone-slide{position:relative;flex:0 0 100%;height:100%;overflow:hidden}
.kx-phone-slide img{-webkit-user-drag:none;pointer-events:none}
.kx-phone-head{position:absolute;top:0;left:0;z-index:2;display:block;width:100%;height:auto}
.kx-phone-feed{display:block;width:100%;height:auto}
.kx-phone-slide.is-active .kx-phone-feed{animation:kx-phone-scroll 26s cubic-bezier(.65,0,.35,1) infinite alternate;will-change:transform}
.kx-phone:hover .kx-phone-feed{animation-play-state:paused}
@keyframes kx-phone-scroll{0%,8%{transform:translateY(0)}92%,100%{transform:translateY(var(--kx-scroll,-70%))}}
.kx-phone-nav{position:absolute;left:50%;top:calc(634*var(--u) + 14px);z-index:12;display:flex;align-items:center;gap:14px;transform:translateX(-50%)}
.kx-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.kx-nav-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1px solid #ded7ec;border-radius:50%;background:#fff;color:#160f2a;cursor:pointer;box-shadow:0 8px 18px -12px rgba(22,15,42,.45);transition:background .2s,color .2s,border-color .2s,transform .2s}
.kx-nav-btn svg{width:18px;height:18px}
.kx-nav-btn:hover{background:#160f2a;border-color:#160f2a;color:#fff}
.kx-nav-btn:active{transform:scale(.94)}
.kx-nav-btn:focus-visible,.kx-dot:focus-visible{outline:2px solid #6234b8;outline-offset:3px}
.kx-phone-name{min-width:9.5em;text-align:center;font-family:'Space Grotesk',system-ui,sans-serif;font-size:15px;font-weight:600;letter-spacing:-.01em;color:#160f2a}
.kx-dots{display:inline-flex;align-items:center}
.kx-dot{display:inline-flex;align-items:center;justify-content:center;width:22px;height:28px;padding:0;border:0;background:none;cursor:pointer;border-radius:99px}
.kx-dot::before{content:"";width:8px;height:8px;border-radius:99px;background:#cdc4de;transition:width .3s ease,background .3s ease}
.kx-dot[aria-current="true"]::before{width:20px;background:#6234b8}
.kx-show-more{position:relative;z-index:21;margin:8px auto 0;text-align:center}
.kx-show-more a{display:inline-flex;align-items:center;gap:8px;padding:10px 4px;color:#6234b8;font-size:14px;font-weight:600;text-decoration:none}
.kx-show-more a:hover{color:#4d2796;text-decoration:underline;text-underline-offset:4px}
.kx-show-more a:focus-visible{outline:2px solid #6234b8;outline-offset:4px;border-radius:4px}
/* Phones: smaller fan, two cards per side bleeding off the edges (like the reference). */
@media (max-width:767px){
  .kx-show{padding-top:64px}
  .kx-fan{margin-top:28px}
  .kx-fan-stage{--u:calc(100vw/390);height:calc(318*var(--u) + 60px);perspective:calc(900*var(--u))}
  @supports (width:1cqw){.kx-fan-stage{--u:calc(100cqw/390)}}
  .kx-card.is-inner{display:none}
  .kx-card{left:calc(var(--mx)*var(--u));top:calc(var(--my)*var(--u));width:calc(var(--mw)*var(--u));height:calc(var(--mh)*var(--u))}
  .kx-card-screen{border-radius:calc(16*var(--u));border-width:calc(3*var(--u))}
  .kx-card-screen img,.kx-mock{border-radius:calc(13*var(--u))}
  .kx-mock{padding:calc(9*var(--u)) calc(8*var(--u));gap:calc(6*var(--u))}
  .kx-label{top:calc(-10*var(--u));left:calc(8*var(--u));padding:3px 8px 3px 6px;gap:4px;font-size:9px}
  .kx-label svg{width:9px;height:9px}
  .is-good .kx-label{right:calc(8*var(--u))}
  .is-outer .kx-label{display:none}
  .kx-label-long{display:none}
  .kx-label-short{display:inline}
  .kx-phone{left:calc(120*var(--u));top:calc(10*var(--u));width:calc(150*var(--u));height:calc(308*var(--u));padding:calc(5*var(--u));border-radius:calc(26*var(--u))}
  .kx-phone::before{top:calc(11*var(--u));width:calc(46*var(--u));height:calc(13*var(--u))}
  .kx-phone-screen{border-radius:calc(21*var(--u))}
}
@media (max-width:767px){.kx-phone-nav{top:calc(318*var(--u) + 12px);gap:12px}}
@media (prefers-reduced-motion:reduce){.kx-phone-slide.is-active .kx-phone-feed{animation:none}.kx-phone-track{transition:none}.kx-card{transition:none}}