/* Source of static/assets/css/mockups.css (written by gen_tabs.py: every px becomes a scalable design unit). */
.mk{position:relative;width:100%;max-width:560px;margin:0 auto;aspect-ratio:600/520;font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#1e293b;-webkit-font-smoothing:antialiased;text-align:left}
.mk *{box-sizing:border-box;margin:0;padding:0}
.mk-stage{container-type:size;position:absolute;inset:0;overflow:hidden}
.mk-stage>*{--u:calc(100cqw / 600)}
.mk-phone{position:absolute;width:calc(var(--u)*264);height:calc(var(--u)*600);left:calc(var(--u)*168);top:calc(var(--u)*22);border-radius:calc(var(--u)*44);background:#1f2937;padding:calc(var(--u)*10);box-shadow:0 calc(var(--u)*30) calc(var(--u)*60) calc(var(--u)*-20) rgba(15,23,42,.35)}
.mk .screen{width:100%;height:100%;border-radius:calc(var(--u)*35);overflow:hidden;background:#efeae2;display:flex;flex-direction:column}
.mk .notch{position:absolute;left:50%;top:calc(var(--u)*18);width:calc(var(--u)*80);height:calc(var(--u)*20);border-radius:calc(var(--u)*12);background:#111827;transform:translateX(-50%);z-index:3}
.mk .bar{background:#0b7d5e;color:#fff;padding:calc(var(--u)*40) calc(var(--u)*16) calc(var(--u)*12);display:flex;align-items:center;gap:calc(var(--u)*10)}
.mk .av{width:calc(var(--u)*32);height:calc(var(--u)*32);border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.mk .av img{width:calc(var(--u)*26);height:calc(var(--u)*26);display:block}
.mk .bar b{font-size:calc(var(--u)*14);display:block;line-height:1.25}
.mk .bar span{font-size:calc(var(--u)*11);opacity:.85}
.mk .chat{flex:1;padding:calc(var(--u)*14) calc(var(--u)*12);display:flex;flex-direction:column;gap:calc(var(--u)*8)}
.mk .msg{background:#fff;border-radius:calc(var(--u)*10) calc(var(--u)*10) calc(var(--u)*10) calc(var(--u)*3);padding:calc(var(--u)*9) calc(var(--u)*11);font-size:calc(var(--u)*12);line-height:1.4;max-width:92%;box-shadow:0 calc(var(--u)*1) calc(var(--u)*1) rgba(0,0,0,.06)}
.mk .msg.me{align-self:flex-end;background:#d9fdd3;border-radius:calc(var(--u)*10) calc(var(--u)*10) calc(var(--u)*3) calc(var(--u)*10)}
.mk .msg b{display:block;font-size:calc(var(--u)*12);margin-bottom:calc(var(--u)*2)}
.mk .t{display:block;text-align:right;font-size:calc(var(--u)*9);color:#94a3b8;margin-top:calc(var(--u)*3)}
.mk .ticks{color:#53bdeb;letter-spacing:calc(var(--u)*-2)}
.mk .tag{display:table;font-size:calc(var(--u)*10);font-weight:700;color:#2563eb;background:#eff6ff;border-radius:calc(var(--u)*20);padding:calc(var(--u)*3) calc(var(--u)*8);margin-bottom:calc(var(--u)*6)}
.mk .opt{display:block;text-align:center;color:#0284c7;font-weight:600;border-top:calc(var(--u)*1) solid #eef2f7;padding-top:calc(var(--u)*7);margin-top:calc(var(--u)*7);font-size:calc(var(--u)*12)}
.mk .video{position:relative;height:calc(var(--u)*60);border-radius:calc(var(--u)*7);background:linear-gradient(135deg,#334155,#1e293b);display:flex;align-items:center;justify-content:center;margin-bottom:calc(var(--u)*6)}
.mk .video i{width:calc(var(--u)*26);height:calc(var(--u)*26);border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center}
.mk .video i::after{content:"";border-left:calc(var(--u)*9) solid #1e293b;border-top:calc(var(--u)*6) solid transparent;border-bottom:calc(var(--u)*6) solid transparent;margin-left:calc(var(--u)*3)}
.mk .video em{position:absolute;right:calc(var(--u)*6);bottom:calc(var(--u)*5);font-style:normal;font-size:calc(var(--u)*9);font-weight:700;color:#fff;background:rgba(0,0,0,.55);border-radius:calc(var(--u)*4);padding:calc(var(--u)*1) calc(var(--u)*4)}
.mk .steps{padding-left:calc(var(--u)*16);font-size:calc(var(--u)*12);line-height:1.55}
.mk .photo{width:calc(var(--u)*120);height:calc(var(--u)*78);border-radius:calc(var(--u)*7);display:flex;align-items:center;justify-content:center;margin-bottom:calc(var(--u)*2)}
.mk .photo.hazard{background:linear-gradient(#bae6fd 0 45%,#a8a29e 45%)}
.mk .photo.hazard svg{width:calc(var(--u)*34);height:calc(var(--u)*31)}
.mk .photo.blusser{background:linear-gradient(135deg,#fecaca,#fca5a5);width:calc(var(--u)*70);height:calc(var(--u)*96)}
.mk .photo.blusser svg{width:calc(var(--u)*26);height:calc(var(--u)*44)}
.mk .card{position:absolute;background:#fff;border-radius:calc(var(--u)*16);padding:calc(var(--u)*14) calc(var(--u)*16);box-shadow:0 calc(var(--u)*18) calc(var(--u)*40) calc(var(--u)*-14) rgba(15,23,42,.28)}
.mk .card.left{left:calc(var(--u)*6);top:calc(var(--u)*96);width:calc(var(--u)*188)}
.mk .card.right{right:calc(var(--u)*6);bottom:calc(var(--u)*96);width:calc(var(--u)*184)}
.mk .kicker{font-size:calc(var(--u)*10);font-weight:800;letter-spacing:.08em;color:#399dff;text-transform:uppercase}
.mk .statrow{display:flex;align-items:flex-end;gap:calc(var(--u)*8);margin-top:calc(var(--u)*6)}
.mk .big{font-size:calc(var(--u)*36);font-weight:800;line-height:1;letter-spacing:-.02em}
.mk .sub{font-size:calc(var(--u)*11);color:#64748b;line-height:1.3;margin-top:calc(var(--u)*3)}
.mk .statrow .sub{margin:0 0 calc(var(--u)*2)}
.mk .prog{height:calc(var(--u)*6);border-radius:calc(var(--u)*4);background:#e2e8f0;margin-top:calc(var(--u)*10);overflow:hidden}
.mk .prog i{display:block;height:100%;background:#22c55e}
.mk .trend{font-size:calc(var(--u)*11);font-weight:700;color:#16a34a;margin-top:calc(var(--u)*6)}
.mk .ttl{font-size:calc(var(--u)*15);font-weight:800;line-height:1.25;margin-top:calc(var(--u)*5)}
.mk .check{list-style:none;margin-top:calc(var(--u)*8);display:flex;flex-direction:column;gap:calc(var(--u)*7)}
.mk .check li{display:flex;align-items:center;gap:calc(var(--u)*8);font-size:calc(var(--u)*12);font-weight:600}
.mk .check li i{width:calc(var(--u)*16);height:calc(var(--u)*16);border-radius:50%;border:calc(var(--u)*2) solid #cbd5e1;flex:none;position:relative}
.mk .check li.done i{background:#22c55e;border-color:#22c55e}
.mk .check li.done i::after{content:"";position:absolute;left:calc(var(--u)*3);top:0;width:calc(var(--u)*4);height:calc(var(--u)*8);border-right:calc(var(--u)*2) solid #fff;border-bottom:calc(var(--u)*2) solid #fff;transform:rotate(45deg)}
.mk .check li:not(.done){color:#64748b}
.mk .pills{display:flex;flex-wrap:wrap;gap:calc(var(--u)*5);margin-top:calc(var(--u)*8)}
.mk .pill{font-size:calc(var(--u)*11);font-weight:600;border:calc(var(--u)*1) solid #e2e8f0;border-radius:calc(var(--u)*20);padding:calc(var(--u)*4) calc(var(--u)*9);line-height:1.2}
.mk .pill.on{background:#399dff;color:#fff;border-color:#399dff}
.mk .qrcard{width:calc(var(--u)*150)}
.mk .qrcard .qr{display:block;width:calc(var(--u)*96);height:calc(var(--u)*96);margin:calc(var(--u)*9) 0 calc(var(--u)*7)}
.mk .qrcard .cap{font-size:calc(var(--u)*12);font-weight:700}
.mk .card.green{background:#16a34a;color:#fff;display:flex;align-items:center;gap:calc(var(--u)*10);padding:calc(var(--u)*13) calc(var(--u)*15)}
.mk .card.green>i{width:calc(var(--u)*22);height:calc(var(--u)*22);border-radius:50%;background:#fff;flex:none;position:relative}
.mk .card.green>i::after{content:"";position:absolute;left:calc(var(--u)*8);top:calc(var(--u)*4);width:calc(var(--u)*5);height:calc(var(--u)*10);border-right:calc(var(--u)*2) solid #16a34a;border-bottom:calc(var(--u)*2) solid #16a34a;transform:rotate(45deg)}
.mk .card.green b{display:block;font-size:calc(var(--u)*14);line-height:1.25}
.mk .card.green span{display:block;font-size:calc(var(--u)*11);opacity:.9;margin-top:calc(var(--u)*2)}
@media (max-width:1024px){.mk{min-height:calc(min(560px,100vw - 80px) * 0.8667)}}
a:has(>.mk),.elementor-widget-container:has(>.mk),.elementor-widget-container:has(>a>.mk){display:block;width:100%}
