.cld-wrap{margin:0 0 14px}
.cld-btn{box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;min-height:50px;margin:0;padding:10px 18px;border:1.5px solid #1b1b1b;border-radius:3px;background:#fff;color:#1b1b1b;cursor:pointer;font:inherit;line-height:1.2;text-align:left;transition:background .2s,color .2s,border-color .2s}
.cld-btn:hover{background:#1b1b1b;color:#fff}
.cld-btn:focus-visible{outline:2px solid #1b1b1b;outline-offset:2px}
.cld-dot{position:relative;flex:none;width:9px;height:9px;border-radius:50%;background:#a3a3a3}
.cld-label{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.cld-sub{margin-left:auto;font-size:12px;opacity:.72;white-space:nowrap}
.cld-btn.is-live{border-color:#e0353b}
.cld-btn.is-live .cld-dot{background:#e0353b}
.cld-btn.is-live .cld-dot::after{content:"";position:absolute;inset:-5px;border:2px solid #e0353b;border-radius:50%;animation:cld-pulse 1.6s ease-out infinite}
.cld-btn.is-live .cld-sub{color:#e0353b;opacity:1;font-weight:600}
.cld-btn.is-live:hover{background:#e0353b;color:#fff}.cld-btn.is-live:hover .cld-sub{color:#fff}.cld-btn.is-live:hover .cld-dot{background:#fff}
@keyframes cld-pulse{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.4);opacity:0}}
body.cld-lock{overflow:hidden}
.cld-modal{position:fixed;inset:0;z-index:999999;display:grid;place-items:center;padding:16px;font-family:inherit;color:#1b1b1b}
.cld-modal[hidden],.cld-modal [hidden]{display:none!important}
.cld-backdrop{position:absolute;inset:0;background:rgba(14,14,16,.6);backdrop-filter:blur(2px)}
.cld-panel{position:relative;box-sizing:border-box;width:min(440px,100%);max-height:calc(100vh - 32px);overflow:auto;background:#fff;border-radius:12px;box-shadow:0 24px 70px rgba(0,0,0,.3);padding:22px 24px 24px}
.cld-modal[data-step="live"] .cld-panel{width:min(780px,100%);padding:16px}
.cld-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.cld-head-t{display:flex;align-items:center;gap:10px}
.cld-head h3{margin:0;font-size:19px;font-weight:600;line-height:1.25;color:#1b1b1b}
.cld-head-a{display:flex;gap:4px}
.cld-ic{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:#f2f2f2;color:#1b1b1b;font-size:20px;line-height:1;cursor:pointer}
.cld-ic:hover{background:#e6e6e6}
.cld-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:3px;background:#e0353b;color:#fff;font-size:11px;font-weight:700;letter-spacing:.12em}
.cld-badge i{width:6px;height:6px;border-radius:50%;background:#fff;animation:cld-blink 1.2s infinite}
@keyframes cld-blink{50%{opacity:.3}}
.cld-lead{margin:0 0 18px;font-size:15px;line-height:1.55;color:#4a4a4a;text-wrap:pretty}
.cld-lead b{color:#1b1b1b}
.cld-fields{display:flex;flex-direction:column;gap:12px;margin:0}
.cld-fields label{display:flex;flex-direction:column;gap:6px;margin:0}
.cld-fields label span{font-size:13px;font-weight:500;color:#1b1b1b}
.cld-fields input{box-sizing:border-box;width:100%;height:46px;margin:0;padding:0 14px;border:1px solid #d6d6d6;border-radius:6px;background:#fff;color:#1b1b1b;font:inherit;font-size:15px}
.cld-fields input:focus{outline:0;border-color:#1b1b1b;box-shadow:0 0 0 3px rgba(27,27,27,.08)}
.cld-code{height:58px!important;text-align:center;font-size:26px!important;letter-spacing:.5em;font-variant-numeric:tabular-nums}
.cld-err{min-height:0;margin:0;font-size:13px;color:#c42b30}.cld-err:empty{display:none}
.cld-primary{height:50px;margin:4px 0 0;border:0;border-radius:3px;background:#1b1b1b;color:#fff;font:inherit;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.cld-primary:hover{background:#000}.cld-primary:disabled{opacity:.5;cursor:wait}
.cld-fine{margin:0;font-size:12px;color:#757575;text-align:center}
.cld-links{display:flex;justify-content:space-between}
.cld-links button{padding:4px 0;border:0;background:none;color:#1b1b1b;font:inherit;font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cld-slots{display:flex;flex-direction:column;gap:8px;margin:0 0 16px;padding:0;list-style:none}
.cld-slots li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border:1px solid #e3e3e3;border-radius:6px;font-size:14px}
.cld-slots li.is-now{border-color:#e0353b;background:#fff6f6}
.cld-slots li b{font-size:12px;color:#e0353b}
.cld-wait{display:flex;align-items:center;gap:10px;margin:0;font-size:13px;color:#666}
.cld-wait i{flex:none;width:14px;height:14px;border:2px solid #d6d6d6;border-top-color:#1b1b1b;border-radius:50%;animation:cld-spin 1s linear infinite}
@keyframes cld-spin{to{transform:rotate(360deg)}}
.cld-stage{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:8px;background:#0d0d0f}
.cld-stage>video{width:100%;height:100%;object-fit:contain;display:block}
.cld-overlay{position:absolute;inset:0;display:grid;place-items:center;padding:20px;color:#fff;font-size:15px;text-align:center;background:rgba(13,13,15,.7)}
.cld-unmute{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);padding:10px 18px;border:0;border-radius:999px;background:#fff;color:#1b1b1b;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
/* customer's own camera: small corner view over the live demo, can be minimised to a round button */
.cld-pipwrap{position:absolute;right:12px;bottom:12px;z-index:2;width:24%;aspect-ratio:4/3;overflow:hidden;border:2px solid #fff;border-radius:6px;background:#222;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.cld-pipwrap[hidden]{display:none}
.cld-stage .cld-pipwrap>video.cld-pip{display:block;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.cld-pipbtn{position:absolute;top:4px;right:4px;display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:rgba(13,13,15,.6);color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cld-pipbtn span{display:block;width:11px;height:2px;border-radius:1px;background:#fff}
.cld-pipwrap.is-min{width:44px;height:44px;aspect-ratio:auto;border-radius:50%}
.cld-pipwrap.is-min>video.cld-pip{display:none}
.cld-pipwrap.is-min .cld-pipbtn{inset:0;width:100%;height:100%;border-radius:50%;background:#1b1b1b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 7l-7 5 7 5V7z'/%3E%3Crect x='1' y='5' width='15' height='14' rx='2'/%3E%3C/svg%3E") center/20px no-repeat}
.cld-pipwrap.is-min .cld-pipbtn span{display:none}
@media (max-width:560px){.cld-pipwrap{right:8px;bottom:8px;width:30%}.cld-pipbtn{width:32px;height:32px}.cld-pipwrap.is-min{width:44px;height:44px}}
.cld-offer{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:12px 0 0;padding:12px 14px;border:1.5px solid #5e9e1c;border-radius:8px;background:#f5faef}
.cld-offer-t{display:flex;flex-direction:column;gap:2px;flex:1 1 220px;min-width:0}
.cld-offer-t b{font-size:15px;color:#1b1b1b}.cld-offer-t span{font-size:13px;line-height:1.4;color:#3c4a2c}
.cld-offer-b{display:inline-grid;place-items:center;min-height:44px;padding:0 18px;border:0;border-radius:3px;background:#5e9e1c;color:#fff!important;font:inherit;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;white-space:nowrap}
.cld-offer-b:hover{background:#4f8717}.cld-offer-b:disabled{background:#9dbb7d;cursor:default;letter-spacing:.04em}
.cld-chip{position:relative;align-self:flex-start;margin:4px 0 2px;padding:6px 12px;border:1.5px dashed #5e9e1c;border-radius:4px;background:#fff;color:#1b1b1b;font:inherit;font-size:16px;font-weight:700;letter-spacing:.12em;cursor:copy;-webkit-tap-highlight-color:transparent}
.cld-chip::after{content:attr(data-hint);margin-left:10px;font-size:11px;font-weight:500;letter-spacing:.02em;color:#5e9e1c}
.cld-chip.is-copied{border-style:solid;background:#5e9e1c;color:#fff}.cld-chip.is-copied::after{content:none}
.cld-modal.is-mini .cld-chip::after{content:none}
.cld-modal.is-mini .cld-offer{display:none!important}
.cld-modal.is-mini.has-code .cld-offer{display:flex!important;margin:8px 0 0;padding:8px 10px;gap:8px}
.cld-modal.is-mini.has-code .cld-offer-t span,.cld-modal.is-mini.has-code .cld-offer-t b{display:none}
.cld-modal.is-mini.has-code .cld-offer-t{flex:1 1 auto}
.cld-modal.is-mini.has-code .cld-chip{margin:0;font-size:13px;padding:4px 8px}
.cld-modal.is-mini.has-code .cld-offer-b{min-height:34px;padding:0 10px;font-size:11px}
.cld-ctrls{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.cld-ctl{flex:1 1 auto;min-height:44px;padding:0 16px;border:1px solid #d6d6d6;border-radius:3px;background:#fff;color:#1b1b1b;font:inherit;font-size:14px;font-weight:500;cursor:pointer}
.cld-ctl:hover{border-color:#1b1b1b}.cld-ctl:disabled{opacity:.4;cursor:default}
.cld-ctl.is-on{border-color:#1b1b1b;background:#1b1b1b;color:#fff}
.cld-leave{flex:0 0 auto;color:#c42b30}.cld-leave:hover{border-color:#c42b30}
.cld-msgs{display:flex;flex-direction:column;gap:6px;max-height:120px;overflow:auto;margin-bottom:8px}
.cld-msgs:empty{display:none}
.cld-msg{font-size:14px;line-height:1.45}.cld-msg b{margin-right:6px}
.cld-msg.is-host b{color:#e0353b}
.cld-msg.is-sys{font-size:13px;color:#777}
.cld-chat{display:flex;gap:8px;margin:0}
.cld-chat input{flex:1;min-width:0;height:44px;padding:0 14px;border:1px solid #d6d6d6;border-radius:3px;font:inherit;font-size:14px}
.cld-chat input:focus{outline:0;border-color:#1b1b1b}
.cld-chat button{height:44px;padding:0 18px;border:0;border-radius:3px;background:#1b1b1b;color:#fff;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.cld-modal.is-mini{inset:auto 16px 16px auto;display:block;padding:0}
.cld-modal.is-mini .cld-backdrop,.cld-modal.is-mini .cld-ctrls,.cld-modal.is-mini .cld-msgs,.cld-modal.is-mini .cld-chat,.cld-modal.is-mini .cld-pipwrap{display:none!important}
.cld-modal.is-mini .cld-panel{width:320px;padding:10px}
.cld-modal.is-mini .cld-head{margin-bottom:8px}.cld-modal.is-mini .cld-head h3{font-size:14px}
@media (max-width:560px){
.cld-modal:not(.is-mini){place-items:end stretch;padding:0}
.cld-modal:not(.is-mini) .cld-panel{width:100%!important;max-height:94vh;border-radius:14px 14px 0 0;padding:18px 16px 22px}
.cld-modal.is-mini .cld-panel{width:240px}
.cld-modal:not(.is-mini) .cld-offer{padding:12px}
.cld-modal:not(.is-mini) .cld-offer-b{width:100%}
.cld-modal:not(.is-mini) .cld-chip{font-size:18px}
.cld-sub{display:none}
}
.cld-rec{margin:6px 0 0;font-size:10px;line-height:1.35;color:#757575;text-align:center}
.cld-modal.is-mini .cld-rec{display:none}
.cld-fields .cld-sms{margin:6px 0 0}
.cld-watch{position:absolute;left:10px;top:10px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:rgba(13,13,15,.72);color:#fff;font-size:12px;font-weight:600;line-height:1.4;pointer-events:none}
.cld-watch::before{content:"";width:7px;height:7px;border-radius:50%;background:#e0353b}
.cld-watch[hidden]{display:none}
.cld-modal.is-mini .cld-watch{left:3px;top:3px;gap:4px;padding:1px 6px 1px 5px;font-size:10px;font-weight:700;line-height:16px;letter-spacing:.01em;background:rgba(0,0,0,.82);-webkit-font-smoothing:antialiased}
.cld-modal.is-mini .cld-watch::before{width:5px;height:5px}
.cld-pres{position:absolute;left:10px;bottom:10px;z-index:2;display:flex;flex-direction:column;gap:1px;max-width:62%;padding:6px 10px;border-left:3px solid #e0353b;border-radius:4px;background:rgba(13,13,15,.78);color:#fff;line-height:1.3;pointer-events:none}
.cld-pres[hidden],.cld-pres span[hidden]{display:none}
.cld-pres b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cld-pres span{font-size:11px;color:#e6e6e6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cld-modal.is-mini .cld-pres{left:6px;bottom:6px;padding:3px 7px}.cld-modal.is-mini .cld-pres span{display:none}.cld-modal.is-mini .cld-pres b{font-size:11px}
.cld-watch,.cld-pres{background:rgba(13,13,15,.5)!important;text-shadow:0 1px 2px rgba(0,0,0,.65);opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
.cld-modal.cld-ov-on .cld-watch,.cld-modal.cld-ov-on .cld-pres{opacity:1;visibility:visible;transition:opacity .45s ease,visibility 0s}
.cld-modal.is-mini .cld-watch{background:rgba(0,0,0,.5)!important}
/* big video, compact coupon bar */
.cld-modal[data-step="live"]:not(.is-mini) .cld-panel{width:min(1100px,100%)}
.cld-modal[data-step="live"]:not(.is-mini) .cld-stage{max-height:calc(100vh - 250px);margin:0 auto}
.cld-modal:not(.is-mini) .cld-offer{flex-wrap:nowrap;gap:10px;margin:8px 0 0;padding:6px 8px 6px 12px;border-width:1px}
.cld-modal:not(.is-mini) .cld-offer-t{flex-direction:row;flex-wrap:wrap;align-items:center;gap:2px 10px;flex:1 1 auto}
.cld-modal:not(.is-mini) .cld-offer-t b{font-size:13px;white-space:nowrap}
.cld-modal:not(.is-mini) .cld-offer-t span{flex:1 1 200px;min-width:0;font-size:11px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cld-modal:not(.is-mini) .cld-chip{margin:0;padding:3px 8px;font-size:13px;letter-spacing:.1em}
.cld-modal:not(.is-mini) .cld-chip::after{margin-left:6px;font-size:10px}
.cld-modal:not(.is-mini) .cld-offer-b{flex:none;width:auto;min-height:34px;padding:0 14px;font-size:11px}
.cld-modal:not(.is-mini) .cld-ctrls{margin:10px 0}
@media (max-width:560px){
.cld-modal[data-step="live"]:not(.is-mini) .cld-panel{max-height:96vh;padding:12px 10px 16px}
.cld-modal[data-step="live"]:not(.is-mini) .cld-head{margin-bottom:8px}
.cld-modal[data-step="live"]:not(.is-mini) .cld-stage{aspect-ratio:1/1;max-height:58vh;margin:0 -4px;border-radius:6px}
.cld-modal:not(.is-mini) .cld-offer{padding:6px 6px 6px 10px}
.cld-modal:not(.is-mini) .cld-offer-t{flex-direction:column;align-items:flex-start;gap:3px}
.cld-modal:not(.is-mini) .cld-offer-t b{font-size:12px}
.cld-modal:not(.is-mini) .cld-offer-t span{display:none}
.cld-modal:not(.is-mini) .cld-chip{font-size:13px}
.cld-modal:not(.is-mini) .cld-chip::after{content:"copy"}
.cld-modal:not(.is-mini) .cld-offer-b{width:auto;min-height:36px;padding:0 12px}
.cld-ctl{min-height:40px;font-size:13px}
}
.cld-valid{display:none}
.cld-modal.is-mini.has-code .cld-valid:not([hidden]){display:block;flex-basis:100%;margin-top:-2px;font-size:10px;line-height:1.3;color:#3c4a2c}
@media (max-width:560px){
.cld-modal:not(.is-mini) .cld-offer{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:10px;row-gap:3px}
.cld-modal:not(.is-mini) .cld-offer-t{grid-column:1;grid-row:1 / span 2}
.cld-modal:not(.is-mini) .cld-offer-b{grid-column:2;grid-row:1}
.cld-modal:not(.is-mini) .cld-valid:not([hidden]){display:block;grid-column:2;grid-row:2;font-size:10px;line-height:1.2;font-weight:600;color:#3c4a2c;text-align:center;white-space:nowrap}
}
.cld-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* who is talking with the host — always visible to every viewer while someone is on air */
.cld-onair{position:absolute;top:10px;right:10px;z-index:3;display:flex;align-items:center;gap:7px;max-width:calc(100% - 140px);padding:5px 10px 5px 9px;border-radius:999px;background:rgba(13,13,15,.5);color:#fff;font-size:12px;font-weight:600;line-height:1.3;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.cld-onair[hidden]{display:none}
.cld-onair i{flex:none;width:8px;height:8px;border-radius:50%;background:#e0353b;animation:cld-blink 1.4s ease-in-out infinite}
.cld-onair span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cld-modal.is-mini .cld-onair{top:4px;right:4px;max-width:calc(100% - 70px);padding:2px 7px;font-size:10px}
.cld-pipwrap.is-muted::after{content:"\1F507";position:absolute;left:4px;bottom:4px;z-index:1;padding:1px 4px;border-radius:3px;background:rgba(13,13,15,.6);font-size:12px;line-height:1.3}
/* the host invited this customer to speak */
.cld-invite{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:8px 0 0;padding:10px 12px;border:1px solid #f3b9bb;border-radius:8px;background:#fdecec;color:#1b1b1b;font-size:14px;font-weight:600}
.cld-invite[hidden]{display:none}
.cld-invite span{flex:1 1 180px}
.cld-invite button{min-height:40px;padding:0 16px;border-radius:4px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.cld-invite-yes{border:0;background:#1b1b1b;color:#fff}
.cld-invite-no{border:1px solid #d6d6d6;background:#fff;color:#1b1b1b}
.cld-ctl.is-hand::before{content:"\270B";margin-right:6px;font-size:1.15em;line-height:1;vertical-align:-1px}