/* Wusora "Try it" demos: an overlay that opens from the button, lets the
   visitor brand a mock event (logo, name, colour) and click through a
   registration, scoring, marketing or check-in flow on a phone. Pure CSS +
   demo.js; nothing is saved or sent anywhere. */

.dm-open-btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:8px;padding:8px 14px;font:600 14px/1 Inter,system-ui,sans-serif;background:#fff;color:#000;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}
.dm-open-btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(255,255,255,.12)}
.dm-open-btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px #333}
.dm-open-btn svg{width:14px;height:14px}
.dm-tries{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}

.dm{position:fixed;inset:0;z-index:1000;display:none}
.dm.on{display:block}
.dm-back{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity .45s ease}
.dm.show .dm-back{opacity:1}
.dm-win{position:absolute;inset:18px;border-radius:22px;background:#07080b;box-shadow:inset 0 0 0 1px #1f1f1f,0 40px 120px rgba(0,0,0,.6);overflow:hidden;display:grid;grid-template-rows:auto 1fr;clip-path:circle(0px at var(--ox,50%) var(--oy,50%));transition:clip-path .75s cubic-bezier(.7,0,.2,1)}
.dm.show .dm-win{clip-path:circle(150% at var(--ox,50%) var(--oy,50%))}
.dm-head{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid #1a1a1a}
.dm-head .dm-kicker{font:600 11px/1 Inter,system-ui,sans-serif;letter-spacing:.16em!important;text-transform:uppercase!important;color:#808080}
.dm-head h2{margin:4px 0 0;font:600 20px/1.1 Figtree,Inter,sans-serif;color:#fff}
.dm-close{margin-left:auto;width:36px;height:36px;border-radius:10px;border:0;background:#141414;color:#ccc;font-size:20px;cursor:pointer}
.dm-close:hover{color:#fff;background:#1d1d1d}
.dm-body{display:grid;grid-template-columns:360px 1fr;min-height:0}
.dm-panel{border-right:1px solid #1a1a1a;padding:20px;overflow:auto;display:flex;flex-direction:column;gap:18px}
.dm-stage{position:relative;display:flex;align-items:center;justify-content:center;gap:34px;padding:24px;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--brand) 18%,transparent),transparent 60%),#07080b}
.dm-anim{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
.dm.show .dm-anim{opacity:1;transform:none}
.dm.show .dm-anim:nth-child(2){transition-delay:.12s}.dm.show .dm-anim:nth-child(3){transition-delay:.2s}.dm.show .dm-anim:nth-child(4){transition-delay:.28s}

/* make it yours */
.dm-brand{border-radius:14px;background:#0d0d0f;box-shadow:inset 0 0 0 1px #1f1f1f;padding:14px;display:grid;gap:12px}
.dm-brand h3,.dm-steps h3{margin:0;font:600 12px/1 Inter,sans-serif;letter-spacing:.14em!important;text-transform:uppercase!important;color:#808080}
.dm-logo-drop{display:flex;align-items:center;gap:12px;cursor:pointer}
.dm-logo-drop input{display:none}
.dm-logo-slot{width:56px;height:56px;border-radius:14px;flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff;color:#999;font:700 9px/1.1 Inter,sans-serif;text-align:center;letter-spacing:.06em!important;text-transform:uppercase!important}
.dm-logo-slot.empty{background:transparent;border:1.5px dashed #444}
.dm-logo-slot img{width:100%;height:100%;object-fit:contain}
.dm-logo-drop b{display:block;color:#fff;font:600 14px/1.3 Inter,sans-serif}
.dm-logo-drop small{color:#808080;font-size:12px}
.dm-field{display:grid;gap:6px}
.dm-field span{font:500 12px/1 Inter,sans-serif;color:#999}
.dm-field input{border:0;border-radius:9px;padding:10px 12px;background:#141414;box-shadow:inset 0 0 0 1px #262626;color:#fff;font:500 14px/1 Inter,sans-serif;outline:none}
.dm-field input:focus{box-shadow:inset 0 0 0 1px var(--brand)}
.dm-swatches{display:flex;gap:8px;flex-wrap:wrap}
.dm-swatches button{width:28px;height:28px;border-radius:50%;border:0;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);transition:transform .15s}
.dm-swatches button[aria-pressed="true"]{box-shadow:0 0 0 2px #07080b,0 0 0 4px #fff;transform:scale(1.08)}
.dm-start{border:0;border-radius:10px;padding:12px;background:var(--brand);color:var(--on-brand);font:700 14px/1 Inter,sans-serif;cursor:pointer}

/* steps list */
.dm-steps{display:grid;gap:10px}
.dm-steps ol{margin:0;padding:0;list-style:none;display:grid;gap:4px}
.dm-steps li{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:start;padding:9px 10px;border-radius:10px;color:#808080;font:500 13px/1.4 Inter,sans-serif;transition:background .3s,color .3s}
.dm-steps li i{width:22px;height:22px;border-radius:7px;background:#141414;box-shadow:inset 0 0 0 1px #262626;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:11px;color:#999}
.dm-steps li.now{background:#111;color:#fff}
.dm-steps li.now i{background:var(--brand);color:var(--on-brand);box-shadow:none}
.dm-steps li.done i{background:#46b78b;color:#06140f;box-shadow:none}
.dm-steps li b{display:block;color:inherit}
.dm-note{font:500 12px/1.5 Inter,sans-serif;color:#666}
.dm-actions{display:flex;flex-wrap:wrap;gap:8px}
.dm-actions button{border:0;border-radius:9px;padding:9px 12px;font:600 13px/1 Inter,sans-serif;cursor:pointer;background:#141414;color:#ddd;box-shadow:inset 0 0 0 1px #262626}
.dm-actions button.primary{background:var(--brand);color:var(--on-brand);box-shadow:none}
.dm-actions button:disabled{opacity:.4;cursor:default}

/* phone */
.dm-phone{position:relative;width:300px;height:620px;flex:none;border-radius:48px;background:#0a0a0a;padding:12px;box-shadow:0 0 0 1px #2a2a2a,0 0 0 6px #121212,0 40px 90px rgba(0,0,0,.6);transform:translateY(20px) scale(.96);opacity:0;transition:transform .7s cubic-bezier(.2,1,.3,1) .25s,opacity .5s ease .25s}
.dm.show .dm-phone{transform:none;opacity:1}
.dm-phone::before{content:"";position:absolute;left:50%;top:20px;width:92px;height:26px;border-radius:20px;background:#0a0a0a;transform:translateX(-50%);z-index:5}
.dm-screen{position:relative;width:100%;height:100%;border-radius:37px;overflow:hidden;background:#f7f7f8;color:#0c0d10;font:500 13px/1.4 Inter,system-ui,sans-serif}
.dm-sb{position:absolute;inset:0 0 auto;height:44px;display:flex;justify-content:space-between;align-items:center;padding:0 26px;font:600 13px/1 Inter,sans-serif;z-index:4;color:inherit}
.dm-view{position:absolute;inset:0;padding:56px 18px 18px;display:flex;flex-direction:column;gap:12px;overflow:auto;scrollbar-width:none;transition:transform .45s cubic-bezier(.3,1,.3,1),opacity .35s ease}
.dm-view.in{animation:dm-slide-in .45s cubic-bezier(.3,1,.3,1) both}
@keyframes dm-slide-in{from{transform:translateX(36px);opacity:0}to{transform:none;opacity:1}}
.dm-hdr{display:flex;align-items:center;gap:10px}
.dm-hdr .lg{width:38px;height:38px;border-radius:11px;flex:none;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center;font:800 7px/1.05 Inter,sans-serif;color:#9aa0aa;text-align:center;text-transform:uppercase!important}
.dm-hdr .lg.empty{background:transparent;border:1.5px dashed #b8bec8}
.dm-hdr .lg img{width:100%;height:100%;object-fit:contain}
.dm-hdr b{display:block;font:700 13px/1.2 Inter,sans-serif}
.dm-hdr small{color:#7a808a;font-size:11px}
.dm-h1{font:800 26px/1.05 Figtree,Inter,sans-serif;margin:4px 0 0}
.dm-sub{color:#6b7280;font-size:12px}
.dm-card{border-radius:16px;background:#fff;box-shadow:0 0 0 1px #eceef1;padding:12px}
.dm-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #f0f1f3}
.dm-row:last-child{border-bottom:0}
.dm-row small{display:block;color:#8a909a;font-size:11px}
.dm-btn{border:0;border-radius:14px;padding:13px;font:700 14px/1 Inter,sans-serif;background:var(--brand);color:var(--on-brand);cursor:pointer;width:100%;transition:transform .15s,filter .15s}
.dm-btn:active{transform:scale(.98)}
.dm-btn.dark{background:#0c0d10;color:#fff}
.dm-btn.soft{background:#eef0f3;color:#0c0d10}
.dm-in{border:0;border-radius:12px;padding:11px 12px;background:#fff;box-shadow:inset 0 0 0 1px #e3e6ea;font:500 14px/1 Inter,sans-serif;width:100%;box-sizing:border-box;outline:none;color:#0c0d10}
.dm-in:focus{box-shadow:inset 0 0 0 1.5px var(--brand)}
.dm-lbl{font:600 11px/1 Inter,sans-serif;color:#6b7280;margin-bottom:5px;display:block}
.dm-chip{display:flex;justify-content:space-between;align-items:center;gap:8px;border:0;width:100%;text-align:left;border-radius:12px;padding:11px 12px;background:#fff;box-shadow:inset 0 0 0 1px #e3e6ea;font:600 13px/1.25 Inter,sans-serif;cursor:pointer;color:#0c0d10;transition:box-shadow .2s,background .2s}
.dm-chip small{display:block;font-weight:500;color:#8a909a;font-size:11px}
.dm-chip[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--brand);background:color-mix(in srgb,var(--brand) 8%,#fff)}
.dm-chip .ck{width:20px;height:20px;border-radius:6px;box-shadow:inset 0 0 0 1.5px #c8cdd4;flex:none;display:flex;align-items:center;justify-content:center;color:var(--on-brand);font-size:12px}
.dm-chip[aria-pressed="true"] .ck{background:var(--brand);box-shadow:none}
.dm-total{display:flex;justify-content:space-between;align-items:baseline;font:700 14px/1 Inter,sans-serif;margin-top:auto;padding-top:4px}
.dm-total b{font:800 22px/1 Figtree,Inter,sans-serif}
.dm-prog{display:flex;gap:4px}
.dm-prog i{flex:1;height:4px;border-radius:4px;background:#e3e6ea;transition:background .3s}
.dm-prog i.on{background:var(--brand)}

/* splash inside the phone */
.dm-splash{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#fff;transition:opacity .45s ease,transform .45s ease}
.dm-splash.out{opacity:0;transform:translateY(-12px);pointer-events:none}
.dm-splash .lg{width:96px;height:96px;border-radius:26px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#fff;box-shadow:0 18px 40px rgba(0,0,0,.14);animation:dm-pop .6s cubic-bezier(.2,1.4,.4,1) both;font:800 11px/1.1 Inter,sans-serif;color:#9aa0aa;text-align:center;text-transform:uppercase!important}
.dm-splash .lg.empty{border:2px dashed #c8cdd4;box-shadow:none}
.dm-splash .lg img{width:100%;height:100%;object-fit:contain}
.dm-splash .nm{font:800 16px/1.2 Figtree,Inter,sans-serif;text-align:center;padding:0 24px;animation:dm-fade .5s ease .25s both}
.dm-splash .bar{width:70px;height:3px;border-radius:3px;background:var(--brand);transform-origin:left;animation:dm-bar 1s ease-out .2s both}
.dm-splash .pw{position:absolute;bottom:26px;display:flex;align-items:center;gap:6px;font:500 10px/1 Inter,sans-serif;color:#8a909a;animation:dm-fade .4s ease .5s both}
.dm-splash .pw .t{width:16px;height:16px;border-radius:4px;background:#0b1424;display:flex;align-items:center;justify-content:center}
.dm-splash .pw b{font:700 12px/1 Figtree,Inter,sans-serif;color:#4b5563}
@keyframes dm-pop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
@keyframes dm-fade{from{opacity:0}to{opacity:1}}
@keyframes dm-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.dm-biglogo{width:88px;height:88px;border-radius:24px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#fff;box-shadow:0 18px 40px rgba(0,0,0,.12);font:800 10px/1.1 Inter,sans-serif;color:#9aa0aa;text-align:center;text-transform:uppercase!important}
.dm-biglogo.empty{background:transparent;border:2px dashed #c8cdd4;box-shadow:none}
.dm-biglogo img{width:100%;height:100%;object-fit:contain}

/* success */
.dm-check{width:64px;height:64px;border-radius:50%;background:#46b78b;color:#fff;display:flex;align-items:center;justify-content:center;margin:6px auto 0;animation:dm-pop .6s cubic-bezier(.2,1.4,.4,1) both;font-size:30px}
.dm-qr{width:150px;height:150px;margin:0 auto;display:block;border-radius:12px;background:#fff;padding:8px;box-shadow:0 0 0 1px #eceef1}
.dm-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:7}
.dm-confetti i{position:absolute;top:-12px;width:7px;height:12px;border-radius:2px;animation:dm-fall var(--d,1.6s) cubic-bezier(.3,.6,.4,1) var(--dl,0s) forwards}
@keyframes dm-fall{to{transform:translate(var(--x,0),680px) rotate(var(--r,540deg));opacity:.9}}
.dm-spin{width:28px;height:28px;border-radius:50%;border:3px solid #e3e6ea;border-top-color:var(--brand);animation:dm-rot .8s linear infinite;margin:0 auto}
@keyframes dm-rot{to{transform:rotate(360deg)}}

/* judge tablet */
.dm-tab{width:440px;max-width:44vw;flex:none;border-radius:26px;background:#0a0a0a;padding:12px;box-shadow:0 0 0 1px #2a2a2a,0 0 0 6px #121212,0 40px 90px rgba(0,0,0,.6);opacity:0;transform:translateY(20px);transition:transform .7s cubic-bezier(.2,1,.3,1) .15s,opacity .5s ease .15s}
.dm.show .dm-tab{opacity:1;transform:none}
.dm-tab .scr{border-radius:16px;background:#0b1424;color:#eee8dc;padding:16px;display:grid;gap:12px;font:500 13px/1.4 Inter,sans-serif;min-height:360px}
.dm-tab .top{display:flex;justify-content:space-between;align-items:flex-start}
.dm-tab .top b{display:block;font:800 20px/1.1 Figtree,Inter,sans-serif;color:#fff}
.dm-tab .top small{color:#8492a8;font-size:11px}
.dm-tab .clock{font:800 28px/1 "Barlow Condensed",Figtree,sans-serif;color:var(--brand);text-align:right}
.dm-tab .clock small{display:block;font:500 10px/1 Inter,sans-serif;color:#8492a8;margin-top:3px}
.dm-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dm-pad button{border:0;border-radius:12px;padding:12px 6px;background:#111d31;box-shadow:inset 0 0 0 1px #22334f;color:#eee8dc;font:700 13px/1.15 Inter,sans-serif;cursor:pointer;transition:transform .12s,background .2s}
.dm-pad button small{display:block;font-weight:500;color:#8492a8;font-size:10px;margin-top:3px}
.dm-pad button:active{transform:scale(.95)}
.dm-pad button.flash{background:color-mix(in srgb,var(--brand) 35%,#111d31)}
.dm-pad button:disabled{opacity:.35}
.dm-log{display:flex;flex-wrap:wrap;gap:6px;min-height:24px}
.dm-log span{border-radius:7px;padding:4px 8px;background:#17263e;font-size:11px;animation:dm-pop .35s ease both}
.dm-scores{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dm-scores div{border-radius:12px;background:#111d31;box-shadow:inset 0 0 0 1px #22334f;padding:10px;text-align:center}
.dm-scores small{display:block;color:#8492a8;font-size:10px}
.dm-scores b{font:800 22px/1 "Barlow Condensed",Figtree,sans-serif;color:#fff}
.dm-kar{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dm-kar .side{border-radius:14px;padding:12px;display:grid;gap:8px}
.dm-kar .aka{background:rgba(222,74,62,.12);box-shadow:inset 0 0 0 1px rgba(222,74,62,.45)}
.dm-kar .ao{background:rgba(96,165,250,.12);box-shadow:inset 0 0 0 1px rgba(96,165,250,.45)}
.dm-kar .pts{font:800 54px/1 "Barlow Condensed",Figtree,sans-serif;text-align:center;transition:transform .2s}
.dm-kar .pts.bump{transform:scale(1.18)}
.dm-kar .btns{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.dm-kar .btns button{border:0;border-radius:9px;padding:9px 4px;font:700 12px/1.1 Inter,sans-serif;cursor:pointer;color:#fff;background:rgba(255,255,255,.08)}
.dm-kar .btns button small{display:block;font-weight:500;font-size:9px;opacity:.7}
.dm-slider{display:grid;gap:4px}
.dm-slider label{display:flex;justify-content:space-between;font-size:12px;color:#bcc4d2}
.dm-slider input{width:100%;accent-color:var(--brand)}

/* athlete phone extras */
.dm-big{font:800 56px/1 "Barlow Condensed",Figtree,sans-serif;color:var(--brand);text-align:center}
.dm-live{display:inline-flex;align-items:center;gap:6px;font:700 10px/1 Inter,sans-serif;letter-spacing:.12em!important;text-transform:uppercase!important;color:#de4a3e}
.dm-live::before{content:"";width:7px;height:7px;border-radius:50%;background:#de4a3e;animation:dm-blink 1s infinite}
@keyframes dm-blink{50%{opacity:.25}}
.dm-award{border-radius:16px;padding:16px;text-align:center;color:#fff;background:linear-gradient(135deg,var(--brand),color-mix(in srgb,var(--brand) 55%,#000));position:relative;overflow:hidden}
.dm-award::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-100%);animation:dm-shine 1.6s ease .4s}
@keyframes dm-shine{to{transform:translateX(100%)}}
.dm-award small{display:block;font:600 10px/1 Inter,sans-serif;letter-spacing:.14em!important;text-transform:uppercase!important;opacity:.85}
.dm-award b{display:block;font:800 30px/1.1 Figtree,Inter,sans-serif;margin-top:6px}
.dm-kscore{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;text-align:center}
.dm-kscore b{font:800 44px/1 "Barlow Condensed",Figtree,sans-serif}
.dm-kscore .r{color:#de4a3e}.dm-kscore .b{color:#3b82f6}

/* lock screen + email */
.dm-lock{position:absolute;inset:0;background:linear-gradient(160deg,color-mix(in srgb,var(--brand) 55%,#0b1424),#0b1424);color:#fff;padding:70px 14px 18px;display:flex;flex-direction:column;gap:10px}
.dm-lock .time{text-align:center;font:300 64px/1 Figtree,Inter,sans-serif}
.dm-lock .date{text-align:center;font:500 14px/1 Inter,sans-serif;opacity:.85;margin-bottom:18px}
.dm-noti{border-radius:18px;padding:11px 12px;background:rgba(255,255,255,.18);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:grid;grid-template-columns:34px 1fr;gap:10px;cursor:pointer;animation:dm-drop .55s cubic-bezier(.2,1.3,.4,1) both;text-align:left;border:0;color:#fff;font:500 12px/1.35 Inter,sans-serif}
.dm-noti .lg{width:34px;height:34px;border-radius:9px;background:#fff;overflow:hidden;display:flex;align-items:center;justify-content:center;font:800 6px/1 Inter,sans-serif;color:#999}
.dm-noti .lg img{width:100%;height:100%;object-fit:contain}
.dm-noti b{display:block;font-size:12px}
@keyframes dm-drop{from{opacity:0;transform:translateY(-30px) scale(.96)}to{opacity:1;transform:none}}
.dm-mail-hero{border-radius:16px;padding:18px 14px;text-align:center;color:var(--on-brand);background:var(--brand)}
.dm-mail-hero .lg{width:52px;height:52px;margin:0 auto 10px;border-radius:14px;background:#fff;overflow:hidden;display:flex;align-items:center;justify-content:center;font:800 7px/1.1 Inter,sans-serif;color:#9aa0aa;text-transform:uppercase!important}
.dm-mail-hero .lg img{width:100%;height:100%;object-fit:contain}
.dm-mail-hero b{display:block;font:800 20px/1.15 Figtree,Inter,sans-serif}
.dm-stat{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dm-stat div{border-radius:10px;background:#0d0d0f;box-shadow:inset 0 0 0 1px #1f1f1f;padding:10px;text-align:center}
.dm-stat b{display:block;font:700 18px/1 Figtree,Inter,sans-serif;color:#fff}
.dm-stat small{color:#808080;font-size:11px}
.dm-jr{display:grid;gap:8px}
.dm-jr button{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;text-align:left;border:0;border-radius:11px;padding:11px 12px;background:#0d0d0f;box-shadow:inset 0 0 0 1px #1f1f1f;color:#fff;font:600 13px/1.3 Inter,sans-serif;cursor:pointer}
.dm-jr button small{display:block;color:#808080;font-weight:500;font-size:11px}
.dm-jr button span{font-size:11px;color:var(--brand)}
.dm-jr button.sent span{color:#46b78b}


/* journey emails, in a phone mail app */
.em-app{min-height:100%;background:#f2f2f5;color:#0c0d10;padding-top:46px}
.em-bar{display:flex;justify-content:space-between;align-items:center;padding:6px 14px 8px;color:#155dfc;font:600 14px/1 Inter,sans-serif}
.em-bar svg{display:none}
.em-meta{padding:4px 14px 12px;background:#f2f2f5}
.em-meta h4{margin:0 0 10px;font:700 17px/1.2 Figtree,Inter,sans-serif;letter-spacing:-.01em}
.em-from{display:flex;align-items:center;gap:9px}
.em-from .dm-ai{width:32px;height:32px;border-radius:50%;font-size:11px}
.em-from b{display:block;font-size:13px}
.em-from small{color:#8a909a;font-size:11px}
.em-mail{margin:0 10px 16px;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.06),0 10px 30px rgba(0,0,0,.06);animation:dm-pop .45s cubic-bezier(.2,1.2,.4,1) both}
.em-head{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;font:800 13px/1 Figtree,Inter,sans-serif;border-bottom:1px solid #f0f1f3}
.em-head .lg{width:24px;height:24px;border-radius:7px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#fff;box-shadow:0 0 0 1px #eee;font:800 4px/1 Inter,sans-serif;color:#aaa;text-align:center}
.em-head .lg.empty{border:1px dashed #ccc;box-shadow:none}
.em-head .lg img{width:100%;height:100%;object-fit:contain}
.em-hero{position:relative;overflow:hidden;padding:26px 18px 22px;color:var(--on-brand);background:radial-gradient(120% 100% at 100% 0%,color-mix(in srgb,var(--brand) 55%,#fff),transparent 55%),linear-gradient(150deg,var(--brand),color-mix(in srgb,var(--brand) 50%,#0b1424))}
.em-hero i{position:absolute;border-radius:50%;border:2px solid currentColor;opacity:.16}
.em-hero .o1{width:160px;height:160px;right:-50px;top:-60px}.em-hero .o2{width:90px;height:90px;right:30px;bottom:-40px}.em-hero .o3{width:40px;height:40px;right:110px;top:20px;background:currentColor;opacity:.1}
.em-tag{position:relative;display:inline-block;border-radius:999px;padding:5px 10px;background:rgba(255,255,255,.2);font:700 9.5px/1 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.em-hero b{position:relative;display:block;margin-top:12px;font:800 30px/1 Figtree,Inter,sans-serif;letter-spacing:-.02em}
.em-hero small{position:relative;display:block;margin-top:4px;font-size:12px;opacity:.85}
.em-body{padding:18px 16px 16px}
.em-body h3{margin:0;font:800 19px/1.15 Figtree,Inter,sans-serif;letter-spacing:-.01em}
.em-body p{margin:8px 0 0;color:#5b6170;font-size:12.5px;line-height:1.55}
.em-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:14px}
.em-grid span{border-radius:10px;padding:9px 8px;background:#f5f6f8;font-size:10.5px;color:#6b7280;text-align:center}
.em-grid b{display:block;font-size:13px;color:#0c0d10}
.em-count{display:flex;gap:6px;margin-top:14px}
.em-count span{flex:1;border-radius:10px;padding:8px 0;text-align:center;background:#0c0d10;color:#fff;font-size:10px}
.em-count b{display:block;font:800 20px/1 Figtree,Inter,sans-serif;color:var(--brand)}
.em-price{display:flex;align-items:baseline;gap:8px;margin-top:12px}
.em-price s{color:#9aa0aa;font-size:15px}
.em-price b{font:800 28px/1 Figtree,Inter,sans-serif;color:var(--brand)}
.em-price small{color:#6b7280;font-size:11px}
.em-prog{margin-top:14px;border-radius:12px;padding:12px;background:#f5f6f8;display:grid;gap:7px}
.em-prog div{display:flex;justify-content:space-between;font-size:12px}
.em-prog i{display:block;height:7px;border-radius:7px;background:#e3e6ea;overflow:hidden}
.em-prog u{display:block;width:75%;height:100%;border-radius:7px;background:var(--brand);animation:em-grow 1.2s cubic-bezier(.2,.9,.2,1) both}
@keyframes em-grow{from{width:0}}
.em-prog small{color:#6b7280;font-size:11px}
.em-cta{display:block;width:100%;margin-top:16px;border:0;border-radius:12px;padding:13px;background:var(--brand);color:var(--on-brand);font:800 14px/1 Inter,sans-serif;cursor:pointer;box-shadow:0 8px 20px color-mix(in srgb,var(--brand) 35%,transparent)}
.em-det{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:16px;padding-top:14px;border-top:1px solid #f0f1f3;font-size:11.5px;font-weight:700}
.em-det small{display:block;color:#9aa0aa;font-weight:500;font-size:10px;margin-bottom:2px}
.em-foot{padding:14px 16px 16px;background:#fafafb;text-align:center;display:grid;gap:6px;justify-items:center}
.em-foot small{color:#9aa0aa;font-size:10px;line-height:1.4}
.em-foot .pw b{color:#4b5563}
.em-soc{display:flex;gap:8px}
.em-soc i{width:22px;height:22px;border-radius:50%;background:#e9ebef}

/* door scan */
.dm-scan{position:relative;width:170px;height:170px;margin:0 auto;border-radius:16px;overflow:hidden}
.dm-scan::after{content:"";position:absolute;left:0;right:0;height:3px;background:#46b78b;box-shadow:0 0 16px #46b78b;animation:dm-scanline 1.2s ease-in-out 2}
@keyframes dm-scanline{0%{top:0}50%{top:calc(100% - 3px)}100%{top:0}}


/* school type picker (class demo) */
.dm-types{border-radius:14px;background:#0d0d0f;box-shadow:inset 0 0 0 1px #1f1f1f;padding:14px;display:grid;gap:10px}
.dm-types h3{margin:0;font:600 12px/1 Inter,sans-serif;letter-spacing:.14em!important;text-transform:uppercase!important;color:#808080}
.dm-type-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.dm-type-row button{display:grid;justify-items:center;gap:6px;border:0;border-radius:11px;padding:10px 4px;background:#141414;box-shadow:inset 0 0 0 1px #262626;color:#bbb;font:600 11px/1.1 Inter,sans-serif;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.dm-type-row button svg{width:20px;height:20px}
.dm-type-row button[aria-pressed="true"]{background:color-mix(in srgb,var(--brand) 18%,#141414);box-shadow:inset 0 0 0 1.5px var(--brand);color:#fff}
.dm-perks{display:flex;flex-wrap:wrap;gap:6px}
.dm-perks span,.dm-perkrow span{border-radius:999px;padding:4px 9px;font:500 11px/1.2 Inter,sans-serif;background:color-mix(in srgb,var(--brand) 14%,transparent);color:#ddd;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 40%,transparent)}
.dm-perkrow{display:flex;flex-wrap:wrap;gap:5px}
.dm-perkrow span{font-size:10px;padding:3px 8px;color:#bcc4d2}
.dm-hint{margin:0;font:500 13px/1.5 Inter,sans-serif;color:#999;width:100%}
.dm-hint b{color:#fff}

/* push notifications, beside the phone */
.dm-fit{display:flex;align-items:center;gap:30px;flex:none}
.dm-rail{width:250px;flex:none;align-self:stretch;max-height:620px;display:flex;flex-direction:column;gap:10px;border-radius:22px;padding:14px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px #1f1f1f;opacity:0;transform:translateX(16px);transition:opacity .5s ease .35s,transform .7s cubic-bezier(.2,1,.3,1) .35s}
.dm.show .dm-rail{opacity:1;transform:none}
.dm-rail-h{display:flex;align-items:center;gap:10px}
.dm-rail-h .ic-wrap{position:relative}
.dm-rail-h .dm-ai{width:38px;height:38px;border-radius:10px;font-size:13px}
.dm-rail-h .badge{position:absolute;top:-6px;right:-7px;min-width:18px;height:18px;border-radius:9px;background:#ff3b30;color:#fff;font:700 10.5px/18px Inter,sans-serif;font-style:normal;text-align:center;padding:0 5px;box-sizing:border-box;animation:dm-pop .35s ease both}
.dm-rail-h b{display:block;color:#fff;font:600 14px/1.2 Figtree,Inter,sans-serif}
.dm-rail-h small{color:#808080;font-size:11.5px}
.dm-rail-list{display:grid;gap:8px;align-content:start;overflow:auto;scrollbar-width:none;flex:1;min-height:0}
.dm-rail-empty{border-radius:14px;padding:14px;border:1px dashed #2a2a2a;color:#777;font:500 12px/1.5 Inter,sans-serif;text-align:center}
.dm-rn{display:grid;grid-template-columns:30px 1fr;gap:9px;align-items:start;border-radius:16px;padding:10px 11px;background:rgba(246,246,248,.92);color:#0c0d10;font:500 11.5px/1.35 Inter,sans-serif}
.dm-rn .dm-ai{width:30px;height:30px;border-radius:8px;font-size:11px;box-shadow:0 0 0 .5px rgba(0,0,0,.12)}
.dm-rn .hd{display:flex;justify-content:space-between;margin-bottom:1px}
.dm-rn .hd b{font-size:9.5px;font-weight:600;color:#6b7280;text-transform:uppercase!important;letter-spacing:.03em!important}
.dm-rn .hd small{font-size:9.5px;color:#9aa0aa}
.dm-rn > span > b{display:block;font-weight:700}
.dm-rn:not(.latest){opacity:.72}
.dm-rn.latest{box-shadow:0 0 0 2px var(--brand),0 10px 26px rgba(0,0,0,.35)}
.dm-rn.new{animation:dm-rail-in .7s cubic-bezier(.2,1.3,.4,1) both}
@keyframes dm-rail-in{0%{opacity:0;transform:translateY(-24px) scale(.9)}60%{opacity:1}100%{opacity:1;transform:none}}
.dm-rail-more{text-align:center;color:#666;font:500 11px/1 Inter,sans-serif}
.dm-rail .dm-homebtn{margin-top:auto}

/* push notifications */
.dm-pushes{border-radius:14px;background:#0d0d0f;box-shadow:inset 0 0 0 1px #1f1f1f;padding:14px;display:grid;gap:10px}
.dm-pushes h3{margin:0;display:flex;justify-content:space-between;font:600 12px/1 Inter,sans-serif;letter-spacing:.14em!important;text-transform:uppercase!important;color:#808080}
.dm-pushes h3 span{letter-spacing:0!important;text-transform:none!important;color:var(--brand)}
.dm-pushes p{margin:0;font:500 12px/1.5 Inter,sans-serif;color:#777}
.dm-pushes ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.dm-pushes li{display:grid;grid-template-columns:26px 1fr;gap:9px;align-items:start;font:500 12px/1.35 Inter,sans-serif;color:#999;animation:dm-pop .4s ease both}
.dm-pushes li .dm-ai{width:26px;height:26px;border-radius:7px;font-size:10px}
.dm-pushes li b{display:block;color:#fff;font-weight:600}
.dm-homebtn{border:0;border-radius:10px;padding:10px 12px;background:#141414;box-shadow:inset 0 0 0 1px #2a2a2a;color:#fff;font:600 13px/1 Inter,sans-serif;cursor:pointer}
.dm-homebtn:hover{box-shadow:inset 0 0 0 1px var(--brand)}
.dm-ai{display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff;flex:none}
.dm-ai img{width:80%;height:80%;object-fit:contain}
.dm-ai.ini{background:linear-gradient(145deg,color-mix(in srgb,var(--brand) 70%,#fff),var(--brand) 55%,color-mix(in srgb,var(--brand) 70%,#000));color:var(--on-brand);font:800 15px/1 Figtree,Inter,sans-serif;letter-spacing:-.02em}
.dm-push{position:absolute;left:8px;right:8px;top:46px;z-index:8;display:grid;grid-template-columns:36px 1fr;gap:10px;align-items:start;text-align:left;border:0;border-radius:20px;padding:10px 12px;background:rgba(246,246,248,.88);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);color:#0c0d10;box-shadow:0 14px 34px rgba(0,0,0,.28);font:500 12px/1.35 Inter,sans-serif;cursor:pointer}
.dm-push .dm-ai{width:36px;height:36px;border-radius:9px;font-size:13px;box-shadow:0 0 0 .5px rgba(0,0,0,.12)}
.dm-push .tx{display:block;min-width:0}
.dm-push .hd{display:flex;justify-content:space-between;font-size:10px;color:#6b7280;letter-spacing:.02em;margin-bottom:1px}
.dm-push .hd span:first-child{text-transform:uppercase!important;font-weight:600}
.dm-push b{display:block;font-weight:700}
.dm-push.in{animation:dm-push-in .65s cubic-bezier(.2,1.3,.4,1) both}
.dm-push.out{animation:dm-push-out .38s ease forwards}
@keyframes dm-push-in{from{opacity:0;transform:translateY(-60px) scale(.94)}to{opacity:1;transform:none}}
@keyframes dm-push-out{to{opacity:0;transform:translateY(-40px) scale(.96)}}

/* home screen with the visitor's app icon */
.dm-home{position:absolute;inset:0;padding:56px 16px 12px;display:flex;flex-direction:column;color:#fff;background:radial-gradient(90% 55% at 15% 8%,color-mix(in srgb,var(--brand) 85%,#fff) 0%,transparent 60%),radial-gradient(80% 50% at 95% 70%,color-mix(in srgb,var(--brand) 55%,#7c5cd6),transparent 65%),linear-gradient(170deg,color-mix(in srgb,var(--brand) 50%,#0b1424),#0b1424 75%);animation:dm-fade .4s ease both}
.dm-hg{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 6px;justify-items:center;grid-auto-flow:dense}
.dm-app{display:grid;justify-items:center;gap:4px;border:0;background:none;padding:0;color:#fff;font:500 9.5px/1.15 Inter,sans-serif;text-shadow:0 1px 2px rgba(0,0,0,.35);max-width:62px;text-align:center}
.dm-app .ic{width:50px;height:50px;border-radius:13px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(0,0,0,.22)}
.dm-app .ic svg{width:27px;height:27px}
.dm-app.mine{cursor:pointer;font-weight:600}
.dm-app.mine .ic-wrap{position:relative}
.dm-app.mine .ic{box-shadow:0 0 0 2px rgba(255,255,255,.75),0 8px 22px rgba(0,0,0,.35)}
.dm-app.mine.new .ic-wrap{animation:dm-install 1.1s cubic-bezier(.2,1.5,.4,1) .2s both}
.dm-app.mine.new .ic-wrap::after{content:"";position:absolute;inset:-6px;border-radius:18px;box-shadow:0 0 0 2px #fff;opacity:0;animation:dm-ping 1.6s ease-out 1.2s 2}
@keyframes dm-install{from{opacity:0;transform:scale(.2) translateY(-40px)}to{opacity:1;transform:none}}
@keyframes dm-ping{0%{opacity:.9;transform:scale(.9)}100%{opacity:0;transform:scale(1.35)}}
.dm-app .badge{position:absolute;top:-6px;right:-7px;min-width:19px;height:19px;border-radius:10px;background:#ff3b30;color:#fff;font:700 11px/19px Inter,sans-serif;font-style:normal;text-align:center;padding:0 5px;box-sizing:border-box;box-shadow:0 0 0 2px rgba(0,0,0,.08);animation:dm-pop .35s ease both}
.dm-widget{grid-column:span 2;grid-row:span 2;align-self:stretch;width:100%;box-sizing:border-box;border-radius:20px;padding:11px 12px;background:rgba(255,255,255,.9);color:#0c0d10;display:flex;flex-direction:column;gap:2px;text-shadow:none;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.dm-widget .day{font:700 9.5px/1 Inter,sans-serif;color:#ff3b30;text-transform:uppercase!important;letter-spacing:.06em!important}
.dm-widget .num{font:300 30px/1 Figtree,Inter,sans-serif}
.dm-widget .ev{margin-top:auto;border-left:3px solid var(--brand);padding-left:7px;display:grid;gap:2px}
.dm-widget .ev b{font:700 11px/1.15 Inter,sans-serif}
.dm-widget .ev small{font:500 9px/1.2 Inter,sans-serif;color:#6b7280}
.dm-phone.static{opacity:1;transform:none;transition:none;margin:0 auto}
.dm-home-tip{margin:14px auto 0;max-width:220px;text-align:center;border-radius:12px;padding:8px 10px;background:rgba(0,0,0,.28);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font:500 11px/1.35 Inter,sans-serif;animation:dm-fade .5s ease 1s both}
.dm-dock{margin-top:auto;border-radius:26px;padding:10px 12px;background:rgba(255,255,255,.2);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);display:grid;grid-template-columns:repeat(4,1fr);justify-items:center}

/* restaurant inventory */
.iv-list{display:grid;gap:2px}
.iv-r{display:grid;grid-template-columns:1fr 70px 80px 54px;gap:8px;align-items:center;padding:6px 8px;border-radius:9px;font-size:12px}
.iv-r small{display:block;color:#5c6c86;font-size:10px}
.iv-r.low{background:rgba(222,74,62,.1);box-shadow:inset 0 0 0 1px rgba(222,74,62,.4)}
.iv-r.flash{animation:dm-pop .45s ease both}
.iv-q{font-variant-numeric:tabular-nums;color:#eee8dc}
.iv-bar{height:5px;border-radius:5px;background:#17263e;overflow:hidden}
.iv-bar i{display:block;height:100%;border-radius:5px;transition:width .6s ease}
.iv-s{text-align:right;font-weight:700;color:#8492a8;font-size:11px}
.iv-r.low .iv-s{color:#ff8a80}
.iv-order{border-radius:12px;padding:10px;background:#111d31;box-shadow:inset 0 0 0 1px #22334f;display:grid;gap:6px}
.iv-order.ok{background:rgba(70,183,139,.12);box-shadow:inset 0 0 0 1px #46b78b}
.iv-order.ok b{color:#46b78b}
.iv-oh{display:flex;justify-content:space-between}
.iv-oh span{color:var(--brand);font-weight:800}
.iv-c{display:flex;justify-content:space-between;align-items:center;padding:9px 12px}
.iv-c small{display:block;color:#8a909a;font-size:11px}
.iv-step{display:flex;align-items:center;gap:10px}
.iv-step b{min-width:22px;text-align:center;font:800 17px/1 Figtree,Inter,sans-serif}
.iv-step button{width:30px;height:30px;border:0;border-radius:9px;background:#eef0f3;color:#0c0d10;font:700 17px/1 Inter,sans-serif;cursor:pointer}
.iv-step button:active{background:var(--brand);color:var(--on-brand)}
.dm-photo{height:70px;border-radius:10px;background:linear-gradient(135deg,#c9b79c,#8d7a5f 55%,#5d4f3c);position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:6px 8px;color:#fff;font:600 10px/1 Inter,sans-serif;animation:dm-pop .45s ease both}
.dm-photo::before{content:"";position:absolute;inset:18px 30% 22px 12%;border-radius:4px;background:rgba(255,255,255,.25);box-shadow:60px 6px 0 -4px rgba(255,255,255,.18)}
.dm-photo span{position:relative;text-shadow:0 1px 2px rgba(0,0,0,.4)}

/* restaurant rewards */
.rw-cam{position:relative;margin:4px 0;border-radius:22px;height:390px;background:radial-gradient(circle at 50% 40%,#3a2f28,#141110 70%);display:flex;align-items:center;justify-content:center;overflow:hidden}
.rw-tent{width:170px;border-radius:14px;padding:12px;background:#fffaf2;color:#1d1a16;text-align:center;display:grid;gap:5px;justify-items:center;transform:perspective(500px) rotateX(10deg);box-shadow:0 20px 40px rgba(0,0,0,.5)}
.rw-tent small{font:700 9px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#8a7f70}
.rw-tent .lg{width:34px;height:34px;border-radius:9px;background:#fff;box-shadow:0 0 0 1px #eee;overflow:hidden;display:flex;align-items:center;justify-content:center;font:800 5px/1 Inter,sans-serif;color:#aaa;text-align:center}
.rw-tent .lg.empty{border:1px dashed #ccc;box-shadow:none}
.rw-tent .lg img{width:100%;height:100%;object-fit:contain}
.rw-tent b{font:800 14px/1.1 Figtree,Inter,sans-serif;color:var(--brand)}
.rw-tent span{font-size:10px;color:#6b6257}
.rw-tent .dm-qr{width:96px;height:96px;padding:4px}
.rw-frame{position:absolute;inset:60px 50px;border-radius:18px;box-shadow:0 0 0 2px rgba(255,255,255,.8);animation:rw-scan 1.6s ease-in-out infinite}
@keyframes rw-scan{50%{inset:56px 46px;box-shadow:0 0 0 2px var(--brand)}}
.rw-card{border-radius:20px;padding:16px;color:var(--on-brand);background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--brand) 60%,#fff),transparent 55%),linear-gradient(140deg,var(--brand),color-mix(in srgb,var(--brand) 55%,#000));box-shadow:0 14px 30px color-mix(in srgb,var(--brand) 35%,transparent);display:grid;gap:4px}
.rw-top{display:flex;justify-content:space-between;font:700 11px/1 Inter,sans-serif;opacity:.9}
.rw-pts{font:800 46px/1 Figtree,Inter,sans-serif;margin-top:8px}
.rw-card small{font-size:11px;opacity:.85}
.rw-bar{height:7px;border-radius:7px;background:rgba(255,255,255,.3);overflow:hidden;margin-top:6px}
.rw-bar i{display:block;height:100%;border-radius:7px;background:#fff;transition:width .8s cubic-bezier(.2,.9,.2,1)}
.rw-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;text-align:center}
.rw-stats span{border-radius:9px;background:#17263e;padding:7px;font-size:10px;color:#8492a8}
.rw-stats b{display:block;font:800 16px/1 Figtree,Inter,sans-serif;color:#fff}


/* device wrappers, tabs and the compact panel (tabs and strip show on phones) */
.dm-d{display:contents}
.dm-d[data-dev="rail"]{display:flex;align-self:stretch}
.dm-dev.dm-d{display:grid}
.dm-devtabs{display:none}
.dm-mstrip,.dm-hidepanel{display:none}
.dm-mtoast{display:none}
.dm-type-row.n2{grid-template-columns:repeat(2,1fr)}
.dm-type-row.n3{grid-template-columns:repeat(3,1fr)}
.dm-type-row.n5,.dm-type-row.n6{grid-template-columns:repeat(3,1fr)}

/* ---------- websites ---------- */
.ws-browser{width:720px;flex:none;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px #2a2a2a,0 40px 90px rgba(0,0,0,.6);opacity:0;transform:translateY(20px);transition:transform .7s cubic-bezier(.2,1,.3,1) .1s,opacity .5s ease .1s}
.dm.show .ws-browser{opacity:1;transform:none}
.ws-chrome{display:flex;align-items:center;gap:7px;height:36px;padding:0 12px;background:#1b1b1d;border-bottom:1px solid #2a2a2a}
.ws-chrome i{width:11px;height:11px;border-radius:50%;background:#ff5f57}.ws-chrome i:nth-child(2){background:#febc2e}.ws-chrome i:nth-child(3){background:#28c840}
.ws-url{margin:0 auto;display:flex;align-items:center;gap:6px;border-radius:7px;padding:5px 40px;background:#2a2a2d;color:#bbb;font:500 11.5px/1 Inter,sans-serif;transform:translateX(-20px)}
.ws-vp{height:480px;overflow:auto;scrollbar-width:thin;position:relative}
.ws-vp.phone{position:absolute;inset:44px 0 0;height:auto;scrollbar-width:none}
.ws-screen{background:#fff}
.ws{--ws-bg:#fff;--ws-ink:#0c0d10;--ws-muted:#6b7280;--ws-card:#f4f4f5;--ws-line:rgba(0,0,0,.08);--ws-radius:14px;--ws-head:800 1em/1 Figtree,Inter,sans-serif;container-type:inline-size;position:relative;min-height:100%;background:var(--ws-bg);color:var(--ws-ink);font:500 14px/1.5 Inter,system-ui,sans-serif}
.ws button{font:inherit;color:inherit;cursor:pointer}
.ws-nav{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:20px;padding:14px 28px;background:color-mix(in srgb,var(--ws-bg) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--ws-line)}
.ws-brand{display:flex;align-items:center;gap:9px;border:0;background:none;padding:0;font-weight:800;font-size:15px;letter-spacing:-.01em;white-space:nowrap;max-width:46%;overflow:hidden}
.ws-brand span:last-child{overflow:hidden;text-overflow:ellipsis}
.ws-mark{width:28px;height:28px;flex:none;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:var(--brand);color:var(--on-brand);font:800 11px/1 Figtree,Inter,sans-serif;overflow:hidden}
.ws-mark.img{background:#fff;box-shadow:0 0 0 1px var(--ws-line)}
.ws-mark img{width:84%;height:84%;object-fit:contain}
.ws-links{display:flex;gap:4px;margin-left:auto}
.ws-links button{border:0;background:none;padding:7px 11px;border-radius:999px;color:var(--ws-muted);font-weight:600;font-size:13px}
.ws-links button.on{color:var(--ws-ink);background:var(--ws-card)}
.ws-burger{display:none;border:0;background:none;padding:4px;margin-left:auto}
.ws-menu{position:sticky;top:57px;z-index:4;display:grid;gap:4px;padding:10px 16px 14px;background:var(--ws-bg);border-bottom:1px solid var(--ws-line);animation:dm-fade .25s ease both}
.ws-menu button{border:0;background:none;text-align:left;padding:10px 4px;font-weight:700;font-size:16px;border-bottom:1px solid var(--ws-line)}
.ws-menu .ws-btn{margin-top:6px;text-align:center;border:0}
.ws-btn{border:0;border-radius:999px;padding:12px 20px;background:var(--brand);color:var(--on-brand)!important;font-weight:700!important;font-size:14px;transition:transform .15s,filter .15s;white-space:nowrap}
.ws-btn:hover{filter:brightness(1.08)}.ws-btn:active{transform:scale(.97)}
.ws-btn.ghost{background:transparent;color:var(--ws-ink)!important;box-shadow:inset 0 0 0 1.5px var(--ws-line)}
.ws-btn.link{background:none;color:var(--brand)!important;padding-left:6px;padding-right:6px}
.ws-btn.mini{padding:7px 12px;font-size:12px}
.ws-btn.wide{width:100%;margin-top:10px}
.ws-cta{padding:9px 16px;font-size:13px}
.ws-k{display:inline-block;font:700 11px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
.ws-h1{margin:14px 0 0;font:var(--ws-head);font-size:52px;letter-spacing:-.035em;line-height:.98}
.ws-h1 em{font-style:normal;color:var(--brand)}
.ws-h2{margin:8px 0 0;font:var(--ws-head);font-size:32px;letter-spacing:-.025em;line-height:1.05}
.ws-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:center;padding:52px 28px 40px}
.ws-hero p,.ws-sec p,.ws-banner p,.ws-buy-copy p{color:var(--ws-muted);font-size:16px;margin:14px 0 0;max-width:420px}
.ws-hero.center{grid-template-columns:1fr;text-align:center;justify-items:center}
.ws-row2{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.ws-row2.center{justify-content:center}
.ws-art{position:relative;aspect-ratio:1/1;border-radius:24px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ws-chip{position:absolute;left:16px;bottom:16px;border-radius:999px;padding:7px 12px;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);font-size:12px;font-weight:700;color:#fff}
.ws-sec{padding:40px 28px}
.ws-sec.center{text-align:center}
.ws-narrow{max-width:460px;margin:0 auto}
.ws-sechead{display:flex;justify-content:space-between;align-items:baseline}
.ws-stats,.ws-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:0 28px;border-radius:var(--ws-radius);overflow:hidden;background:var(--ws-line)}
.ws-stats div,.ws-trio div{background:var(--ws-bg);padding:18px;text-align:center}
.ws-stats b,.ws-trio b{display:block;font:var(--ws-head);font-size:26px;letter-spacing:-.02em}
.ws-stats small,.ws-trio small{color:var(--ws-muted)}
.ws-cards{margin-top:20px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ws-cards.two{grid-template-columns:repeat(2,1fr)}
.ws-card{display:grid;gap:6px;text-align:left;border:0;background:none;padding:0}
.ws-card b{font-weight:800;font-size:15px}
.ws-card small{color:var(--ws-muted);font-size:12.5px;line-height:1.4}
.ws-ph{display:block;aspect-ratio:4/5;border-radius:var(--ws-radius);background:var(--ws-card);position:relative;overflow:hidden;transition:transform .4s cubic-bezier(.2,.9,.2,1)}
.ws-card:hover .ws-ph{transform:scale(1.02)}
.ws-row{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--ws-line)}
.ws-row small{display:block;color:var(--ws-muted);font-size:12.5px}
.ws-row .t{font-variant-numeric:tabular-nums;min-width:74px}
.ws-row.tot{grid-template-columns:1fr auto;border:0;font-size:15px}
.ws-ok{font-weight:800;color:#16a34a;white-space:nowrap}
.ws-lab{margin-top:18px;font:700 11px/1 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--ws-muted)}
.ws-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ws-chips button{border:0;border-radius:999px;padding:10px 16px;background:var(--ws-card);font-weight:700;font-size:13px;box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .2s,background .2s}
.ws-chips button.on{background:color-mix(in srgb,var(--brand) 14%,var(--ws-bg));box-shadow:inset 0 0 0 1.5px var(--brand)}
.ws-inputs{display:grid;gap:8px;margin-top:10px}
.ws-inputs span{border-radius:12px;padding:12px 14px;background:var(--ws-card);color:var(--ws-ink)}
.ws-done{margin-top:16px;border-radius:var(--ws-radius);padding:18px;background:color-mix(in srgb,#16a34a 10%,var(--ws-bg));box-shadow:inset 0 0 0 1.5px #16a34a;display:grid;gap:4px;justify-items:start;color:#16a34a;animation:dm-pop .45s cubic-bezier(.2,1.4,.4,1) both}
.ws-done b{color:var(--ws-ink);font-size:17px}
.ws-done small{color:var(--ws-muted)}
.ws-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:22px 28px;margin-top:20px;border-top:1px solid var(--ws-line);color:var(--ws-muted);font-size:12px}
.ws-foot > span:first-child{display:flex;align-items:center;gap:8px}
.ws-foot .ws-mark{width:20px;height:20px;border-radius:6px;font-size:8px}
.ws-pw b{color:var(--ws-ink)}
.ws-toast{position:sticky;bottom:14px;margin:-50px auto 0;width:max-content;max-width:90%;z-index:6;display:flex;align-items:center;gap:8px;border-radius:999px;padding:10px 16px;background:#0c0d10;color:#fff;font-weight:700;font-size:13px;box-shadow:0 12px 30px rgba(0,0,0,.3);animation:dm-push-in .5s cubic-bezier(.2,1.3,.4,1) both}
.ws-toast svg{color:#4ade80}

/* fitness: dark, condensed, loud */
.ws-fitness{--ws-bg:#0b0b0c;--ws-ink:#f5f5f4;--ws-muted:#a1a1aa;--ws-card:#18181b;--ws-line:rgba(255,255,255,.09);--ws-head:800 1em/.95 "Barlow Condensed",Figtree,sans-serif;--ws-radius:6px}
.ws-fitness .ws-h1,.ws-fitness .ws-h2{text-transform:uppercase;letter-spacing:-.01em;font-style:italic}
.ws-fitness .ws-h1{font-size:68px}
.ws-fitness .ws-btn{border-radius:6px;text-transform:uppercase;letter-spacing:.04em}
.fit-art{background:radial-gradient(70% 60% at 70% 30%,color-mix(in srgb,var(--brand) 75%,transparent),transparent 65%),repeating-linear-gradient(115deg,rgba(255,255,255,.04) 0 14px,transparent 14px 28px),linear-gradient(160deg,#1f1f23,#0b0b0c);color:#fff;border-radius:6px}
.fit-art svg{filter:drop-shadow(0 20px 30px rgba(0,0,0,.5))}
.ws-fitness .ws-ph{aspect-ratio:3/4}
.ws-fitness .ws-ph.p0{background:linear-gradient(160deg,color-mix(in srgb,var(--brand) 85%,#000),#111)}
.ws-fitness .ws-ph.p1{background:linear-gradient(200deg,#3f3f46,#0b0b0c)}
.ws-fitness .ws-ph.p2{background:linear-gradient(160deg,#52525b,#18181b)}
.ws-fitness .ws-ph.p3{background:linear-gradient(200deg,color-mix(in srgb,var(--brand) 55%,#18181b),#000)}
.ws-fitness .ws-ph::after{content:"";position:absolute;inset:auto 12px 12px;height:3px;background:var(--brand);border-radius:2px;width:30%}
.ws-plans{margin-top:22px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ws-plan{position:relative;border-radius:6px;padding:20px;background:var(--ws-card);display:grid;gap:6px;align-content:start}
.ws-plan.hot{box-shadow:inset 0 0 0 2px var(--brand)}
.ws-plan b{font-size:15px}
.ws-plan .pr{font:var(--ws-head);font-size:40px}
.ws-plan small{color:var(--ws-muted);margin-bottom:8px}
.ws-tag{position:absolute;top:-10px;right:14px;border-radius:4px;padding:3px 8px;background:var(--brand);color:var(--on-brand);font:800 10px/1.3 Inter,sans-serif;text-transform:uppercase;letter-spacing:.06em}
.ws-sched{margin-top:16px}

/* restaurant: warm paper and serif */
.ws-food{--ws-bg:#f6f1e7;--ws-ink:#1d1a16;--ws-muted:#7b7062;--ws-card:#ede5d6;--ws-line:rgba(29,26,22,.12);--ws-head:500 1em/1.02 "Playfair Display","Iowan Old Style",Georgia,serif}
.ws-food .ws-h1 em{font-style:italic;color:var(--brand)}
.ws-food .ws-k{color:#8c6f4a}
.food-art{border-radius:50%;background:radial-gradient(circle at 50% 50%,#2b231c 0 58%,transparent 59%),radial-gradient(circle at 30% 30%,#e8d9bf,#b9a07a);box-shadow:0 30px 60px rgba(60,40,20,.25)}
.food-art .plate{position:relative;width:62%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fbf7ef 0 60%,#efe6d4 61% 100%);box-shadow:inset 0 0 0 6px #fff,0 10px 30px rgba(0,0,0,.35)}
.food-art .plate i{position:absolute;border-radius:50%}
.food-art .plate i:nth-child(1){inset:28% 26% 30% 30%;background:radial-gradient(circle at 40% 35%,#8a3b22,#4a1e10)}
.food-art .plate i:nth-child(2){width:18%;height:18%;left:22%;top:52%;background:radial-gradient(circle,#f3d27a,#d9a83a)}
.food-art .plate i:nth-child(3){width:12%;height:12%;right:22%;top:30%;background:radial-gradient(circle,#7fa65a,#3e6b2a)}
.ws-food .ws-ph{aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fbf7ef 0 55%,#efe6d4 56%)}
.ws-food .ws-ph i{position:absolute;inset:28%;border-radius:50%}
.ws-food .ws-ph.d0 i{background:radial-gradient(circle at 40% 35%,#8a3b22,#4a1e10)}
.ws-food .ws-ph.d1 i{background:radial-gradient(circle at 40% 35%,#fffaf0,#e9dcc4);box-shadow:14px 6px 0 -6px #e3a14b}
.ws-food .ws-ph.d2 i{border-radius:12px;inset:32% 26%;background:linear-gradient(#e8c88a,#c79a52)}
.ws-food .ws-cards{grid-template-columns:repeat(3,1fr)}
.ws-food .ws-card{text-align:center;justify-items:center}
.ws-msec{margin-top:24px}
.ws-msec h3{margin:0 0 6px;font:500 20px/1 "Playfair Display",Georgia,serif;font-style:italic;color:var(--brand)}
.ws-mi{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;padding:10px 0}
.ws-mi i{border-bottom:1px dotted var(--ws-line);height:1px;align-self:end;margin-bottom:6px}
.ws-bagbar{position:sticky;bottom:12px;margin-top:20px;display:flex;justify-content:space-between;align-items:center;gap:10px;border-radius:999px;padding:8px 8px 8px 18px;background:#1d1a16;color:#f6f1e7;box-shadow:0 14px 30px rgba(0,0,0,.25);animation:dm-pop .4s ease both}
.ws-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 28px 10px}
.ws-strip span{border-radius:14px;padding:14px;background:var(--ws-card);font-size:13px}
.ws-strip b{display:block;font:500 16px/1.2 "Playfair Display",Georgia,serif}

/* product: quiet, centred, glossy */
.ws-product{--ws-bg:#f5f5f7;--ws-ink:#1d1d1f;--ws-muted:#6e6e73;--ws-card:#fff;--ws-head:700 1em/1.02 Figtree,Inter,sans-serif}
.ws-product .ws-h1{font-size:58px}
.ws-product .ws-k{color:#bf4800}
.ws-prod{position:relative;width:250px;height:300px;margin:26px auto 0}
.ws-prod .body{position:absolute;inset:10% 18%;border-radius:46% 46% 40% 40%/30% 30% 22% 22%;background:radial-gradient(80% 50% at 35% 25%,rgba(255,255,255,.55),transparent 60%),linear-gradient(160deg,var(--p2),var(--p1));box-shadow:0 40px 60px -20px rgba(0,0,0,.45),inset 0 -14px 30px rgba(0,0,0,.25);transition:background .5s}
.ws-prod .grille{position:absolute;left:28%;right:28%;top:40%;height:34%;border-radius:40%;background:radial-gradient(circle,rgba(0,0,0,.28) 1.2px,transparent 1.6px) 0 0/7px 7px;opacity:.7}
.ws-prod .glow{position:absolute;left:30%;right:30%;bottom:2%;height:8%;border-radius:50%;background:var(--brand);filter:blur(16px);opacity:.55}
.ws-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0 28px}
.ws-feat{border-radius:18px;padding:22px;background:#fff;display:grid;gap:8px;align-content:start}
.ws-feat svg{color:var(--brand)}
.ws-feat b{font-size:17px}
.ws-feat small{color:var(--ws-muted)}
.ws-specs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ws-specs div{border-top:1px solid var(--ws-line);padding-top:10px}
.ws-specs span{display:block;color:var(--ws-muted);font-size:12px}
.ws-buy{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center;padding:30px 28px}
.ws-sw{display:flex;gap:10px;margin-top:10px}
.ws-sw button{width:30px;height:30px;border-radius:50%;border:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.ws-sw button.on{box-shadow:0 0 0 2px var(--ws-bg),0 0 0 4px var(--ws-ink)}

/* store: editorial black and white */
.ws-shop{--ws-head:700 1em/1 Figtree,Inter,sans-serif;--ws-radius:4px}
.ws-ann{padding:8px;text-align:center;background:#0c0d10;color:#fff;font:600 11px/1 Inter,sans-serif;letter-spacing:.06em}
.ws-shop .ws-btn{border-radius:0;text-transform:uppercase;letter-spacing:.08em;font-size:12px}
.ws-banner{display:grid;grid-template-columns:1fr 1fr;align-items:center;margin:0 28px;margin-top:20px;background:#efe9df;min-height:300px;overflow:hidden}
.ws-banner > div{padding:30px}
.ws-banner .ws-btn{margin-top:18px}
.ws-garm{display:block;position:relative;aspect-ratio:3/4;background:#f1f0ee;overflow:hidden}
.ws-garm i{position:absolute;left:22%;right:22%;top:16%;bottom:12%;border-radius:18% 18% 6% 6%/12% 12% 4% 4%;background:linear-gradient(160deg,var(--g1),var(--g2));box-shadow:0 18px 30px -12px rgba(0,0,0,.35)}
.ws-garm i::before,.ws-garm i::after{content:"";position:absolute;top:2%;width:42%;height:40%;background:inherit;border-radius:20%}
.ws-garm i::before{left:-30%;transform:rotate(24deg)}.ws-garm i::after{right:-30%;transform:rotate(-24deg)}
.ws-garm.hero{height:100%;aspect-ratio:auto;background:transparent}
.ws-garm.sm{width:52px}
.ws-grid{margin-top:16px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ws-prodcard{display:grid;gap:4px}
.ws-prodcard b{font-size:13px;margin-top:6px}
.ws-prodcard small{color:var(--ws-muted)}
.ws-prodcard .ws-btn{justify-self:start;margin-top:4px}
.ws-pdp{display:grid;grid-template-columns:1fr 1fr;gap:26px;padding:28px}
.ws-pdp .pr{font-size:20px;font-weight:700;margin-top:6px}

/* construction: slate and safety yellow */
.ws-build{--ws-bg:#f4f4f2;--ws-ink:#16181d;--ws-muted:#5e6470;--ws-card:#e7e7e3;--ws-head:800 1em/.95 "Barlow Condensed",Figtree,sans-serif;--ws-radius:4px}
.ws-build .ws-nav{background:#16181d;color:#fff;border:0}
.ws-build .ws-links button{color:#a6abb5}.ws-build .ws-links button.on{background:#2a2e36;color:#fff}
.ws-build .ws-hero{background:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/28px 28px,#16181d;color:#fff}
.ws-build .ws-hero p{color:#a6abb5}
.ws-build .ws-h1,.ws-build .ws-h2{text-transform:uppercase}
.ws-build .ws-h1{font-size:66px}
.ws-build .ws-btn{border-radius:3px;text-transform:uppercase;letter-spacing:.06em}
.ws-build .ws-hero .ws-btn.ghost{color:#fff!important;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
.build-art{border-radius:4px;background:repeating-linear-gradient(-45deg,var(--brand) 0 16px,#16181d 16px 32px);color:#fff}
.build-art svg{background:#16181d;border-radius:4px;padding:18px;box-sizing:content-box;color:var(--brand)}
.ws-build .ws-stats{margin-top:-1px;border-radius:0}
.ws-card.svc{border-radius:4px;padding:18px;background:#fff;box-shadow:inset 0 0 0 1px var(--ws-line)}
.ws-card.svc svg{color:var(--brand)}
.ws-card.svc small{color:var(--brand);font-weight:700}
.ws-build .ws-ph{aspect-ratio:4/3}
.ws-build .ws-ph.b0{background:linear-gradient(160deg,#c9b99b,#7d6a50)}
.ws-build .ws-ph.b1{background:linear-gradient(160deg,#9aa6b2,#3f4a57)}
.ws-build .ws-ph.b2{background:linear-gradient(160deg,#b7a48a,#5f4d39)}
.ws-build .ws-ph.b3{background:linear-gradient(160deg,#6b7280,#1f2329)}
.ws-build .ws-ph::after{content:"";position:absolute;left:12px;bottom:12px;width:40px;height:4px;background:var(--brand)}
.ws-quote{margin:26px 0 0;border-left:4px solid var(--brand);padding:6px 0 6px 16px;font:600 18px/1.4 Figtree,Inter,sans-serif}
.ws-quote small{display:block;margin-top:6px;color:var(--ws-muted);font:500 13px/1 Inter,sans-serif}

/* birthday: bright, bouncy, rounded */
.ws-party{--ws-bg:#fff7fb;--ws-ink:#3b1d4a;--ws-muted:#8a6b97;--ws-card:#fff;--ws-line:rgba(59,29,74,.1);--ws-head:700 1em/1 Fredoka,Figtree,sans-serif;--ws-radius:24px;background:radial-gradient(circle at 10% 10%,#ffe0ef 0 8%,transparent 9%),radial-gradient(circle at 90% 20%,#d9f2ff 0 7%,transparent 8%),radial-gradient(circle at 80% 85%,#fff3c4 0 9%,transparent 10%),radial-gradient(circle at 15% 70%,#e3fbe3 0 6%,transparent 7%),#fff7fb}
.ws-party .ws-btn{border-radius:999px;font-family:Fredoka,Figtree,sans-serif;font-size:16px;box-shadow:0 6px 0 color-mix(in srgb,var(--brand) 60%,#000)}
.ws-party .ws-btn:active{transform:translateY(4px);box-shadow:0 2px 0 color-mix(in srgb,var(--brand) 60%,#000)}
.ws-party .ws-btn.ghost{box-shadow:inset 0 0 0 2px var(--ws-line),0 6px 0 rgba(59,29,74,.1);background:#fff}
.ws-party .ws-nav{background:rgba(255,255,255,.7)}
.ws-party .ws-k{color:#ff8a00;font-family:Fredoka,sans-serif;letter-spacing:.06em;font-size:14px}
.ws-invite{position:relative;overflow:hidden;padding-top:30px}
.ws-three{font:700 150px/1 Fredoka,Figtree,sans-serif;background:linear-gradient(180deg,#ff6fae,var(--brand) 55%,#8b5cf6);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 10px 0 rgba(59,29,74,.12));animation:ws-bounce 1.6s ease-in-out infinite}
@keyframes ws-bounce{50%{transform:translateY(-10px) rotate(-3deg)}}
.ws-party .ws-h1{margin-top:4px;font-size:44px}
.ws-when{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:18px}
.ws-when span{border-radius:18px;padding:10px 16px;background:#fff;box-shadow:0 4px 0 rgba(59,29,74,.08);font-size:13px;color:var(--ws-muted)}
.ws-when b{display:block;color:var(--ws-ink);font:600 16px/1.2 Fredoka,sans-serif}
.ws-count{display:flex;justify-content:center;gap:8px;margin-top:14px}
.ws-count span{width:64px;border-radius:16px;padding:8px 0;background:var(--brand);color:#fff;font-size:11px;font-weight:700}
.ws-count span:nth-child(2){background:#ff8a00}.ws-count span:nth-child(3){background:#8b5cf6}
.ws-count b{display:block;font:700 24px/1 Fredoka,sans-serif}
.ws-balloons{position:absolute;inset:0;pointer-events:none}
.ws-balloons i{position:absolute;width:46px;height:56px;border-radius:50% 50% 48% 48%;background:var(--brand);opacity:.9;animation:ws-float 5s ease-in-out infinite}
.ws-balloons i::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:50px;background:rgba(59,29,74,.25)}
.ws-balloons i:nth-child(1){left:6%;top:16%;background:#ff6fae}
.ws-balloons i:nth-child(2){left:16%;top:52%;background:#ffc93c;animation-delay:-1.2s;width:38px;height:46px}
.ws-balloons i:nth-child(3){right:8%;top:12%;background:#7dd3fc;animation-delay:-2.4s}
.ws-balloons i:nth-child(4){right:15%;top:48%;background:#a78bfa;animation-delay:-3.1s;width:40px;height:50px}
.ws-balloons i:nth-child(5){left:46%;top:-4%;background:#86efac;animation-delay:-1.8s;width:30px;height:38px}
@keyframes ws-float{50%{transform:translateY(-14px) rotate(4deg)}}
.ws-card.fun{border-radius:22px;padding:18px;background:#fff;box-shadow:0 6px 0 rgba(59,29,74,.07)}
.ws-card.fun .em{font-size:30px}
.ws-card.fun b{font:600 18px/1.1 Fredoka,sans-serif}
.ws-plan-day{margin-top:16px;border-radius:22px;padding:16px 18px;background:#fff;display:grid;gap:8px;box-shadow:0 6px 0 rgba(59,29,74,.07)}
.ws-plan-day b{font:600 18px/1 Fredoka,sans-serif}
.ws-plan-day i{font-style:normal;display:inline-block;min-width:48px;font-weight:800;color:var(--brand)}
.ws-chips.big button{padding:14px 18px;font:600 15px/1 Fredoka,sans-serif;background:#fff}
.ws-step{display:flex;align-items:center;gap:12px;margin-top:10px;border-radius:16px;padding:8px 10px 8px 16px;background:#fff}
.ws-step span{flex:1;font-weight:700}
.ws-step button{width:38px;height:38px;border:0;border-radius:50%;background:color-mix(in srgb,var(--brand) 14%,#fff);color:var(--brand);font:700 20px/1 Fredoka,sans-serif}
.ws-step b{min-width:20px;text-align:center;font:700 20px/1 Fredoka,sans-serif}
.ws-yay{position:relative;overflow:hidden;padding:50px 28px}
.ws-yay .big{font-size:64px;animation:ws-bounce 1.2s ease-in-out infinite}


/* website journeys: lead forms, checkout, the customer's phone, your funnel */
.ws-browser{position:relative}
.ws-ann{display:block;width:100%;border:0;cursor:pointer}
.ws-codebar{display:inline-flex;align-items:center;gap:7px;margin:4px 0 12px;border-radius:999px;padding:7px 12px;background:color-mix(in srgb,#16a34a 12%,var(--ws-bg));color:#15803d;font-size:12px;font-weight:600;animation:dm-pop .4s ease both}
.ws-codebar b{letter-spacing:.06em}
.ws-h2 s,.ws-bagbar s,.ws-row s{color:var(--ws-muted);font-weight:500;margin-right:4px}
.ws-capture{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:8px 28px 34px;border-radius:var(--ws-radius);padding:18px 20px;background:var(--ws-card)}
.ws-capture b{display:block;font-size:15px}
.ws-capture small{color:var(--ws-muted)}
.ws-capin{display:flex;align-items:center;gap:6px;border-radius:999px;padding:4px 4px 4px 14px;background:var(--ws-bg);box-shadow:inset 0 0 0 1px var(--ws-line)}
.ws-capin i{font-style:normal;color:var(--ws-muted);font-size:12.5px;white-space:nowrap}
.ws-capin .ws-btn{padding:8px 16px}

.ws-ov{position:absolute;inset:36px 0 0;z-index:12;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(10,11,14,.42);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:dm-fade .25s ease both}
.ws-screen .ws-ov{inset:0;align-items:flex-end;padding:0;border-radius:37px;overflow:hidden}
.ws-sheet{position:relative;width:340px;max-width:100%;max-height:100%;overflow:auto;scrollbar-width:none;border-radius:20px;padding:18px;background:#fff;color:#0c0d10;font:500 13px/1.45 Inter,system-ui,sans-serif;box-shadow:0 30px 70px rgba(0,0,0,.35);animation:ws-sheet-in .45s cubic-bezier(.2,1.2,.4,1) both;display:grid;gap:10px;align-content:start}
.ws-screen .ws-sheet{width:100%;border-radius:24px 24px 0 0;padding:18px 16px 22px;box-shadow:0 -10px 40px rgba(0,0,0,.25)}
@keyframes ws-sheet-in{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
.ws-sheet button{font:inherit;cursor:pointer}
.ws-x{position:absolute;top:10px;right:10px;width:28px;height:28px;border:0;border-radius:50%;background:#f1f2f4;color:#6b7280;font-size:17px!important;line-height:1}
.ws-sheet.lead{text-align:left}
.ws-sk{justify-self:start;border-radius:999px;padding:5px 10px;background:color-mix(in srgb,var(--brand) 14%,#fff);color:color-mix(in srgb,var(--brand) 75%,#000);font:700 10px/1 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.ws-sheet h3{margin:0;font:800 21px/1.15 Figtree,Inter,sans-serif;letter-spacing:-.01em;padding-right:24px}
.ws-sheet p{margin:-4px 0 0;color:#6b7280;font-size:12.5px}
.ws-sl{margin-top:2px;color:#6b7280;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.ws-sc{display:flex;flex-wrap:wrap;gap:6px;margin-top:-4px}
.ws-sc button{border:0;border-radius:999px;padding:7px 12px;background:#f1f2f4;color:#374151;font-size:12px!important;font-weight:600!important}
.ws-sc button.on{background:var(--brand);color:var(--on-brand)}
.ws-sf{display:grid;gap:6px}
.ws-sf span{border-radius:11px;padding:10px 12px;background:#f6f7f9;box-shadow:inset 0 0 0 1px #e8eaee;font-size:13px}
.ws-sb{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:0;border-radius:12px;padding:13px;background:var(--brand);color:var(--on-brand);font-weight:700!important;font-size:14px!important;box-shadow:0 8px 20px color-mix(in srgb,var(--brand) 35%,transparent)}
.ws-sb:disabled{opacity:.85;cursor:default}
.ws-sn{border:0;background:none;color:#9aa0aa;font-size:12px!important;padding:2px}
.ws-payh{display:flex;align-items:center;gap:6px;color:#16a34a;font-weight:700;font-size:12px;padding-right:30px}
.ws-payh .ws-x{top:12px}
.ws-pitem{display:flex;align-items:center;gap:10px;border-radius:14px;padding:10px;background:#f6f7f9}
.ws-pitem .ws-mark{width:36px;height:36px;border-radius:10px}
.ws-pitem b{display:block;font-size:13.5px}
.ws-pitem small{color:#6b7280;font-size:11.5px}
.ws-plines{display:grid;gap:5px;padding:0 2px}
.ws-plines span{display:flex;justify-content:space-between;color:#6b7280;font-size:12px}
.ws-plines span:last-child:not(:first-child){color:#0c0d10}
.ws-plines b{color:inherit;font-weight:600}
.ws-pcode{display:flex;justify-content:space-between;align-items:center;border-radius:10px;padding:8px 10px;background:color-mix(in srgb,#16a34a 10%,#fff);color:#15803d;font-size:12px;font-weight:700}
.ws-pcode span{display:flex;align-items:center;gap:6px;letter-spacing:.05em}
.ws-ptot{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid #eef0f2;padding:10px 2px 0}
.ws-ptot span{color:#6b7280;font-size:12px}
.ws-ptot b{font:800 24px/1 Figtree,Inter,sans-serif;letter-spacing:-.02em}
.ws-psign{display:flex;align-items:baseline;gap:10px;border-bottom:1px dashed #d1d5db;padding:4px 2px 6px}
.ws-psign small{color:#9aa0aa;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em}
.ws-psign i{font:italic 600 22px/1 "Playfair Display",Georgia,serif;color:#1f3a8a}
.ws-pcard{display:flex;align-items:center;gap:9px;border-radius:11px;padding:10px 12px;box-shadow:inset 0 0 0 1px #e5e7eb;color:#374151;font-size:12.5px}
.ws-pcard .visa{border-radius:4px;padding:3px 5px;background:#1a1f71;color:#fff;font:italic 800 9px/1 Inter,sans-serif;letter-spacing:.04em}
.ws-pcard .bank{display:flex;color:#155dfc}
.ws-apple{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;border:0;border-radius:12px;padding:12px;background:#000;color:#fff;font-weight:600!important;font-size:15px!important}
.ws-apple svg{fill:#fff;stroke:none}
.ws-pfoot{text-align:center;color:#9aa0aa;font-size:10.5px}
.ws-pfoot b{color:#4b5563}
.spin{width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:dm-rot .7s linear infinite}
.ws-paid{display:grid;justify-items:center;gap:4px;text-align:center;padding:8px 0 0}
.ws-paid .ok{display:flex;align-items:center;justify-content:center;width:64px;height:64px;margin-bottom:6px;border-radius:50%;background:#16a34a;color:#fff;animation:dm-pop .5s cubic-bezier(.2,1.5,.4,1) both;box-shadow:0 0 0 8px color-mix(in srgb,#16a34a 18%,#fff)}
.ws-paid b{font:800 24px/1.1 Figtree,Inter,sans-serif}
.ws-paid small{color:#6b7280;font-size:12px}
.ws-paid .ws-sb{margin-top:10px}

/* the customer's phone: texts and emails from the business */
.ws-msg{position:absolute;inset:44px 0 0;overflow:auto;scrollbar-width:none;background:#fff;animation:dm-fade .25s ease both}
.ws-msg .em-app{padding-top:0;min-height:100%}
.em-bar button{border:0;background:none;padding:0;color:inherit;font:inherit;cursor:pointer}
.em-skip{border-radius:999px;padding:4px 9px;background:#0c0d10;color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.02em}
.em-lines{display:grid;gap:6px;margin-top:14px;border-radius:12px;padding:12px;background:#f5f6f8}
.em-lines span{display:flex;justify-content:space-between;font-size:11.5px;color:#5b6170}
.em-lines b{color:#0c0d10}
.em-bag{display:grid;gap:8px;margin-top:14px}
.em-bag span{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;border-radius:12px;padding:8px;background:#f5f6f8;font-size:12px;color:#5b6170}
.em-bag i{grid-row:span 2;width:44px;height:52px;border-radius:8px;background:linear-gradient(160deg,var(--g1),var(--g2))}
.em-bag b{color:#0c0d10;font-size:12.5px;align-self:end}
.ms-app{display:flex;flex-direction:column;height:100%;background:#fff}
.ms-top{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;justify-items:start;padding:4px 14px 10px;border-bottom:1px solid #eef0f2;background:#f9f9fb}
.ms-top button{grid-row:span 2;border:0;background:none;color:#155dfc;padding:0;display:flex;cursor:pointer}
.ms-top .dm-ai{display:none}
.ms-top b{font-size:13.5px}
.ms-top small{color:#8a909a;font-size:10.5px}
.ms-thread{flex:1;overflow:auto;scrollbar-width:none;display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:12px 12px 16px}
.ms-thread > *{flex:none}
.ms-when{align-self:center;margin:8px 0 4px;color:#8a909a;font-size:10px;font-weight:600}
.ms-b{max-width:82%;border-radius:18px;padding:8px 12px;background:#e9e9eb;color:#0c0d10;font-size:12.5px;line-height:1.38;animation:dm-pop .35s ease both;transform-origin:left bottom}
.ms-b.out{align-self:flex-end;background:#0a84ff;color:#fff;transform-origin:right bottom}
.ms-chips{align-self:flex-end;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;margin-top:4px}
.ms-chips button{border:0;border-radius:999px;padding:8px 13px;background:#fff;box-shadow:inset 0 0 0 1.5px #0a84ff;color:#0a84ff;font:700 12px/1 Inter,sans-serif;cursor:pointer;animation:dm-pop .4s ease .2s both}
.ms-chips button:first-child{background:#0a84ff;color:#fff}
.ms-card{width:82%;border:0;padding:0;border-radius:18px;overflow:hidden;background:#e9e9eb;text-align:left;cursor:pointer;animation:dm-pop .4s ease both}
.ms-card-art{position:relative;display:flex;align-items:center;justify-content:center;height:110px;overflow:hidden;background:radial-gradient(circle at 30% 20%,#ffd6e8,transparent 50%),linear-gradient(140deg,var(--brand),#ffb347)}
.ms-card-art b{position:relative;font:700 64px/1 Fredoka,sans-serif;color:#fff;text-shadow:0 4px 0 rgba(0,0,0,.15)}
.ms-card-art img{position:relative;width:64px;height:64px;object-fit:contain;border-radius:14px;background:#fff;padding:6px}
.ms-card-art i{position:absolute;width:22px;height:28px;border-radius:50%;background:#fff;opacity:.45}
.ms-card-art i:nth-of-type(1){left:14px;top:18px}.ms-card-art i:nth-of-type(2){right:20px;top:12px;background:#ffe27a;opacity:.8}.ms-card-art i:nth-of-type(3){right:46px;bottom:14px;background:#7dd3fc;opacity:.8}
.ms-card-tx{display:block;padding:9px 12px 10px}
.ms-card-tx b{display:block;font-size:12.5px;color:#0c0d10}
.ms-card-tx small{color:#6b7280;font-size:10.5px}
.ms-input{display:flex;align-items:center;justify-content:space-between;margin:0 10px 14px;border-radius:999px;padding:6px 6px 6px 14px;box-shadow:inset 0 0 0 1px #e1e3e7;color:#a3a8b1;font-size:12px}
.ms-input i{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#e1e3e7;color:#fff}
.ws-appi{width:36px;height:36px;border-radius:9px;color:#fff}
.ws-appi.sms{background:linear-gradient(#6ee27b,#2fbf4a)}
.ws-appi.mail{background:linear-gradient(#5fb3ff,#1f6fe5)}
.ws-cban{z-index:14}
.ws-unread{position:absolute;left:50%;top:108px;z-index:11;transform:translateX(-50%);display:flex;align-items:center;gap:6px;border:0;border-radius:999px;padding:9px 14px;background:#0c0d10;color:#fff;font:700 12px/1 Inter,sans-serif;white-space:nowrap;box-shadow:0 10px 26px rgba(0,0,0,.35);cursor:pointer;animation:dm-pop .4s ease both}
.ws-unread svg{color:#4ade80}

/* your funnel, above your notifications */
.dm-rail.site{width:262px}
.fn{display:grid;gap:5px;border-radius:16px;padding:12px;background:#0d0d0f;box-shadow:inset 0 0 0 1px #1f1f1f}
.fn-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:3px}
.fn-h b{color:#fff;font:600 13.5px/1.2 Figtree,Inter,sans-serif}
.fn-h small{color:#666;font-size:10.5px}
.fn-row{position:relative;display:flex;align-items:center;gap:8px;height:28px;padding:0 9px;border-radius:8px;background:#121214;font:500 11.5px/1 Inter,sans-serif;color:#9a9a9a}
.fn-row i{position:absolute;left:0;top:0;bottom:0;border-radius:8px;background:#1a1a1d;transition:background .4s}
.fn-row span,.fn-row b,.fn-row em{position:relative}
.fn-row b{margin-left:auto;color:#fff;font-weight:700;font-variant-numeric:tabular-nums}
.fn-row.past i{background:color-mix(in srgb,var(--brand) 22%,#141416)}
.fn-row.here i{background:var(--brand);box-shadow:0 6px 18px color-mix(in srgb,var(--brand) 35%,transparent)}
.fn-row.here{color:var(--on-brand)}
.fn-row.here b{color:var(--on-brand)}
.fn-av{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex:none;border-radius:50%;background:#fff;color:#0c0d10;font:800 8.5px/1 Inter,sans-serif;font-style:normal;box-shadow:0 0 0 2px var(--brand);animation:dm-pop .45s cubic-bezier(.2,1.5,.4,1) both}
.fn-who{display:flex;align-items:center;gap:8px;margin-top:5px;border-top:1px solid #1d1d1f;padding-top:9px;color:#8a8a8a;font:500 11px/1.3 Inter,sans-serif}
.fn-who .fn-av{width:26px;height:26px;font-size:10px}
.fn-who b{display:block;color:#fff;font-size:12px}
.fn-rev{display:grid;grid-template-columns:1fr auto;align-items:baseline;border-radius:10px;padding:9px 10px;background:color-mix(in srgb,#16a34a 16%,#0d0d0f);animation:dm-pop .45s ease both}
.fn-rev span{color:#86efac;font:600 10.5px/1 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.fn-rev b{color:#fff;font:800 17px/1 Figtree,Inter,sans-serif}
.fn-rev small{grid-column:1/-1;color:#86efac;font-size:10.5px;margin-top:3px}
.dm-rail.site .dm-rail-list{min-height:120px}


/* restaurant: pickup or Uber delivery */
.ws-mode{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 10px}
.ws-mode button{display:grid;gap:2px;text-align:left;border:0;border-radius:14px;padding:11px 14px;background:var(--ws-card);box-shadow:inset 0 0 0 1px var(--ws-line)}
.ws-mode button.on{background:var(--ws-bg);box-shadow:inset 0 0 0 2px var(--brand)}
.ws-mode b{font-size:14px}
.ws-mode small{color:var(--ws-muted);font-size:11.5px;white-space:nowrap}
.ws-uber{display:inline-block;border-radius:4px;padding:2px 5px;background:#000;color:#fff;font:700 10px/1 Inter,sans-serif;letter-spacing:-.01em;vertical-align:1px}
.ws-synced{display:flex;align-items:flex-start;gap:7px;margin-bottom:8px;color:var(--ws-muted);font-size:11.5px;line-height:1.4}
.ws-synced svg{flex:none;margin-top:1px;color:#16a34a}
.ws-synced b{color:var(--ws-ink)}
.ws-bagbar .bb{display:grid;gap:2px;min-width:0}
.ws-bagbar .bb small{opacity:.7;font-size:11px;white-space:nowrap}
.ws-bagbar .bb b{white-space:nowrap}
.ws-bagbar .ws-btn{flex:none}
.ws-bagbar.paid{justify-content:flex-start;padding-left:10px}
.ws-bagbar.paid .bb{flex:1}
.ws-bagbar.paid b{color:#fff}
.ws-bagbar .ck{display:flex;align-items:center;justify-content:center;width:30px;height:30px;flex:none;border-radius:50%;background:#16a34a;color:#fff}
.ws-codebar{white-space:nowrap}
.ms-track{width:86%;border-radius:18px;overflow:hidden;background:#e9e9eb;animation:dm-pop .4s ease both}
.ms-track .map{display:block;background:#f4f5f7}
.ms-track svg{display:block;width:100%;height:auto}
.ms-track .route{stroke-dasharray:4 0}
.ms-track .tt{display:block;padding:9px 12px 10px}
.ms-track b{display:block;font-size:12.5px}
.ms-track.done b{color:#16a34a}
.ms-track small{color:#6b7280;font-size:10.5px}

/* real photos in the website designs */
.ws-photo{background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;background-color:#d6d3cf}
.ws-art.ws-photo{box-shadow:0 30px 60px rgba(0,0,0,.22)}
.ws-art.ws-photo::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.45))}
.fit-photo::before{background:linear-gradient(200deg,transparent 35%,color-mix(in srgb,var(--brand) 55%,transparent))!important}
.food-photo{border-radius:50%!important;box-shadow:0 0 0 10px #fff,0 30px 60px rgba(60,40,20,.25)!important}
.food-photo::before{display:none}
.food-photo .ws-chip{left:50%;transform:translateX(-50%);bottom:12%;white-space:nowrap;background:rgba(0,0,0,.45)}
.build-photo{border-radius:4px!important;box-shadow:12px 12px 0 var(--brand)!important}
.ws-art.ws-photo .ws-chip{z-index:1;background:rgba(0,0,0,.35)}
.ws-food .ws-ph.ws-photo{box-shadow:0 0 0 6px #fff,0 14px 30px rgba(60,40,20,.18)}
.ws-garm.ws-photo{background-color:#f1f0ee}
.ws-garm.ws-photo.hero{min-height:300px}
.ws-band{height:170px;margin:0;background-size:cover;background-position:center;position:relative}
.ws-band.big{height:320px;margin:10px 28px 28px;border-radius:var(--ws-radius);overflow:hidden;display:flex;align-items:flex-end;padding:26px;color:#fff;font-size:14px}
.ws-band.big::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.6))}
.ws-band.big span{position:relative;display:grid;gap:4px}
.ws-band.big b{font:700 28px/1.1 Inter,system-ui,sans-serif;letter-spacing:-.02em}
.ws-band.party{height:190px;margin:18px 28px 0;border-radius:28px;box-shadow:0 0 0 6px #fff,0 16px 34px rgba(225,29,116,.2)}
.ms-card-art{background-size:cover!important;background-position:center!important}
.ms-card-art b{text-shadow:0 4px 18px rgba(0,0,0,.35)!important}
.ms-card-art i{display:none}
.em-bag i{background-size:cover!important;background-position:center!important}

/* photos in the phone demos */
.dm-cover{position:relative;flex:none;height:128px;border-radius:16px;overflow:hidden;background-size:cover;background-position:center;background-color:#d6d3cf;box-shadow:0 8px 20px rgba(0,0,0,.12);display:flex;align-items:flex-end;padding:9px 11px;color:#fff;font:700 11px/1.2 Inter,sans-serif;animation:dm-fade .4s ease both}
.dm-cover.sm{height:92px}
.dm-cover::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.5))}
.dm-cover span{position:relative;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.dm-photo[style]{height:96px;background-size:cover;background-position:center}
.dm-photo[style]::before{display:none}
.em-hero.photo{background-size:cover!important;background-position:center!important}
/* every site on a phone */
@container (max-width:560px){
  .ws-band.big{height:220px;margin:6px 18px 22px;padding:18px}
  .ws-band.big b{font-size:21px}
  .ws-band.party{margin:14px 18px 0;height:150px}
  .ws-band{height:130px}
  .ws-garm.ws-photo.hero{min-height:220px}
  .ws-bagbar{border-radius:18px;padding:10px 8px 10px 14px;bottom:10px}
  .ws-bagbar .ws-btn{padding:11px 14px;font-size:13px}
  .ws-mode button{padding:10px 11px}
  .ws-mode small{white-space:normal}
  .ws-codebar{font-size:11.5px}
  .ws-capture{flex-direction:column;align-items:stretch;margin:4px 18px 26px}
  .ws-capin{justify-content:space-between}
  .ws-nav{padding:12px 16px;gap:10px}
  .ws-links,.ws-nav .ws-cta{display:none}
  .ws-burger{display:block}
  .ws-hero,.ws-buy,.ws-pdp,.ws-banner{grid-template-columns:1fr}
  .ws-hero{padding:30px 18px 26px}
  .ws-h1{font-size:38px}
  .ws-fitness .ws-h1,.ws-build .ws-h1{font-size:48px}
  .ws-party .ws-h1{font-size:30px}
  .ws-product .ws-h1{font-size:36px}
  .ws-three{font-size:110px}
  .ws-h2{font-size:26px}
  .ws-sec{padding:28px 18px}
  .ws-stats,.ws-trio{margin:0 18px}
  .ws-stats b,.ws-trio b{font-size:20px}
  .ws-stats div,.ws-trio div{padding:12px 6px}
  .ws-cards,.ws-food .ws-cards,.ws-cards.two{grid-template-columns:1fr 1fr;gap:12px}
  .ws-plans,.ws-feats,.ws-strip{grid-template-columns:1fr}
  .ws-feats,.ws-strip{padding:0 18px}
  .ws-specs{grid-template-columns:1fr 1fr}
  .ws-grid{grid-template-columns:1fr 1fr}
  .ws-banner{margin:14px 18px 0;min-height:0}
  .ws-banner > div{padding:22px}
  .ws-garm.hero{height:220px}
  .ws-buy,.ws-pdp{padding:20px 18px}
  .ws-prod{width:200px;height:240px}
  .ws-foot{padding:18px}
  .ws-mi{grid-template-columns:1fr auto auto}
  .ws-mi i{display:none}
  .ws-art{max-width:300px;width:100%;justify-self:center}
  .ws-row .t{min-width:60px;font-size:12px}
  .ws-p, .ws-hero p{font-size:14px}
}

/* wushu scoring rig */
.dm-rig{display:flex;align-items:flex-end;gap:22px;flex:none}
.dm-dev{display:grid;gap:10px;justify-items:center}
.dm-cap{font:600 11px/1 Inter,sans-serif;letter-spacing:.12em!important;text-transform:uppercase!important;color:#808080;white-space:nowrap}
.dm-phone.rig{width:272px;height:584px}
.dm-screen.jg{background:#0b1424;color:#eee8dc}
.jg-body{position:absolute;inset:44px 0 52px;padding:0 12px 10px;overflow:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:8px}
.jg-hd{display:flex;justify-content:space-between;align-items:baseline}
.jg-hd b{font:800 22px/1 "Barlow Condensed",Figtree,sans-serif;text-transform:uppercase;letter-spacing:.02em}
.jg-hd span{font:600 10px/1 Inter,sans-serif;color:#e4b455}
.jg-comp{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;border-radius:14px;padding:9px 10px;background:#111d31;box-shadow:inset 0 0 0 1px #22334f}
.jg-comp.on{box-shadow:inset 0 0 0 1.5px #de4a3e}
.jg-comp .pl{display:inline-block;border-radius:99px;padding:2px 7px;background:#17263e;color:#bcc4d2;font:700 8.5px/1.3 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.jg-comp.on .pl{background:rgba(222,74,62,.18);color:#ff8a80}
.jg-comp small{display:block;color:#8492a8;font-size:9.5px;margin-top:3px}
.jg-comp b{display:block;font:800 21px/1 "Barlow Condensed",Figtree,sans-serif;color:#e4b455;text-transform:uppercase;margin-top:3px}
.jg-clk{font:800 22px/1 "Barlow Condensed",Figtree,sans-serif;font-variant-numeric:tabular-nums;color:#fff}
.jg-deduct{border:0;border-radius:16px;min-height:84px;flex:none;background:linear-gradient(180deg,rgba(222,74,62,.32),rgba(222,74,62,.18));box-shadow:inset 0 0 0 1.5px #de4a3e;color:#fff;font:800 30px/1 "Barlow Condensed",Figtree,sans-serif;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;transition:transform .1s}
.jg-deduct small{display:block;margin-top:6px;font:500 10px/1.3 Inter,sans-serif;text-transform:none;letter-spacing:0;color:#ffc9c4}
.jg-deduct:active{transform:scale(.97)}
.jg-wait{border-radius:14px;padding:14px;text-align:center;font-size:11.5px;color:#8492a8;box-shadow:inset 0 0 0 1px dashed #22334f;border:1px dashed #31476b}
.jg-banner{border-radius:14px;padding:11px 12px;background:rgba(228,180,85,.14);box-shadow:inset 0 0 0 1.5px #e4b455;color:#e4b455;font:800 17px/1 "Barlow Condensed",Figtree,sans-serif;text-transform:uppercase}
.jg-banner small{display:block;margin-top:4px;font:500 10px/1.3 Inter,sans-serif;text-transform:none;color:#d8c08a}
.jg-ok{border-radius:14px;padding:11px 12px;background:rgba(70,183,139,.14);box-shadow:inset 0 0 0 1.5px #46b78b}
.jg-ok b{display:block;color:#46b78b;font:800 17px/1 "Barlow Condensed",Figtree,sans-serif;text-transform:uppercase}
.jg-ok small{display:block;margin-top:4px;color:#9fd8c0;font-size:10px}
.jg-list{display:grid;gap:6px}
.jg-lh{display:flex;justify-content:space-between;font:700 9.5px/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#8492a8}
.jg-lh span:last-child{color:#de4a3e;letter-spacing:0}
.jg-empty{font-size:11px;color:#5c6c86}
.jg-row{border-radius:12px;padding:7px 8px;background:#111d31;box-shadow:inset 0 0 0 1px #22334f;animation:dm-pop .3s ease both}
.jg-row.active{box-shadow:inset 0 0 0 1.5px #e4b455}
.jg-row.void{opacity:.45}
.jg-row.void .ln{text-decoration:line-through}
.jg-row .ln{display:flex;align-items:center;gap:6px;font-size:11px}
.jg-row .n{color:#5c6c86;font-weight:700}
.jg-row .at{font-variant-numeric:tabular-nums;color:#bcc4d2}
.jg-row .cd{color:#e4b455;font:800 15px/1 "Barlow Condensed",Figtree,sans-serif}
.jg-row .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jg-row .v{color:#de4a3e;font-weight:700}
.jg-row .need{border:1px dashed #e4b455;color:#e4b455;border-radius:7px;padding:2px 6px;font-size:10px;font-weight:600}
.jg-row .tl{display:flex;gap:5px;justify-content:flex-end;margin-top:4px}
.jg-row .tl:empty{display:none}
.jg-row .tl button{border:0;border-radius:6px;padding:3px 7px;background:#17263e;color:#bcc4d2;font:600 9.5px/1 Inter,sans-serif;cursor:pointer}
.jg-pad{margin-top:7px;display:grid;gap:6px}
.jg-entry{display:flex;justify-content:space-between;align-items:center}
.jg-entry span{font:600 11px/1 Inter,sans-serif;color:#8492a8}
.jg-entry b{font:800 22px/1 "Barlow Condensed",Figtree,sans-serif;color:#e4b455;margin-left:4px;letter-spacing:.06em}
.jg-entry b i{font-style:normal;opacity:.4;animation:dm-blink 1s infinite}
.jg-entry button{border:0;border-radius:99px;padding:3px 8px;background:#17263e;color:#bcc4d2;font:600 9.5px/1 Inter,sans-serif;cursor:pointer}
.jg-keys{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.jg-keys .jk{border:0;border-radius:9px;min-height:46px;padding:4px 2px;background:#17263e;box-shadow:inset 0 0 0 1px #31476b;color:#eee8dc;cursor:pointer;display:grid;align-content:center;justify-items:center;gap:2px}
.jg-keys .jk.wide{grid-column:span 2;min-height:52px}
.jg-keys .jk b{font:800 18px/1 "Barlow Condensed",Figtree,sans-serif}
.jg-keys .jk small{font:500 7px/1.1 Inter,sans-serif;color:#8492a8;text-align:center;max-height:24px;overflow:hidden}
.jg-keys .jk.off{background:transparent;box-shadow:none;border:1px dashed #22334f;opacity:.4;cursor:default}
.jg-keys .jk:not(.off):active{background:#22334f}
.jg-padft{display:flex;justify-content:space-between}
.jg-padft button{border:0;background:none;color:#8492a8;font:600 10px/1 Inter,sans-serif;cursor:pointer;padding:3px}
.jg-submit{border:0;border-radius:13px;padding:12px;background:#e4b455;color:#111d31;font:800 14px/1 Inter,sans-serif;cursor:pointer;flex:none}
.jg-submit:disabled{opacity:.35;cursor:default}
.jg-tabs{position:absolute;left:0;right:0;bottom:0;height:52px;display:grid;grid-template-columns:repeat(5,1fr);align-items:center;background:#0e1a2d;border-top:1px solid #22334f;font:600 9px/1 Inter,sans-serif;color:#5c6c86;text-align:center;padding-bottom:6px}
.jg-tabs .on{color:#e4b455}
.jg-flash{position:absolute;inset:0;z-index:9;pointer-events:none;background:radial-gradient(circle at 50% 45%,rgba(222,74,62,.0),rgba(222,74,62,.45));animation:jg-flash .7s ease forwards}
@keyframes jg-flash{from{opacity:1}to{opacity:0}}

.dm-lap{width:620px;flex:none;opacity:0;transform:translateY(20px);transition:transform .7s cubic-bezier(.2,1,.3,1) .1s,opacity .5s ease .1s}
.dm.show .dm-lap{opacity:1;transform:none}
.dm-lap .lid{border-radius:18px 18px 6px 6px;background:#0a0a0a;padding:12px 12px 16px;box-shadow:0 0 0 1px #2a2a2a,0 0 0 5px #141414}
.dm-lap .lscr{height:380px;border-radius:6px;overflow:hidden;background:#0b1424;color:#eee8dc;font:500 11px/1.35 Inter,sans-serif;display:flex;flex-direction:column}
.dm-lap .base{height:14px;margin:0 -34px;border-radius:0 0 14px 14px;background:linear-gradient(#2a2a2e,#151517);box-shadow:0 30px 60px rgba(0,0,0,.6)}
.lp-top{display:flex;align-items:center;gap:12px;padding:9px 12px;border-bottom:1px solid #22334f;background:#0e1a2d}
.lp-ev{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.lp-ev .lg{width:26px;height:26px;border-radius:7px;background:#fff;overflow:hidden;display:flex;align-items:center;justify-content:center;font:800 5px/1 Inter,sans-serif;color:#999;text-align:center;flex:none}
.lp-ev .lg.empty{background:transparent;border:1px dashed #5c6c86}
.lp-ev .lg img{width:100%;height:100%;object-fit:contain}
.lp-ev b{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-ev small{color:#8492a8;font-size:9.5px}
.lp-tabs{display:flex;gap:4px;background:#0b1424;border-radius:9px;padding:3px}
.lp-tabs button{border:0;border-radius:7px;padding:5px 9px;background:none;color:#8492a8;font:600 10.5px/1 Inter,sans-serif;cursor:pointer}
.lp-tabs button.on{background:#17263e;color:#fff;box-shadow:inset 0 0 0 1px #31476b}
.lp-clock{text-align:right}
.lp-clock b{display:block;font:800 22px/1 "Barlow Condensed",Figtree,sans-serif;color:var(--brand);font-variant-numeric:tabular-nums}
.lp-clock small{color:#8492a8;font-size:9px}
.lp-body{flex:1;min-height:0;display:grid;grid-template-columns:200px 1fr;gap:8px;padding:8px}
.lp-pane{border-radius:10px;background:#111d31;box-shadow:inset 0 0 0 1px #22334f;padding:8px;display:flex;flex-direction:column;gap:5px;min-height:0;overflow:hidden}
.lp-pane h4{margin:0 0 2px;display:flex;justify-content:space-between;align-items:center;gap:6px;font:700 9px/1.2 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#8492a8}
.lp-pane .seats{display:flex;gap:4px;letter-spacing:0;text-transform:none}
.lp-pane .seats span{border-radius:6px;padding:2px 5px;background:#17263e;color:#8492a8;font-weight:600}
.lp-pane .seats span.ok{background:rgba(70,183,139,.15);color:#46b78b}
.lp-r{display:grid;grid-template-columns:14px 1fr auto;gap:6px;align-items:center;padding:5px 4px;border-radius:7px;font-size:10.5px}
.lp-r small{display:block;color:#5c6c86;font-size:9px}
.lp-r .n{color:#5c6c86;font-weight:700}
.lp-r .s{font-variant-numeric:tabular-nums;color:#bcc4d2;font-size:10px}
.lp-r.me{background:rgba(228,180,85,.1);box-shadow:inset 0 0 0 1px rgba(228,180,85,.45)}
.lp-r.me b{color:#e4b455}
.lp-ah,.lp-ar{display:grid;grid-template-columns:38px 46px 46px 46px 1fr;gap:6px;align-items:center}
.lp-ah{font:700 8.5px/1 Inter,sans-serif;color:#5c6c86;letter-spacing:.08em}
.lp-arows{flex:1;min-height:0;overflow:auto;display:grid;align-content:start;gap:4px;scrollbar-width:none}
.lp-ar{animation:dm-pop .3s ease both}
.lp-ar.void{opacity:.4}
.lp-ar .t{font-variant-numeric:tabular-nums;color:#bcc4d2}
.lp-ar .ch{border-radius:6px;padding:3px 0;text-align:center;font:800 12px/1 "Barlow Condensed",Figtree,sans-serif}
.lp-ar .ch.none{color:#31476b}
.lp-ar .ch.pend{border:1px dashed #5c6c86;color:#8492a8}
.lp-ar .ch.solo{background:#17263e;color:#8492a8}
.lp-ar .st{font-size:9.5px;text-align:right}
.lp-ar .st.red{color:#de4a3e;font-weight:700}
.lp-ar .st.muted{color:#5c6c86}
.lp-empty{color:#5c6c86;font-size:10.5px;padding:6px 0}
.lp-score{display:flex;justify-content:space-between;gap:6px;border-top:1px solid #22334f;padding-top:6px;color:#8492a8;font-size:10px}
.lp-score b{color:#fff;font:800 14px/1 "Barlow Condensed",Figtree,sans-serif;font-variant-numeric:tabular-nums}
.lp-btn{border:0;border-radius:9px;padding:9px;background:#17263e;box-shadow:inset 0 0 0 1px #31476b;color:#fff;font:700 11.5px/1 Inter,sans-serif;cursor:pointer}
.lp-btn.go{background:var(--brand);color:var(--on-brand);box-shadow:none;animation:lp-glow 1.6s ease-in-out infinite}
.lp-btn:disabled{opacity:.5;cursor:default;animation:none}
@keyframes lp-glow{50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 30%,transparent)}}
.lp-done{border-radius:9px;padding:9px;background:rgba(70,183,139,.14);color:#46b78b;font-weight:700;text-align:center}
.lp-admin{flex:1;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:min-content;gap:8px;padding:8px;align-content:start}
.lp-ring{border-radius:10px;background:#111d31;box-shadow:inset 0 0 0 1px #22334f;padding:8px;display:grid;gap:3px}
.lp-ring .h{display:flex;justify-content:space-between;align-items:center}
.lp-ring .h b{font:800 15px/1 "Barlow Condensed",Figtree,sans-serif;text-transform:uppercase}
.lp-ring .h span{font-size:9px;color:#46b78b;font-weight:700}
.lp-ring.live{box-shadow:inset 0 0 0 1.5px var(--brand)}
.lp-ring.live .h span{color:#ff8a80}
.lp-ring.over .h span{color:#de4a3e}
.lp-ring small{color:#5c6c86;font-size:9px}
.lp-ring .now{color:#e4b455;font-weight:700}
.lp-ring .bar{height:4px;border-radius:4px;background:#17263e;overflow:hidden}
.lp-ring .bar i{display:block;height:100%;background:#46b78b}
.lp-adm-foot{grid-column:1/-1;display:flex;justify-content:space-between;border-radius:10px;padding:8px 10px;background:#0e1a2d;color:#8492a8;font-size:10px}

/* Quick facts while a demo runs (demo.js FACTS): a card in the header bar,
   so it never covers the demo. On phones it takes a row under the title. */
.dm-facts{margin-left:auto;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;column-gap:14px;max-width:min(640px,52%);padding:8px 8px 8px 14px;border-radius:14px;background:rgba(20,32,58,.7);box-shadow:inset 0 0 0 1px rgba(143,184,255,.28);font-family:Inter,system-ui,sans-serif;animation:dm-facts-in .45s cubic-bezier(.16,1,.3,1)}
.dm-facts[hidden]{display:none}
.dm-facts:not([hidden]) + .dm-close{margin-left:0}
.dm-facts-top{grid-column:1;display:flex;align-items:center;gap:10px}
.dm-facts-k{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#8fb8ff}
.dm-facts-dots{display:flex;gap:4px}
.dm-facts-dots i{width:5px;height:5px;border-radius:50%;background:#2a3346;transition:background .3s,width .3s}
.dm-facts-dots i.on{width:14px;border-radius:3px;background:#8fb8ff}
.dm-facts-body{grid-column:1;margin-top:3px;min-width:0}
.dm-facts-body.in{animation:dm-fact-in .5s cubic-bezier(.16,1,.3,1)}
.dm-facts-body b{font-size:14px;font-weight:600;color:#fff}
.dm-facts-body b::after{content:" · "}
.dm-facts-body p{display:inline;margin:0;font-size:13px;line-height:1.45;color:#b7bfcc}
.dm-facts-cta{grid-column:2;grid-row:1 / span 2;padding:8px 12px;border-radius:10px;background:#8fb8ff;color:#0b1424;font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap}
.dm-facts-cta:hover{background:#c6dbff}
.dm-facts-x{grid-column:3;grid-row:1 / span 2;width:28px;height:28px;border:0;border-radius:8px;background:transparent;color:#8a93a3;font-size:18px;line-height:1;cursor:pointer}
.dm-facts-x:hover{background:rgba(255,255,255,.08);color:#fff}
.dm-facts-x:focus-visible,.dm-facts-cta:focus-visible{outline:2px solid #8fb8ff;outline-offset:2px}
@keyframes dm-facts-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes dm-fact-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.dm-facts,.dm-facts-body.in{animation:none}}
@media (max-width:1100px) and (min-width:901px){.dm-facts-cta{display:none}}

@media (max-width:900px){
  .dm-head{flex-wrap:wrap}
  .dm-head > div:first-child{flex:1 1 0;min-width:0}
  .dm-facts{order:3;flex-basis:100%;max-width:none;margin:2px 0 0;grid-template-columns:minmax(0,1fr) auto;padding:8px 6px 8px 12px}
  .dm-facts-body p{font-size:12.5px}
  .dm-facts-cta{grid-column:1;grid-row:3;justify-self:start;margin-top:6px;padding:0;background:none;color:#8fb8ff}
  .dm-facts-cta:hover{background:none;color:#fff}
  .dm-facts-x{grid-column:2;grid-row:1 / span 3;align-self:start}
  .dm-facts:not([hidden]) + .dm-close{margin-left:auto}
  .dm-close{order:2}
  .dm-win{inset:0;border-radius:0}
  .dm-body{grid-template-columns:1fr;grid-template-rows:auto auto;overflow:auto}
  .dm-panel{border-right:0;border-bottom:1px solid #1a1a1a;overflow:visible}
  .dm-stage{flex-direction:column;padding:24px 12px 40px;overflow:visible}
  .dm-body{align-content:start}
  .dm-tab{max-width:94vw;width:94vw}
  .dm-rig,.dm-fit{flex-direction:column;align-items:center}
  /* phones: one screen at a time, with tabs */
  .dm-head{padding:10px 12px}
  .dm-head h2{font-size:16px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .dm-head .dm-kicker{font-size:9.5px}
  .dm-panel{padding:12px;gap:12px}
  .dm-mstrip{display:flex;align-items:center;gap:10px;border-radius:14px;padding:10px 12px;background:#0d0d0f;box-shadow:inset 0 0 0 1px #1f1f1f}
  .dm-mstrip .dm-ai{width:34px;height:34px;border-radius:9px;font-size:12px}
  .dm-mstrip > div{flex:1;min-width:0}
  .dm-stepline{display:block;color:#fff;font:600 13px/1.3 Inter,sans-serif}
  .dm-stepline small{display:block;color:var(--brand);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:2px}
  .dm-mstrip button{border:0;border-radius:9px;padding:8px 12px;background:#1a1a1a;color:#fff;font:600 12px/1 Inter,sans-serif}
  .dm-hidepanel{display:block;border:0;background:none;color:#888;font:600 12px/1 Inter,sans-serif;text-align:right;padding:2px}
  .dm-devtabs{display:flex;gap:4px;position:sticky;top:0;z-index:10;padding:8px 10px;margin:0 -12px;background:rgba(7,8,11,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid #1a1a1a;width:100%;box-sizing:border-box;overflow-x:auto;scrollbar-width:none}
  .dm-devtabs button{position:relative;flex:1;white-space:nowrap;border:0;border-radius:10px;padding:9px 10px;background:#121214;color:#999;font:600 12.5px/1 Inter,sans-serif}
  .dm-devtabs button[aria-selected="true"]{background:var(--brand);color:var(--on-brand)}
  .dm-devtabs .n{position:absolute;top:-4px;right:-2px;min-width:17px;height:17px;border-radius:9px;background:#ff3b30;color:#fff;font:700 10px/17px Inter,sans-serif;font-style:normal;padding:0 4px;box-sizing:border-box;animation:dm-pop .35s ease both}
  .dm-devtabs .dot{position:absolute;top:5px;right:6px;width:7px;height:7px;border-radius:50%;background:#ff3b30;box-shadow:0 0 0 2px #121214;animation:dm-blink 1.2s infinite}
  .dm-stage{padding:0 12px 28px;gap:14px;justify-content:flex-start;background:#07080b}
  .dm-fit{width:100%;justify-content:center;padding-top:14px}
  .dm-d{display:none!important}
  .dm-d.on{display:flex!important;justify-content:center;width:100%}
  .dm-d.on > *{margin:0 auto}
  .dm-cap{display:none}
  .dm-rail{width:100%;max-width:380px;max-height:none;opacity:1;transform:none}
  .dm-mtoast{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;text-align:left;position:absolute;left:10px;right:10px;top:10px;z-index:30;border:0;border-radius:18px;padding:11px 12px;background:rgba(246,246,248,.96);color:#0c0d10;font:500 12px/1.35 Inter,sans-serif;box-shadow:0 18px 40px rgba(0,0,0,.45);animation:dm-push-in .6s cubic-bezier(.2,1.3,.4,1) both}
  .dm-mtoast .dm-ai{width:30px;height:30px;border-radius:8px;font-size:11px}
  .dm-mtoast b{display:block}
  .dm-mtoast.out{animation:dm-push-out .38s ease forwards}
  .dm-lap{width:360px}
  .dm-lap .lscr{height:auto;min-height:420px}
  .dm-lap .base{margin:0 -14px}
  .lp-top{flex-wrap:wrap}
  .lp-body{grid-template-columns:1fr}
  .lp-admin{grid-template-columns:repeat(2,1fr)}
  .ws-browser{width:min(100%,560px)}
  .ws-vp{height:560px}
  .dm-type-row{grid-template-columns:repeat(3,1fr)!important}

  .dm-rail,.dm-rail.site{width:min(340px,92vw);max-height:none;align-self:center}
  .dm-dev{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .dm-win{transition:none}.dm-phone,.dm-tab,.dm-anim{transition:none}
  .dm-view.in,.dm-splash .lg,.dm-noti,.dm-check,.dm-push.in,.dm-app.mine.new .ic-wrap,.dm-home{animation:none}
  .dm-lap,.dm-rail{transition:none}
  .dm-rn.new{animation:none}
}

/* ---------- the next tap: gold ring, pulsing tab and the Next bar (demo.js paintGuide) ---------- */
.dm-next{outline:2px solid #f2c25b!important;outline-offset:3px;animation:dm-next 1.5s ease-in-out infinite}
.dm-next.look{outline-style:dashed!important;outline-offset:6px;animation:none}
@keyframes dm-next{50%{outline-offset:7px;outline-color:rgba(242,194,91,.3)}}
.dm-coach{position:absolute;left:calc(360px + (100% - 360px) / 2);bottom:18px;z-index:40;display:flex;align-items:center;gap:12px;width:max-content;max-width:min(560px,calc(100% - 400px));padding:10px 10px 10px 12px;border-radius:16px;background:rgba(20,17,9,.94);box-shadow:inset 0 0 0 1px rgba(242,194,91,.5),0 18px 50px rgba(0,0,0,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#d9d3c4;font:500 13.5px/1.4 Inter,system-ui,sans-serif;opacity:0;transform:translate(-50%,16px);pointer-events:none;transition:opacity .3s ease,transform .35s cubic-bezier(.2,1,.3,1)}
.dm-coach.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.dm-coach-ic{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#f2c25b;color:#1a1408;font:700 14px/1 Inter,sans-serif}
.dm-coach.wait .dm-coach-ic{box-sizing:border-box;background:none;border:2px solid rgba(242,194,91,.25);border-top-color:#f2c25b;animation:dm-rot .9s linear infinite}
.dm-coach.end .dm-coach-ic{background:#7fe0b5}
.dm-coach-tx{flex:1;min-width:0}
.dm-coach-tx small{display:block;margin-bottom:2px;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#f2c25b}
.dm-coach-tx b{color:#fff;font-weight:600}
.dm-coach-go{flex:none;border:0;border-radius:10px;padding:10px 13px;background:#f2c25b;color:#1a1408;font:600 12.5px/1 Inter,sans-serif;cursor:pointer;text-decoration:none;white-space:nowrap}
.dm-coach-go:hover{background:#ffd98a}
.dm-coach-go:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* The gold "this is a mock-up" note: in the panel on wide screens, under the demo on phones. */
.dm-mock{margin:0;padding:11px 13px;border-radius:12px;background:rgba(228,180,85,.08);box-shadow:inset 0 0 0 1px rgba(228,180,85,.42);color:#cbbf9f;font:500 12px/1.5 Inter,sans-serif}
.dm-mock b{color:#f2c25b;font-weight:600}
.dm-stage-mock{display:none}
@media (max-width:900px){
  .dm-coach{left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));width:auto;max-width:none;transform:translateY(16px)}
  .dm-coach.on{transform:none}
  .dm-stage{padding-bottom:120px}
  .dm-panel .dm-hint{display:none}
  .dm-devtabs button.dm-next{outline-offset:-3px!important;background:#2b220d;color:#ffe3a3}
  .dm-devtabs button.dm-next[aria-selected="true"]{outline-offset:-3px!important}
  .dm-stage-mock{display:block;max-width:380px;margin:4px auto 0}
  .dm-panel .dm-mock{display:none}
  /* Quick facts shrink to one line on phones, so the demo keeps the screen. */
  .dm-facts{grid-template-columns:minmax(0,1fr) auto auto;align-items:center;padding:5px 4px 5px 12px}
  .dm-facts-top,.dm-facts-body p{display:none}
  .dm-facts-body{grid-column:1;grid-row:1;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dm-facts-body b{font-size:13px}
  .dm-facts-body b::after{content:none}
  .dm-facts-cta{grid-column:2;grid-row:1;margin:0;font-size:12.5px}
  .dm-facts-cta .lg{display:none}
  .dm-facts-x{grid-column:3;grid-row:1;align-self:center}
}
@media (prefers-reduced-motion:reduce){.dm-next{animation:none}.dm-coach{transition:none}}
.dm-coach-x{flex:none;width:28px;height:28px;margin-left:-4px;border:0;border-radius:8px;background:transparent;color:#a39a86;font-size:18px;line-height:1;cursor:pointer}
.dm-coach-x:hover{background:rgba(255,255,255,.08);color:#fff}
@media (max-width:900px){
  .dm-coach.end{flex-wrap:wrap}
  .dm-coach.end .dm-coach-tx{flex-basis:calc(100% - 80px)}
  .dm-coach.end .dm-coach-go{margin-left:38px}
}
/* "Example only" pill at the top of every demo stage, wide and narrow. */
.dm-ex{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:8px;margin:0;max-width:calc(100% - 32px);padding:6px 12px 6px 6px;border-radius:999px;background:rgba(20,17,9,.88);box-shadow:inset 0 0 0 1px rgba(228,180,85,.55);color:#ddd0b0;font:500 12px/1.3 Inter,sans-serif;white-space:nowrap}
.dm-ex b{flex:none;padding:4px 9px;border-radius:999px;background:#e4b455;color:#1a1408;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.dm-ex span{overflow:hidden;text-overflow:ellipsis}
@media (max-width:900px){
  .dm-ex{position:static;transform:none;align-self:center;margin:12px auto 0;white-space:normal;max-width:380px}
}