@font-face{font-family:"Barlow";src:url("/fonts/Barlow-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
:root{--blue:#1f4f9c;--blue-d:#163a73;--red:#e30b2c;--ink:#1b1f24;--mute:#5d6672;--line:#dde2e8;--soft:#f3f5f8;--ok:#0f7a3d;--r:14px}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:#fff;overflow-x:hidden}
h1,h2,h3,.brand,.btn{font-family:"Barlow",system-ui,sans-serif;font-weight:700}
h1{font-size:clamp(32px,5vw,54px);line-height:1.05;margin:0 0 18px;color:var(--blue-d)}
h2{font-size:26px;margin:0 0 12px;color:var(--blue-d)}
h3{font-size:18px;margin:0 0 8px}
a{color:var(--blue)}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.stripes{height:10px;background:repeating-linear-gradient(90deg,var(--red) 0 28px,#fff 28px 44px)}
header.top{border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;flex-wrap:wrap}
.brand{font-size:22px;color:var(--blue-d);text-decoration:none;letter-spacing:.2px}
.brand span{color:var(--red)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:12px 24px;font-size:17px;
  background:var(--red);color:#fff;text-decoration:none;cursor:pointer;text-transform:uppercase;letter-spacing:.3px;min-height:46px}
.btn:hover{filter:brightness(.94)}
.btn[disabled]{opacity:.55;cursor:default}
.btn.blue{background:var(--blue)}
.btn.line{background:#fff;color:var(--blue-d);box-shadow:inset 0 0 0 2px var(--blue)}
.btn.small{padding:8px 14px;font-size:14px;min-height:36px}
.btn.link{background:none;color:var(--blue);padding:6px 0;min-height:0;text-transform:none;font-family:inherit;font-weight:600;font-size:15px}
input[type=email],input[type=text],input[type=search]{font:inherit;width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
input:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
label{display:block;font-size:14px;font-weight:600;color:var(--mute);margin:0 0 5px}
.msg{font-size:15px;margin:10px 0 0;min-height:1.5em}
.msg.err{color:#b00020}.msg.ok{color:var(--ok)}
/* landing */
.hero{padding:56px 0 36px}
.hero .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.hero p.lead{font-size:20px;color:var(--mute);max-width:620px;margin:0 0 26px}
.hero .shots{display:flex;gap:14px;justify-content:center}
.hero .shots img{width:31%;max-width:150px;border-radius:12px;box-shadow:0 8px 24px rgba(16,40,80,.18)}
.steps{background:var(--soft);padding:44px 0}
.steps ol{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.steps li{background:#fff;border-radius:var(--r);padding:22px;border:1px solid var(--line)}
.steps li b{display:inline-flex;width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;align-items:center;justify-content:center;font-family:"Barlow";margin-bottom:10px}
.stay{padding:44px 0 64px}
.stay .wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.stay ul{margin:8px 0 0;padding-left:20px}
footer{border-top:1px solid var(--line);color:var(--mute);font-size:14px;padding:18px 0 28px}
/* sign in */
.card{max-width:460px;margin:64px auto;padding:32px;border:1px solid var(--line);border-radius:var(--r)}
.card p{color:var(--mute)}
.card form{display:grid;gap:14px;margin-top:18px}
/* demo */
.formats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:22px 0}
.fcard{border:2px solid var(--line);border-radius:var(--r);background:#fff;padding:10px;cursor:pointer;text-align:left;font:inherit;color:inherit}
.fcard img{width:100%;aspect-ratio:1/1.4;object-fit:cover;object-position:top;border-radius:8px;display:block;background:var(--soft)}
.fcard span{display:block;font-weight:600;font-size:14px;margin-top:8px;line-height:1.25}
.fcard[aria-pressed=true]{border-color:var(--blue);box-shadow:0 0 0 3px rgba(31,79,156,.15)}
.work{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:32px;align-items:start;padding-bottom:56px}
.groups{display:grid;gap:16px}
.group{border:1px solid var(--line);border-radius:var(--r);padding:18px}
.el{display:grid;gap:8px;margin-top:12px}
.el:first-of-type{margin-top:6px}
.pic{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.pic img{width:84px;height:84px;object-fit:contain;background:var(--soft);border-radius:10px;border:1px solid var(--line)}
.pic .acts{display:flex;gap:8px;flex-wrap:wrap}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.row3{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:10px}
.side{position:sticky;top:16px;display:grid;gap:14px;justify-items:center}
.phone{width:320px;height:640px;border-radius:38px;background:#101418;padding:14px;box-shadow:0 12px 34px rgba(0,0,0,.25)}
.phone .screen{width:100%;height:100%;border-radius:26px;overflow:hidden;background:#fff;position:relative}
.phone iframe{width:100%;height:100%;border:0;display:block}
.phone .empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:28px;color:var(--mute);font-size:15px}
.qr{display:flex;gap:12px;align-items:center;font-size:14px;color:var(--mute);width:320px}
.qr img{width:96px;height:96px;border-radius:8px;border:1px solid var(--line)}
.actions{display:grid;gap:10px;width:320px}
.actions .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.send{display:grid;grid-template-columns:1fr auto;gap:8px;width:320px}
dialog{border:0;border-radius:var(--r);padding:0;width:min(760px,94vw);max-height:86vh;box-shadow:0 20px 60px rgba(0,0,0,.3)}
dialog::backdrop{background:rgba(10,20,40,.45)}
.pick-head{display:flex;gap:10px;padding:16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;padding:16px;overflow:auto;max-height:calc(86vh - 80px)}
.prod{border:1px solid var(--line);border-radius:10px;background:#fff;padding:8px;cursor:pointer;text-align:left;font:inherit;color:inherit}
.prod img{width:100%;aspect-ratio:1;object-fit:contain}
.prod span{display:block;font-size:13px;line-height:1.25;margin-top:4px}
.prod b{display:block;color:var(--red);font-size:14px}
.who{display:flex;gap:14px;align-items:center;font-size:14px;color:var(--mute);flex-wrap:wrap}
.sr{position:absolute;left:-9999px}
@media (max-width:980px){
  .hero .wrap,.stay .wrap{grid-template-columns:1fr}
  .work{grid-template-columns:1fr}
  .side{position:static}
}
@media (max-width:720px){
  .wrap{padding:0 16px}
  .steps ol{grid-template-columns:1fr}
  .formats{grid-template-columns:repeat(3,1fr);gap:8px}
  .fcard{padding:6px}.fcard span{font-size:12px}
  .hero{padding:32px 0 24px}
  .row3{grid-template-columns:1fr 1fr}
  .row3 .note{grid-column:1/-1}
}
@media (max-width:360px){.phone{width:300px;height:600px}.qr,.actions,.send{width:300px}}