/* A compact illustration on the real issue-form screenshot. */
.hero-screen{position:relative;overflow:hidden}
.hero-demo{position:absolute;left:4%;bottom:5%;width:clamp(160px,36%,210px);height:160px;direction:rtl;pointer-events:none}
.hero-demo-scene{position:absolute;inset:0;overflow:hidden;border:1px solid #cde2ec;border-radius:13px;background:#fffffff5;box-shadow:0 10px 28px #0435692b;padding:12px 14px;color:#103f65;opacity:0}
.hero-demo-entry{opacity:1}
.hero-demo-tag{display:block;font-size:9px;color:#158da0;margin-bottom:4px}
.hero-demo-scene strong{display:block;font-size:12px}
.hero-demo-field{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px;padding:3px 7px;border:1px solid #dfebee;border-radius:5px;background:#f7fafb;font-size:8px;color:#79919e}
.hero-demo-field i{display:block;height:4px;width:47%;background:#62c0ca;border-radius:5px;transform-origin:right center}
.hero-demo-field:nth-of-type(2) i{width:35%}
.hero-demo-button{margin-top:8px;padding:3px;border-radius:5px;background:#0c94a5;color:#fff;text-align:center;font-size:8px}
.hero-demo-confirm{text-align:center}
.hero-demo-confirm .hero-demo-tag{text-align:right}
.hero-demo-check{display:grid;place-items:center;width:42px;height:42px;margin:8px auto 5px;border-radius:50%;background:#d9f6ed;color:#049c79}
.hero-demo-check svg{width:22px;height:22px;stroke-width:2.3}
.hero-demo-confirm small{display:block;margin-top:3px;color:#6d8992;font-size:9px}
.hero-demo-printer{position:relative;width:74px;height:75px;margin:5px auto 0}
.hero-demo-paper{position:absolute;z-index:1;top:8px;left:13px;width:48px;height:51px;padding:10px 7px;border:1px solid #c9dce4;border-radius:3px;background:white;box-shadow:0 3px 6px #04356915}
.hero-demo-paper i{display:block;height:3px;margin-bottom:4px;background:#b7d2dc;border-radius:2px}.hero-demo-paper i:first-child{width:65%;background:#56aebb}
.hero-demo-printer-body{position:absolute;z-index:2;left:0;right:0;bottom:0;height:26px;border-radius:5px;background:#31627c;border-top:5px solid #698b9b}
.hero-demo-printer-body i{position:absolute;top:7px;right:7px;width:5px;height:5px;border-radius:50%;background:#70e2d8}
.hero-demo-steps{display:flex;align-items:center;justify-content:center;gap:14px;padding:10px 8px 5px;color:#496977;font-size:10px}
.hero-demo-steps>span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.hero-demo-steps b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#e2f4f6;color:#087f92;font-size:10px}
.hero-demo-steps small{font-size:8px;color:#81959d;white-space:nowrap}
  .hero-demo-entry{animation:hero-entry 12s ease-in-out infinite}
  .hero-demo-confirm{animation:hero-confirm 12s ease-in-out infinite}
  .hero-demo-print{animation:hero-print 12s ease-in-out infinite}
  .hero-demo-field i{animation:hero-fill 12s ease-out infinite}
  .hero-demo-field:nth-of-type(2) i{animation-delay:.5s}
  .hero-demo-check{animation:hero-check 12s ease-out infinite}
  .hero-demo-paper{animation:hero-paper 12s ease-in-out infinite}
  .hero-demo-steps>span:nth-child(1) b{animation:hero-step-one 12s ease-in-out infinite}
  .hero-demo-steps>span:nth-child(2) b{animation:hero-step-two 12s ease-in-out infinite}
  .hero-demo-steps>span:nth-child(3) b{animation:hero-step-three 12s ease-in-out infinite}
@keyframes hero-entry{0%,27%{opacity:1;transform:translateY(0)}32%,96%{opacity:0;transform:translateY(5px)}100%{opacity:1;transform:translateY(0)}}
@keyframes hero-confirm{0%,29%{opacity:0;transform:translateY(5px)}34%,60%{opacity:1;transform:translateY(0)}65%,100%{opacity:0;transform:translateY(5px)}}
@keyframes hero-print{0%,62%{opacity:0;transform:translateY(5px)}67%,94%{opacity:1;transform:translateY(0)}99%,100%{opacity:0;transform:translateY(5px)}}
@keyframes hero-fill{0%{transform:scaleX(0)}16%,100%{transform:scaleX(1)}}
@keyframes hero-check{0%,33%{transform:scale(.6);opacity:0}39%,100%{transform:scale(1);opacity:1}}
@keyframes hero-paper{0%,69%{transform:translateY(18px)}84%,100%{transform:translateY(0)}}
@keyframes hero-step-one{0%,28%{background:#0d9caf;color:#fff}33%,96%{background:#e2f4f6;color:#087f92}100%{background:#0d9caf;color:#fff}}
@keyframes hero-step-two{0%,30%{background:#e2f4f6;color:#087f92}35%,61%{background:#0d9caf;color:#fff}66%,100%{background:#e2f4f6;color:#087f92}}
@keyframes hero-step-three{0%,63%{background:#e2f4f6;color:#087f92}68%,95%{background:#0d9caf;color:#fff}100%{background:#e2f4f6;color:#087f92}}
@media(max-width:760px){.hero-demo{width:165px;height:148px;left:3%;bottom:5%}.hero-demo-scene{padding:9px 11px}.hero-demo-steps{gap:9px;font-size:9px}.hero-demo-steps small{font-size:8px}.hero-demo-field{margin-top:6px}.hero-demo-button{margin-top:6px}}
@media(max-width:390px){.hero-demo{width:145px;height:140px}.hero-demo-scene{padding:8px 10px}.hero-demo-scene strong{font-size:11px}.hero-demo-steps{gap:6px;justify-content:space-between}.hero-demo-steps b{width:17px;height:17px}.hero-demo-steps small{font-size:7px}}