/* Kora WhatsApp booking demo for the "How Kora works" section. Pairs with kora-demo.js. */
.kora-demo{
  --kd-navy:#000066;--kd-sky:#99c8ff;--kd-ink:#171717;--kd-muted:#525252;--kd-line:#dce1ed;
  --kd-wa-head:#008069;--kd-wa-bg:#efeae2;--kd-wa-out:#d9fdd3;--kd-wa-meta:#667781;--kd-wa-tick:#53bdeb;--kd-wa-accent:#00a884;
  --kd-ease:cubic-bezier(.22,1,.36,1);--kd-spring:cubic-bezier(.34,1.56,.64,1);--kd-off:1;
  display:grid;grid-template-columns:repeat(3,1fr);gap:38px;
}
/* Pop-outs, glow and confetti reach past the layout; never let them add sideways scroll. */
html:has(.kora-demo.kd-ready),html:has(.kora-demo.kd-ready) body{overflow-x:clip}
.kora-demo.kd-ready{grid-template-columns:minmax(0,1fr) auto;gap:clamp(40px,7vw,110px);align-items:center}

/* ---------- Steps ---------- */
.kd-steps{list-style:none;margin:0;padding:0;display:contents}
.kd-ready .kd-steps{display:flex;flex-direction:column;position:relative;max-width:520px;isolation:isolate}
.kd-ready .kd-steps::before,.kd-ready .kd-steps::after{content:'';position:absolute;z-index:-1;left:21px;top:34px;bottom:34px;width:2px;background:var(--kd-line)}
.kd-ready .kd-steps::after{background:var(--kd-navy);transform-origin:top;transform:scaleY(var(--kd-progress,0));transition:transform .9s var(--kd-ease)}
.kd-step{position:relative;border-top:1px solid #ccd5e5;padding-top:25px}
.kd-ready .kd-step{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:22px;border:0;padding:20px 0;cursor:pointer}
.kd-ready .kd-step>div{transition:opacity .5s ease,transform .7s var(--kd-ease)}
.kd-ready .kd-step:not(.is-active)>div{opacity:.45}
.kd-ready .kd-step:hover>div{opacity:1}
.kd-ready .kd-step.is-active>div{transform:translateX(6px)}
.kd-num{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#eaf3ff;color:var(--kd-navy);font-size:14px;margin-bottom:28px;position:relative;transition:background .4s,color .4s,transform .6s var(--kd-spring)}
.kd-ready .kd-num{margin:0}
.kd-step.is-active .kd-num,.kd-step.is-done .kd-num{background:var(--kd-navy);color:#fff}
.kd-step.is-active .kd-num{transform:rotate(-8deg) scale(1.14)}
.kd-step.is-active .kd-num::after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid var(--kd-navy);animation:kd-ping 1.8s ease-out infinite}
.kd-step h3{margin:0 0 8px;font-size:19px;line-height:1.3;letter-spacing:-.4px;font-weight:700}
.kd-ready .kd-step h3{margin-top:9px}
.kd-step h3 button{all:unset;cursor:pointer}
.kd-step h3 button::after{content:'';position:absolute;inset:0}
.kd-step h3 button:focus-visible{outline:3px solid #3672ba;outline-offset:5px;border-radius:4px}
.kd-step p{margin:0;color:var(--kd-muted);font-size:16px;line-height:1.7}
.kora-demo:not(.kd-ready) .kd-step h3 button{cursor:default}

/* ---------- Stage: 3D scene around the phone ---------- */
.kd-stage{display:none}
.kd-ready .kd-stage{display:flex;flex-direction:column;align-items:center;gap:22px}
.kd-scene{position:relative;perspective:1500px;--rx0:3deg;--ry0:-9deg}
.kd-enter,.kd-tilt,.kd-bob{transform-style:preserve-3d}
.kd-tilt{transform:rotateX(calc(var(--rx0) + var(--rx,0deg))) rotateY(calc(var(--ry0) + var(--ry,0deg)));transition:transform .5s var(--kd-ease)}
.kd-bob{position:relative;animation:kd-bob 7s ease-in-out infinite}
.kd-aura{position:absolute;inset:-10% -24%;z-index:-1;border-radius:50%;filter:blur(64px);opacity:.42;background:conic-gradient(from 0deg,#99c8ff,#00a884 28%,#000066 55%,#b9a6ff 78%,#99c8ff);animation:kd-aura 16s linear infinite;transition:opacity 1s ease}
.kd-scene[data-chapter="2"] .kd-aura{opacity:.6}
.kd-ring{position:absolute;left:50%;top:50%;width:330px;height:330px;margin:-165px 0 0 -165px;border-radius:50%;border:2px solid var(--kd-sky);opacity:0;z-index:-1;pointer-events:none}
.kd-ring.is-on{animation:kd-ring 1.1s var(--kd-ease)}
.kd-ring.is-big{border-color:var(--kd-wa-accent);border-width:3px}

.kd-phone{position:relative;width:320px;height:630px;padding:10px;border-radius:46px;background:#0c0c16;box-shadow:0 0 0 1px #2a2a3a inset,-14px 0 0 -8px #1b1b2b,0 50px 90px -30px #00006677,0 22px 40px -18px #00003350}
.kd-phone.is-thump{animation:kd-thump .42s var(--kd-ease)}
.kd-phone.is-jump{animation:kd-jump .9s var(--kd-spring)}
.kd-screen{position:relative;height:100%;border-radius:36px;overflow:hidden;display:flex;flex-direction:column;background:var(--kd-wa-bg);font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:#111b21;line-height:1.4;isolation:isolate}
.kd-screen::after{content:'';position:absolute;inset:-40% -80%;z-index:5;pointer-events:none;background:linear-gradient(115deg,#fff0 42%,#ffffff38 50%,#fff0 58%);transform:translateX(-60%);animation:kd-sheen 7s ease-in-out 2s infinite}
.kd-status{display:flex;justify-content:space-between;align-items:center;padding:9px 22px 4px;background:var(--kd-wa-head);color:#fff;font-size:12px;font-weight:600;position:relative}
.kd-status::before{content:'';position:absolute;left:50%;top:7px;width:74px;height:18px;margin-left:-37px;border-radius:10px;background:#0c0c16}
.kd-status i{display:inline-block;width:20px;height:10px;border:1.5px solid #fff;border-radius:3px;position:relative;opacity:.95}
.kd-status i::after{content:'';position:absolute;inset:1.5px;right:5px;background:#fff;border-radius:1px}
.kd-head{display:flex;align-items:center;gap:10px;padding:8px 14px 10px 8px;background:var(--kd-wa-head);color:#fff}
.kd-head svg{flex:none}
.kd-avatar{flex:none;width:36px;height:36px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;position:relative}
.kd-avatar img{width:22px;height:22px}
.kd-head.is-typing .kd-avatar::after{content:'';position:absolute;inset:-3px;border-radius:50%;border:2px solid #ffffffb0;animation:kd-ping 1.1s ease-out infinite}
.kd-who{flex:1;min-width:0}
.kd-who b{display:block;font-size:15px;font-weight:600;line-height:1.25}
.kd-who small{display:block;font-size:11.5px;opacity:.85;line-height:1.3}
.kd-log{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none;padding:10px 10px 12px;display:flex;flex-direction:column;gap:6px}
.kd-log::-webkit-scrollbar{display:none}
.kd-log>*{flex:none}
.kd-log>:first-child{margin-top:auto}
.kd-day{align-self:center;background:#fff;color:#54656f;font-size:11px;padding:4px 10px;border-radius:7px;box-shadow:0 1px .5px #0b141a21;margin-bottom:4px}

.kd-msg{max-width:84%;padding:6px 8px 7px 9px;border-radius:9px;font-size:13.5px;box-shadow:0 1px .5px #0b141a21;background:#fff;align-self:flex-start;border-top-left-radius:2px;transform-origin:bottom left;overflow-wrap:anywhere}
.kd-msg.out{align-self:flex-end;background:var(--kd-wa-out);border-radius:9px;border-top-right-radius:2px;transform-origin:bottom right}
.kd-msg+.kd-msg.out,.kd-msg.out+.kd-msg:not(.out),.kd-chip+.kd-msg{margin-top:4px}
.kd-meta{float:right;display:inline-flex;align-items:center;gap:3px;margin:7px 0 -3px 12px;font-size:10px;color:var(--kd-wa-meta);white-space:nowrap}
.kd-meta svg{color:#8696a0;transition:color .3s}
.is-read .kd-meta svg{color:var(--kd-wa-tick)}
.kd-typing{display:inline-flex;gap:4px;padding:11px 12px}
.kd-typing i{width:6px;height:6px;border-radius:50%;background:#8696a0;animation:kd-dot 1s ease-in-out infinite}
.kd-typing i:nth-child(2){animation-delay:.15s}
.kd-typing i:nth-child(3){animation-delay:.3s}

/* Listing cards */
.kd-msg.kd-card{width:214px;padding:4px 4px 7px;transition:box-shadow .4s ease,transform .5s var(--kd-spring)}
.kd-photo{height:96px;border-radius:7px;background:#d8dde6 no-repeat;background-size:235% auto;animation:kd-burns 9s ease-in-out infinite alternate}
.kd-card-body{padding:7px 5px 0}
.kd-card b{display:block;font-size:13.5px;font-weight:600}
.kd-card span{display:block;font-size:12px;color:var(--kd-wa-meta)}
.kd-card .kd-price{color:#111b21;font-weight:600;margin-top:3px}
.kd-card.is-picked{box-shadow:0 0 0 2.5px var(--kd-wa-accent),0 10px 22px -10px #00a88499;transform:scale(1.03)}

/* Status chip */
.kd-chip{align-self:center;display:inline-flex;align-items:center;gap:7px;max-width:92%;margin:4px 0;padding:5px 11px;border-radius:8px;color:#54656f;font-size:11.5px;text-align:center;box-shadow:0 1px .5px #0b141a21;background:linear-gradient(100deg,#fff8d6 35%,#fffdf2 50%,#fff8d6 65%) 0 0/250% 100%;animation:kd-pop .38s var(--kd-ease) backwards,kd-shimmer 1.3s linear infinite}
.kd-chip.is-ok{background:#e3f7e6;color:#0b6b3a;font-weight:600;animation:kd-bump .6s var(--kd-spring)}
.kd-spin{flex:none;width:11px;height:11px;border-radius:50%;border:1.6px solid #c9b458;border-top-color:transparent;animation:kd-spin .8s linear infinite}

/* Booking summary + confirmation */
.kd-msg.kd-sum{width:228px;padding:0;overflow:hidden}
.kd-sum-top{padding:8px 10px 9px}
.kd-sum b{font-weight:600}
.kd-rows{margin:7px 0 0;padding:7px 0 0;border-top:1px solid #e9edef;display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:12.5px}
.kd-rows dt{color:var(--kd-wa-meta)}
.kd-rows dd{margin:0;text-align:right}
.kd-rows .kd-total{font-weight:700;font-size:13.5px;color:#111b21;font-variant-numeric:tabular-nums}
.kd-link{display:flex;align-items:center;justify-content:center;gap:7px;padding:10px;border-top:1px solid #e9edef;color:#027eb5;font-size:13.5px;font-weight:500;transition:background .2s}
.kd-link.is-pressed{background:#dfeef3}
.kd-sum.is-confirm .kd-sum-head{display:flex;align-items:center;gap:8px;padding:10px;background:var(--kd-navy);color:#fff;font-size:13.5px;font-weight:600;position:relative;overflow:hidden}
.kd-sum.is-confirm .kd-sum-head::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,#fff0 35%,#ffffff40 50%,#fff0 65%);transform:translateX(-100%);animation:kd-sweep 1.1s ease-out .35s}
.kd-sum.is-confirm .kd-sum-head svg{color:var(--kd-sky)}

/* Composer */
.kd-compose{display:flex;align-items:flex-end;gap:6px;padding:6px 7px 10px}
.kd-input{flex:1;min-width:0;min-height:38px;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:20px;background:#fff;font-size:13.5px;color:#111b21;box-shadow:0 1px .5px #0b141a21}
.kd-input svg{flex:none;color:#8696a0;align-self:flex-end;margin-bottom:1px}
.kd-text{flex:1;min-width:0;overflow-wrap:anywhere}
.kd-text:empty::before{content:'Message';color:#8696a0}
.kd-compose.is-typing .kd-text::after{content:'';display:inline-block;width:1.5px;height:15px;margin-left:1px;vertical-align:-2px;background:var(--kd-wa-accent);animation:kd-caret 1s steps(1) infinite}
.kd-send{flex:none;width:38px;height:38px;border-radius:50%;background:var(--kd-wa-accent);color:#fff;display:flex;align-items:center;justify-content:center;transition:transform .2s var(--kd-spring)}
.kd-send .kd-i-send,.kd-compose.is-typing .kd-i-mic{display:none}
.kd-compose.is-typing .kd-i-send{display:block;animation:kd-pop .3s var(--kd-spring)}
.kd-send.is-pressed{transform:scale(.8)}

/* Payment sheet */
.kd-sheet{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:flex-end;background:#0b141a00;visibility:hidden;transition:background .35s ease,visibility 0s .5s}
.kd-sheet.is-open{background:#0b141a80;visibility:visible;transition:background .35s ease}
.kd-sheet-panel{background:#fff;border-radius:22px 22px 0 0;padding:10px 18px 22px;transform:translateY(104%);transition:transform .55s var(--kd-spring);font-family:'Cabinet Grotesk',system-ui,sans-serif;color:var(--kd-ink)}
.kd-sheet.is-open .kd-sheet-panel{transform:none}
.kd-sheet.is-open .kd-sheet-panel>*{animation:kd-rise .5s var(--kd-ease) backwards}
.kd-sheet.is-open .kd-sheet-panel>:nth-child(3){animation-delay:.08s}
.kd-sheet.is-open .kd-sheet-panel>:nth-child(4){animation-delay:.16s}
.kd-sheet.is-open .kd-sheet-panel>:nth-child(5){animation-delay:.24s}
.kd-sheet.is-open .kd-sheet-panel>:nth-child(6){animation-delay:.32s}
.kd-grab{width:38px;height:4px;border-radius:2px;background:#d5d9e2;margin:0 auto 12px}
.kd-secure{display:flex;align-items:center;justify-content:center;gap:6px;font-size:11.5px;color:var(--kd-muted);margin-bottom:14px}
.kd-pay-brand{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.kd-pay-brand img{width:30px;height:30px}
.kd-pay-brand b{display:block;font-size:15px;line-height:1.25}
.kd-pay-brand span{display:block;font-size:12px;color:var(--kd-muted)}
.kd-sheet .kd-rows{font-size:13px;border-color:var(--kd-line);padding-top:10px;gap:5px 10px}
.kd-sheet .kd-rows dt{color:var(--kd-muted)}
.kd-sheet .kd-total{font-size:16px}
.kd-pay{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;height:46px;border-radius:9px;background:var(--kd-navy);color:#fff;font-size:15px;font-weight:700;transition:transform .2s var(--kd-spring),background .3s}
.kd-pay.is-pressed{transform:scale(.95)}
.kd-pay.is-busy .kd-spin{border-color:#fff;border-top-color:transparent}
.kd-pay.is-paid{background:#0b6b3a;animation:kd-bump .6s var(--kd-spring)}
.kd-pay.is-paid::after{content:'';position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px;border-radius:50%;background:#ffffff55;animation:kd-flood .7s ease-out forwards}
.kd-draw path{stroke-dasharray:30;stroke-dashoffset:30;animation:kd-draw .45s ease-out .15s forwards}
.kd-note{margin:10px 0 0;text-align:center;font-size:11.5px;color:var(--kd-muted)}

/* Touch indicator */
.kd-tap{position:absolute;z-index:6;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;background:#00006633;border:1.5px solid #ffffffcc;pointer-events:none;opacity:0}
.kd-tap.is-on{animation:kd-tap .55s ease-out}

/* ---------- Floating pop-outs around the phone ---------- */
.kd-floats{position:absolute;inset:0;pointer-events:none;transform:translateZ(70px);transform-style:preserve-3d;font-family:'Cabinet Grotesk',system-ui,sans-serif}
.kd-f{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border-radius:999px;background:#fff;color:var(--kd-navy);font-size:14px;font-weight:700;white-space:nowrap;box-shadow:0 18px 40px -14px #00006666,0 0 0 1px #0000660f;animation:kd-fly .75s var(--kd-spring) backwards,kd-drift 5s ease-in-out .75s infinite alternate}
.kd-f svg{flex:none;color:#3672ba}
.kd-f.is-dark{background:var(--kd-navy);color:#fff}
.kd-f.is-dark svg{color:var(--kd-sky)}
.kd-f.is-green{background:#0b6b3a;color:#fff}
.kd-f.is-green svg{color:#b8f5cf}
.kd-f.is-out{animation:kd-flyout .4s ease-in forwards}
.kd-p1{right:calc(100% - 34px + 100px*var(--kd-off));top:17%;--fx:120px;--fr:-14deg}
.kd-p2{left:calc(100% - 40px + 30px*var(--kd-off));top:27%;--fx:-110px;--fr:12deg}
.kd-p3{right:calc(100% - 30px + 60px*var(--kd-off));top:50%;--fx:120px;--fr:10deg}
.kd-p4{left:calc(100% - 46px + 34px*var(--kd-off));top:61%;--fx:-110px;--fr:-10deg}
.kd-p5{right:calc(100% - 38px + 80px*var(--kd-off));top:73%;--fx:120px;--fr:-8deg}
/* Chosen listing lifted out of the chat */
.kd-fcard{display:block;right:calc(100% - 60px + 90px*var(--kd-off));top:19%;width:208px;padding:7px 7px 12px;border-radius:18px;white-space:normal;--fx:150px;--fr:-16deg;transform-style:preserve-3d}
.kd-fcard .kd-photo{height:118px;border-radius:12px}
.kd-fcard b{display:block;margin:10px 6px 0;font-size:15px;line-height:1.25;color:var(--kd-ink)}
.kd-fcard span{display:block;margin:2px 6px 0;font-size:13px;font-weight:500;color:var(--kd-muted)}
.kd-stamp{position:absolute;right:-18px;top:92px;padding:5px 12px;border:2.5px solid currentColor;border-radius:8px;background:#fff;color:#0b6b3a;font-size:13px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;transform:translateZ(40px) rotate(-9deg);animation:kd-slam .5s cubic-bezier(.2,1.6,.4,1) backwards;box-shadow:0 10px 24px -10px #0b6b3a88}
/* Booked seal */
.kd-seal{left:calc(100% - 78px + 30px*var(--kd-off));top:9%;width:108px;height:108px;padding:0;justify-content:center;flex-direction:column;gap:2px;border-radius:50%;background:var(--kd-navy);color:#fff;font-size:15px;letter-spacing:.4px;animation:kd-slam .6s cubic-bezier(.2,1.6,.4,1) backwards,kd-drift 5s ease-in-out .6s infinite alternate;box-shadow:0 0 0 5px #fff,0 0 0 7px var(--kd-navy),0 26px 50px -16px #000066aa}
.kd-seal svg{color:var(--kd-sky)}
.kd-confetti{position:absolute;left:50%;top:42%;width:0;height:0;z-index:7;pointer-events:none;transform:translateZ(90px)}
.kd-confetti i{position:absolute;left:0;top:0;width:var(--s,8px);height:calc(var(--s,8px)*.5);border-radius:2px;background:var(--c);opacity:0;animation:kd-confetti var(--t,1.6s) cubic-bezier(.15,.7,.3,1) var(--d,0s) forwards}

.kd-in{animation:kd-pop .45s var(--kd-spring) backwards}
.kd-msg.out.kd-in{animation:kd-sendup .5s var(--kd-spring) backwards}
.kd-card.kd-in{animation:kd-deal .65s var(--kd-spring) backwards}
.kd-instant .kd-in,.kd-instant .kd-chip{animation:none}

@media(prefers-reduced-motion:no-preference){
  .kd-enter{opacity:0;transform:translateY(120px) rotateY(-55deg) rotateX(18deg) scale(.8)}
  .kd-live .kd-enter{opacity:1;transform:none;transition:opacity .6s ease,transform 1.5s cubic-bezier(.2,1.25,.3,1)}
}

@keyframes kd-pop{from{opacity:0;transform:translateY(10px) scale(.8)}}
@keyframes kd-sendup{from{opacity:0;transform:translate(10px,46px) scale(.55)}}
@keyframes kd-deal{from{opacity:0;transform:translateX(90px) rotate(7deg) scale(.9)}}
@keyframes kd-rise{from{opacity:0;transform:translateY(16px)}}
@keyframes kd-bump{0%{transform:scale(.9)}55%{transform:scale(1.08)}100%{transform:none}}
@keyframes kd-dot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-3px);opacity:1}}
@keyframes kd-spin{to{transform:rotate(1turn)}}
@keyframes kd-caret{50%{opacity:0}}
@keyframes kd-tap{0%{opacity:0;transform:scale(1.6)}30%{opacity:1;transform:scale(.8)}100%{opacity:0;transform:scale(1.3)}}
@keyframes kd-ping{from{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(1.7)}}
@keyframes kd-shimmer{to{background-position:-250% 0}}
@keyframes kd-sweep{to{transform:translateX(100%)}}
@keyframes kd-burns{from{background-size:235% auto}to{background-size:275% auto}}
@keyframes kd-draw{to{stroke-dashoffset:0}}
@keyframes kd-flood{to{transform:scale(22);opacity:0}}
@keyframes kd-bob{0%,100%{transform:translateY(-7px) rotateZ(-.4deg)}50%{transform:translateY(7px) rotateZ(.4deg)}}
@keyframes kd-aura{from{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.12)}to{transform:rotate(360deg) scale(1)}}
@keyframes kd-sheen{0%,62%{transform:translateX(-60%)}100%{transform:translateX(60%)}}
@keyframes kd-ring{from{opacity:.9;transform:scale(.7)}to{opacity:0;transform:scale(2.5)}}
@keyframes kd-thump{35%{transform:scale(.985) translateY(2px)}70%{transform:scale(1.008)}}
@keyframes kd-jump{0%{transform:none}25%{transform:translateY(-22px) scale(1.03) rotateZ(-1.5deg)}55%{transform:translateY(4px) scale(.99) rotateZ(.8deg)}100%{transform:none}}
@keyframes kd-fly{from{opacity:0;transform:translate3d(var(--fx,0),30px,-160px) rotate(var(--fr,0deg)) scale(.3)}}
@keyframes kd-drift{from{translate:0 -5px}to{translate:0 6px}}
@keyframes kd-flyout{to{opacity:0;transform:translate3d(0,-26px,-80px) scale(.7);filter:blur(4px)}}
@keyframes kd-slam{0%{opacity:0;scale:2.6}60%{opacity:1}100%{scale:1}}
@keyframes kd-confetti{0%{opacity:1;transform:translate(0,0) rotate(0) scale(.2)}18%{opacity:1;transform:translate(calc(var(--dx)*.75),calc(var(--dy)*.9)) rotate(calc(var(--rot)*.3)) scale(1)}100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) + 260px)) rotate(var(--rot)) scale(.9)}}

@media(max-width:1180px){.kora-demo{--kd-off:.35}.kd-fcard{width:176px}.kd-fcard .kd-photo{height:96px}}
@media(max-width:900px){
  .kora-demo,.kora-demo.kd-ready{grid-template-columns:1fr;gap:36px}
  .kd-ready .kd-stage{order:-1}
  .kd-ready .kd-steps{max-width:none}
  .kd-ready .kd-step{column-gap:16px;padding:14px 0}
  .kd-ready .kd-steps::before,.kd-ready .kd-steps::after{top:28px;bottom:28px}
  .kd-num{margin-bottom:16px}
  .kd-scene{--rx0:0deg;--ry0:0deg;max-width:100%}
  .kd-phone{width:min(100%,320px);height:min(600px,78svh);box-shadow:0 0 0 1px #2a2a3a inset,0 40px 70px -30px #00006677}
  .kd-aura{inset:-6% -12%;filter:blur(46px)}
  .kd-f:not(.kd-seal){display:none}
  .kd-seal{left:auto;right:-8px;top:38px;width:88px;height:88px;font-size:13px}
  .kd-ring{width:260px;height:260px;margin:-130px 0 0 -130px}
}
@media(prefers-reduced-motion:reduce){
  .kora-demo *,.kora-demo ::before,.kora-demo ::after{animation:none!important;transition:none!important}
  .kd-aura,.kd-screen::after{display:none}
  .kd-scene{--rx0:0deg;--ry0:0deg}
  .kd-ready .kd-step>div{opacity:1!important;transform:none!important}
  .kd-step.is-active .kd-num{transform:none}
  .is-read .kd-meta svg,.kd-meta svg{color:var(--kd-wa-tick)}
  .kd-draw path{stroke-dashoffset:0}
}