:root{
  --navy:#11235A;
  --navy-2:#0C1A45;
  --navy-soft:#3A4A78;
  --green:#A6E78A;
  --green-deep:#8FD96E;
  --gray-1:#ECEEF3;
  --gray-2:#DCE0E9;
  --line:#D9DEE9;
  --white:#fff;
  --radius:16px;
  --maxw:430px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
[hidden]{display:none !important;}
html,body{height:100%;}
body{
  font-family:"Heebo",system-ui,Arial,sans-serif;
  background:#C9CFDC;color:var(--navy);
  display:flex;align-items:center;justify-content:center;min-height:100dvh;
}

/* ===== app shell (phone) ===== */
.app{
  position:relative;width:100%;max-width:var(--maxw);height:100dvh;max-height:932px;
  background:linear-gradient(180deg,var(--gray-1),var(--gray-2));
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 30px 80px rgba(17,35,90,.25);
}
@media(min-width:480px){ .app{height:92dvh;border-radius:38px;border:10px solid #0A0F22;} }

/* ===== topbar ===== */
.topbar{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;
  gap:9px;padding:13px 20px 11px;background:var(--white);flex:0 0 auto;}
.logo img{height:32px;width:auto;display:block;}
.progress{display:flex;gap:7px;justify-content:center;}
.progress .dot{width:7px;height:7px;border-radius:50%;background:var(--gray-2);transition:.3s;}
.progress .dot.done{background:var(--navy-soft);}
.progress .dot.active{background:var(--green-deep);transform:scale(1.35);}
.back{position:absolute;right:16px;top:50%;transform:translateY(-50%);border:none;background:none;
  font-size:30px;line-height:1;color:var(--navy);cursor:pointer;font-weight:300;padding:4px 8px;}

/* ===== stage / screens ===== */
.stage{position:relative;flex:1;overflow:hidden;}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateX(24px);
  transition:opacity .35s ease,transform .35s ease;overflow-y:auto;}
.screen.is-active{opacity:1;visibility:visible;transform:none;}
.pad{padding:30px 26px 26px;}
.center{align-items:center;text-align:center;justify-content:center;}

/* ===== typography ===== */
h1{font-size:38px;line-height:1.08;font-weight:900;letter-spacing:-.5px;}
h1 span{color:var(--navy);}
h2{font-size:28px;line-height:1.18;font-weight:800;letter-spacing:-.3px;}
.h2-right{text-align:right;}
.sub{font-size:16px;line-height:1.55;color:var(--navy-soft);margin-top:12px;max-width:320px;}
.sub-right{font-size:15px;color:var(--navy-soft);text-align:right;margin-top:6px;}
.legal{font-size:11.5px;color:#8C97BE;margin-top:16px;line-height:1.5;text-align:center;}

/* ===== buttons ===== */
.btn{border:none;cursor:pointer;font-family:inherit;font-size:18px;font-weight:700;
  padding:17px 26px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;
  gap:10px;transition:transform .15s,background .15s,box-shadow .15s;color:var(--navy);}
.btn:active{transform:scale(.98);}
.btn-green{background:var(--green);box-shadow:0 12px 26px rgba(17,35,90,.18);}
.btn-green:hover{background:var(--green-deep);}
.btn-ghost{background:transparent;border:1.5px solid var(--navy);color:var(--navy);}
.btn.wide{width:100%;margin-top:22px;}
.arr{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;}
.btn-link{background:none;border:none;font-family:inherit;color:var(--navy-soft);
  font-size:15px;font-weight:600;cursor:pointer;padding:10px;}
.btn-link.light{color:#fff;}
.center-link{display:block;margin:10px auto 0;}

/* ===== opening (coded: crisp text + sharp cut-out presenter) ===== */
.opening{padding:0;overflow:hidden;background:#FAFBFE;display:flex;align-items:center;justify-content:center;}
.app[data-screen="opening"] .topbar{display:none;}  /* splash has its own logo */
.op-wrap{position:relative;height:100%;aspect-ratio:1080/1920;max-width:100%;margin:auto;}
.op-splash{width:100%;height:100%;object-fit:contain;display:block;}
.op-text{position:absolute;top:24%;left:8%;right:8%;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:13px;}
.op-text h1{font-size:30px;line-height:1.16;font-weight:900;letter-spacing:-.5px;color:var(--navy);}
.op-text p{font-size:14.5px;line-height:1.5;color:var(--navy-soft);max-width:300px;}
.op-text .btn{padding:13px 24px;font-size:16px;min-width:214px;}
.opening-grid{position:relative;flex:1;}
.opening-photo{position:absolute;bottom:0;left:-4%;width:56%;max-width:260px;z-index:1;pointer-events:none;}
.opening-photo img{width:100%;height:auto;display:block;}
.opening-copy{position:absolute;top:6%;right:24px;left:41%;z-index:2;
  text-align:right;display:flex;flex-direction:column;align-items:flex-end;}
.opening-copy h1{margin-bottom:18px;font-size:34px;}
.opening-copy p{font-size:15.5px;line-height:1.55;color:var(--navy-soft);margin-bottom:24px;}
.opening-copy .btn{align-self:flex-end;}
.trust{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:12px;
  color:var(--navy-soft);background:rgba(255,255,255,.72);padding:7px 11px;border-radius:10px;}
.trust i{width:4px;height:4px;border-radius:50%;background:#9aa4c2;}

/* ===== icon badge ===== */
.icon-badge{width:104px;height:104px;border-radius:50%;background:var(--navy);
  display:flex;align-items:center;justify-content:center;margin-bottom:30px;
  box-shadow:0 16px 34px rgba(17,35,90,.28);}
.icon-badge .mic{width:46px;height:46px;stroke:#fff;stroke-width:1.6;fill:#fff;}
.icon-badge .mic path[fill="none"]{stroke:#fff;fill:none;stroke-linecap:round;}
.stack{display:flex;flex-direction:column;gap:12px;width:100%;max-width:330px;margin-top:30px;}

/* ===== camera screens ===== */
.camera{background:#0A0F1E;}
.cam-guide{position:relative;z-index:3;margin:18px auto 0;background:rgba(10,15,30,.72);
  color:#fff;font-size:15px;font-weight:600;padding:10px 18px;border-radius:30px;
  backdrop-filter:blur(4px);}
.viewfinder{position:relative;flex:1;margin:16px;border-radius:20px;overflow:hidden;
  background:
    linear-gradient(135deg,#2a3550,#10182c);
  display:flex;align-items:flex-end;justify-content:center;cursor:pointer;}
.viewfinder::after{content:"📸  הקש לפתיחת המצלמה";position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;color:#9fb0d6;font-size:14px;font-weight:500;}
.viewfinder.has-shot::after{display:none;}
.viewfinder img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.vf-brackets i{position:absolute;width:30px;height:30px;border:3px solid rgba(255,255,255,.85);z-index:2;}
.vf-brackets i:nth-child(1){top:16px;right:16px;border-bottom:none;border-left:none;}
.vf-brackets i:nth-child(2){top:16px;left:16px;border-bottom:none;border-right:none;}
.vf-brackets i:nth-child(3){bottom:16px;right:16px;border-top:none;border-left:none;}
.vf-brackets i:nth-child(4){bottom:16px;left:16px;border-top:none;border-right:none;}
.vf-hint{position:relative;z-index:2;margin-bottom:20px;color:#fff;font-size:13px;
  background:rgba(10,15,30,.6);padding:6px 14px;border-radius:20px;}
.cam-bar{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:8px 0 26px;position:relative;}
.shutter{width:72px;height:72px;border-radius:50%;background:#fff;border:5px solid rgba(255,255,255,.45);
  cursor:pointer;transition:transform .12s;box-shadow:0 0 0 2px var(--navy) inset;}
.shutter:active{transform:scale(.92);}
.shutter.big{box-shadow:0 0 0 2px #0A0F1E inset;}
.cam-bar .btn-link{color:#cfd8ef;position:absolute;left:18px;bottom:34px;}
.thumbs{position:absolute;right:18px;bottom:30px;display:flex;gap:6px;}
.thumbs img{width:42px;height:42px;border-radius:8px;object-fit:cover;border:2px solid #fff;}

/* ===== party doc cards ===== */
.cards{display:flex;flex-direction:column;gap:12px;margin-top:18px;}
.doc-card{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:16px;text-align:right;cursor:pointer;width:100%;
  font-family:inherit;transition:border-color .2s,box-shadow .2s;}
.doc-card:hover{box-shadow:0 6px 18px rgba(17,35,90,.08);}
.doc-card.static{cursor:default;}
.doc-ico{font-size:26px;flex:0 0 auto;}
.doc-txt{display:flex;flex-direction:column;gap:3px;flex:1;}
.doc-txt b{font-size:16px;color:var(--navy);}
.doc-txt small{font-size:12.5px;color:var(--navy-soft);}
.doc-txt.full{gap:8px;}
.doc-txt input{font-family:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--line);
  border-radius:10px;color:var(--navy);}
.doc-act{flex:0 0 auto;background:var(--green);color:var(--navy);font-weight:700;font-size:13px;
  padding:8px 14px;border-radius:20px;}
.doc-card.done{border-color:var(--green-deep);background:#F4FBEF;}
.doc-card.done .doc-act{background:var(--navy);color:#fff;}
.doc-card.done .doc-act::before{content:"✓ ";}
.doc-card.done .doc-txt small{color:#3f7d2a;font-weight:600;}

/* ===== share my details / white + subtle green outline ===== */
.btn-share{background:#fff;border:1.5px solid var(--green-deep);color:var(--navy);}
.btn-share:hover{background:#F4FBEF;}
.btn-share.sent{background:#F4FBEF;border-color:var(--green-deep);}
.btn-share.sent::before{content:"✓ ";color:#3f7d2a;}

/* ===== my insurance policy card ===== */
.policy-card{margin-top:18px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;}
.policy-row{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:13px 16px;border-bottom:1px solid var(--line);text-align:right;}
.policy-row:last-child{border-bottom:none;}
.policy-row span{font-size:13.5px;color:var(--navy-soft);}
.policy-row b{font-size:15px;color:var(--navy);}

/* ===== context ===== */
.optional-tag{align-self:flex-start;background:var(--gray-2);color:var(--navy-soft);
  font-size:12px;font-weight:600;padding:4px 12px;border-radius:20px;margin-bottom:10px;}
.field{margin-top:22px;text-align:right;}
.field>label{display:block;font-size:14px;font-weight:700;color:var(--navy);margin-bottom:10px;}
.field input{width:100%;font-family:inherit;font-size:16px;padding:13px 14px;border:1px solid var(--line);
  border-radius:12px;color:var(--navy);margin-bottom:10px;background:#fff;}
.chips{display:flex;flex-wrap:wrap;gap:9px;}
.chip{font-family:inherit;font-size:14px;font-weight:600;padding:10px 16px;border-radius:22px;
  border:1.5px solid var(--line);background:#fff;color:var(--navy-soft);cursor:pointer;transition:.2s;}
.chip.on{background:var(--navy);color:#fff;border-color:var(--navy);}

/* ===== summary ===== */
.summary-list{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:10px;}
.summary-list li{display:flex;align-items:flex-start;gap:12px;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:14px 16px;text-align:right;}
.summary-list li .s-ico{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:#F4FBEF;
  color:#3f7d2a;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;}
.summary-list li .s-ico svg{width:17px;height:17px;display:block;}
.summary-list li:not(.miss) .s-ico{background:transparent;}
.summary-list li .s-ico .s-eye{width:24px;height:24px;object-fit:contain;display:block;}
.summary-list li.miss .s-ico{background:#FCEFEF;color:#b14;}
.summary-list li .s-txt{flex:1;}
.summary-list li .s-txt b{display:block;font-size:15px;}
.summary-list li .s-txt small{font-size:13px;color:var(--navy-soft);}

/* ===== done ===== */
.done-keys{width:92px;height:auto;display:block;margin:0 auto 22px;
  filter:drop-shadow(0 10px 20px rgba(17,35,90,.16));}
.benefit{background:var(--navy);color:#fff;border-radius:20px;padding:22px 34px;margin:22px 0 4px;
  display:flex;flex-direction:column;align-items:center;gap:4px;}
.benefit-lead{font-size:13.5px;font-weight:500;color:#C7D0EA;margin-bottom:10px;max-width:260px;line-height:1.4;}
.benefit-row{display:flex;align-items:center;justify-content:center;gap:12px;}
.benefit-ico{width:42px;height:42px;flex:0 0 auto;}
.benefit-amt{font-size:46px;font-weight:900;color:var(--green);line-height:1;}
.benefit-txt{font-size:15px;font-weight:600;}
.done .stack{margin-top:26px;}

/* select fields */
.field select{width:100%;font-family:inherit;font-size:16px;padding:13px 14px;border:1px solid var(--line);
  border-radius:12px;color:var(--navy);background:#fff;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2311235A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:left 14px center;}

/* garage results */
.garage-list{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:11px;}
.garage-list li{background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px 16px;text-align:right;}
.garage-list .g-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.garage-list b{font-size:16px;color:var(--navy);}
.garage-list .g-dist{font-size:12.5px;font-weight:700;color:#3f7d2a;background:#F4FBEF;padding:3px 9px;border-radius:20px;}
.garage-list small{display:block;font-size:13px;color:var(--navy-soft);margin-top:4px;}
.garage-list .g-call{display:inline-block;margin-top:10px;font-size:13.5px;font-weight:700;color:var(--navy);
  background:var(--green);padding:8px 16px;border-radius:20px;text-decoration:none;}

/* ===== camera modal ===== */
.cam-modal{position:fixed;inset:0;z-index:100;background:#000;display:flex;flex-direction:column;}
.cam-modal video{flex:1;width:100%;object-fit:cover;}
.cam-modal-top{position:absolute;top:0;left:0;right:0;padding:18px;text-align:center;color:#fff;
  font-size:16px;font-weight:600;background:linear-gradient(180deg,rgba(0,0,0,.6),transparent);}
.cam-modal-fallback{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#cfd8ef;gap:8px;}
.cam-modal-fallback span{font-size:56px;}
.cam-modal-fallback p{font-size:18px;font-weight:600;}
.cam-modal-fallback small{font-size:13px;opacity:.7;}
.cam-modal-bar{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:0;
  padding:20px 0 34px;background:#000;position:relative;}
.cam-modal-bar .btn-link{position:absolute;left:20px;}

/* ===== review captured photo ===== */
.review-modal{position:fixed;inset:0;z-index:120;background:#0A0F1E;display:flex;flex-direction:column;
  max-width:var(--maxw);margin:0 auto;}
.review-top{padding:18px;text-align:center;color:#fff;font-size:16px;font-weight:600;}
.review-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:0 16px;overflow:hidden;}
.review-stage img{max-width:100%;max-height:100%;border-radius:14px;object-fit:contain;
  box-shadow:0 12px 30px rgba(0,0,0,.4);}
.review-count{text-align:center;color:#aeb7d4;font-size:13px;font-weight:500;padding:10px 0 2px;}
.review-bar{display:flex;gap:10px;padding:16px 16px 30px;align-items:center;}
.review-bar .btn{flex:1;padding:15px 10px;font-size:15px;}
.review-bar .btn-ghost{color:#fff;border-color:rgba(255,255,255,.45);background:transparent;}
.review-bar .btn-green{flex:1.3;}

/* ===== confirm dialog ===== */
.dialog-overlay{position:fixed;inset:0;z-index:150;background:rgba(10,15,30,.5);
  display:flex;align-items:center;justify-content:center;padding:28px;
  max-width:var(--maxw);margin:0 auto;}
.dialog{background:#fff;border-radius:20px;padding:26px 22px 20px;width:100%;max-width:340px;
  box-shadow:0 20px 50px rgba(0,0,0,.3);text-align:center;}
.dialog-q{font-size:18px;font-weight:700;color:var(--navy);line-height:1.4;margin-bottom:22px;}
.dialog-actions{display:flex;gap:10px;}
.dialog-actions .btn{flex:1;padding:14px;font-size:16px;}

/* ===== toast ===== */
.toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%);z-index:200;
  background:var(--navy);color:#fff;font-size:14px;font-weight:600;padding:12px 22px;border-radius:30px;
  box-shadow:0 10px 30px rgba(0,0,0,.3);animation:pop .25s ease;max-width:88%;text-align:center;}
@keyframes pop{from{opacity:0;transform:translate(-50%,10px);}to{opacity:1;transform:translate(-50%,0);}}