.attendance-launch{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid #dbe4ef;border-radius:999px;background:#f8fbff;color:#193451;font:700 11px/1 Inter,sans-serif;cursor:pointer;transition:.2s}.attendance-launch:hover{border-color:#b9d5ff;transform:translateY(-1px);box-shadow:0 8px 20px #183e7a12}.attendance-launch>i,.attendance-eyebrow i,.live-pill i{width:7px;height:7px;border-radius:50%;background:#00c995;box-shadow:0 0 0 4px #00c99518;animation:attendancePulse 1.8s ease-in-out infinite}
.attendance-overlay{position:fixed;z-index:9999;inset:0;display:grid;place-items:start center;padding:92px 24px 30px;visibility:hidden;opacity:0;transition:opacity .25s,visibility .25s}.attendance-overlay.is-open{visibility:visible;opacity:1}.attendance-backdrop{position:absolute;inset:0;border:0;background:#06152f99;backdrop-filter:blur(12px);cursor:default}.attendance-shell{position:relative;width:min(940px,100%);max-height:calc(100vh - 122px);overflow:auto;padding:28px;border:1px solid #ffffff8a;border-radius:26px;background:linear-gradient(145deg,#ffffffee,#f1f7ffeb 62%,#f2edffea);box-shadow:0 35px 100px #06152f55;transform:translateY(-12px) scale(.985);transition:transform .28s}.attendance-overlay.is-open .attendance-shell{transform:none}
.attendance-top{display:flex;justify-content:space-between;gap:30px;margin-bottom:22px}.attendance-top h2{margin:9px 0 6px;color:#071c3e;font-size:34px;letter-spacing:-.05em}.attendance-top p{max-width:560px;margin:0;color:#62728a;font-size:13px;line-height:1.55}.attendance-eyebrow{display:flex;align-items:center;gap:9px;color:#52657d;font-size:9px;font-weight:800;letter-spacing:.14em}.attendance-close{width:38px;height:38px;border:1px solid #dce4ef;border-radius:50%;background:#fff;color:#183451;font-size:24px;cursor:pointer}.attendance-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:14px}.attendance-camera,.attendance-records{padding:20px;border:1px solid #dfe7f1;border-radius:18px;background:#ffffffb8;box-shadow:inset 0 1px #fff}
.camera-status,.records-heading{display:flex;align-items:center;gap:9px}.camera-status{color:#53657c;font-size:10px;font-weight:700}.camera-status>i{width:7px;height:7px;border-radius:50%;background:#00c995}.camera-status>b{margin-left:auto;padding:5px 8px;border-radius:999px;background:#e8f8f4;color:#078466;font-size:8px;letter-spacing:.08em}.face-frame{position:relative;height:250px;margin:15px 0;border:1px solid #cfe0f4;border-radius:15px;background:radial-gradient(circle at 50% 33%,#e8f8f3,transparent 30%),linear-gradient(145deg,#edf6ff,#f3efff);overflow:hidden}.face-frame:before{content:"";position:absolute;width:150px;height:184px;left:50%;top:28px;transform:translateX(-50%);border:2px dashed #379ef7;border-radius:48% 48% 42% 42%;opacity:.7}.face-head{position:absolute;width:65px;height:78px;left:50%;top:60px;transform:translateX(-50%);border-radius:48%;background:linear-gradient(145deg,#a8bfd8,#7d94b4)}.face-shoulders{position:absolute;width:140px;height:80px;left:50%;bottom:35px;transform:translateX(-50%);border-radius:70px 70px 15px 15px;background:linear-gradient(145deg,#8fa8c7,#667f9f)}.scan-line{position:absolute;left:20%;right:20%;height:2px;top:40px;background:linear-gradient(90deg,transparent,#00c995,#268bff,transparent);box-shadow:0 0 13px #00c995;animation:faceScan 2.7s ease-in-out infinite}.face-frame em{position:absolute;left:0;right:0;bottom:10px;text-align:center;color:#536780;font-size:9px;font-style:normal}.attendance-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:11px;background:#eef3f8}.attendance-tabs button{padding:9px;border:0;border-radius:8px;background:transparent;color:#687a91;font:700 10px Inter,sans-serif;cursor:pointer}.attendance-tabs button.is-active{background:#fff;color:#071c3e;box-shadow:0 5px 12px #102e5b12}.attendance-primary{display:grid;grid-template-columns:38px 1fr auto;align-items:center;width:100%;margin-top:10px;padding:12px 14px;border:0;border-radius:12px;background:linear-gradient(110deg,#00c995,#268bff 56%,#682cf5);color:#fff;text-align:left;cursor:pointer;box-shadow:0 12px 25px #268bff25}.attendance-primary .fingerprint{grid-row:1/3;font-size:26px}.attendance-primary b{font-size:12px}.attendance-primary small{grid-column:3;grid-row:1/3;font-size:9px;opacity:.8}.attendance-feedback{margin:10px 0 0;color:#65778e;font-size:10px;text-align:center}
.records-heading{justify-content:space-between}.records-heading span{color:#76869b;font-size:8px;font-weight:800;letter-spacing:.1em}.records-heading h3{margin:5px 0 0;color:#071c3e;font-size:20px;letter-spacing:-.04em}.live-pill{display:flex;align-items:center;gap:7px;padding:7px 9px;border-radius:999px;background:#e8f8f4;color:#078466!important}.attendance-metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:18px 0}.attendance-metrics article{padding:13px;border-radius:12px;background:#f1f5fa}.attendance-metrics span,.attendance-metrics strong{display:block}.attendance-metrics span{color:#74869c;font-size:9px}.attendance-metrics strong{margin-top:6px;color:#071c3e;font-size:22px}.attendance-metrics strong b{font-size:inherit}.attendance-list{display:grid;gap:7px}.attendance-list article{display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:10px;padding:10px;border:1px solid #e4eaf2;border-radius:11px}.attendance-list article>i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:linear-gradient(145deg,#dff9f0,#e9e3ff);color:#174665;font-size:9px;font-style:normal;font-weight:800}.attendance-list b,.attendance-list small{display:block}.attendance-list b{color:#183451;font-size:10px}.attendance-list small{margin-top:3px;color:#8190a3;font-size:8px}.attendance-list em{padding:5px 7px;border-radius:999px;background:#e7f8f3;color:#078466;font-size:8px;font-style:normal;font-weight:800}.attendance-records>a{display:inline-block;margin-top:18px;color:#267dd7;font-size:11px;font-weight:800}
body.attendance-demo-open{overflow:hidden}.attendance-primary.is-success{background:linear-gradient(110deg,#02aa7f,#00c995)}.attendance-primary.is-out{background:linear-gradient(110deg,#ff9b52,#e85083)}
.attendance-shell{border-color:#ffffffd9;background:linear-gradient(145deg,#fffffffc,#f1f7fffa 62%,#f2edfffa)}.attendance-camera,.attendance-records{background:#fffffff2}
.attendance-video,.attendance-photo,.attendance-canvas{position:absolute;inset:0;width:100%;height:100%}.attendance-video,.attendance-photo{object-fit:cover;transform:scaleX(-1)}.attendance-canvas{display:none}.attendance-photo{display:none;z-index:2}.face-frame.has-photo .attendance-photo{display:block}.face-frame.has-photo .attendance-video{display:none}.camera-placeholder{position:absolute;inset:0}.face-frame.camera-live .camera-placeholder{display:none}.camera-retry{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);padding:10px 14px;border:1px solid #c9d9ec;border-radius:999px;background:#fff;color:#173c61;font:800 10px Inter,sans-serif;cursor:pointer}.face-frame.camera-live .camera-retry,.face-frame.has-photo .camera-retry{display:none}.face-frame>em{z-index:4;padding:4px 9px;background:#ffffffc9;border-radius:999px;width:max-content;max-width:90%;margin:auto}.scan-line{z-index:3}.camera-status.is-error>i{background:#f15a73;box-shadow:0 0 0 4px #f15a7318}.camera-status.is-live>i{background:#00c995}.attendance-primary:disabled{cursor:not-allowed;filter:grayscale(.35);opacity:.62}.captured-profile{display:grid;grid-template-columns:56px 1fr;gap:11px;align-items:center;margin:0 0 12px;padding:9px;border:1px solid #dfe7f1;border-radius:12px;background:linear-gradient(145deg,#edfbf7,#eef5ff)}.captured-profile[hidden]{display:none}.captured-profile img{width:56px;height:56px;border-radius:10px;object-fit:cover;transform:scaleX(-1)}.captured-profile small,.captured-profile b,.captured-profile em{display:block}.captured-profile small{color:#74869c;font-size:7px;font-weight:800;letter-spacing:.1em}.captured-profile b{margin:4px 0 2px;color:#071c3e;font-size:11px}.captured-profile em{color:#728198;font-size:8px;font-style:normal}
.attendance-steps button:disabled{opacity:.48;cursor:default}.attendance-steps button.is-active{opacity:1}.attendance-convert{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:12px;padding:14px 16px;border-radius:13px;background:linear-gradient(110deg,#071c3e,#163f75 55%,#492a96);color:#fff!important;box-shadow:0 14px 30px #16376028}.attendance-convert[hidden]{display:none}.attendance-convert span b,.attendance-convert span small{display:block}.attendance-convert span b{font-size:12px}.attendance-convert span small{margin-top:4px;color:#bcd0e8;font-size:8px}.attendance-convert>em{padding:9px 11px;border-radius:999px;background:#fff;color:#502bd1;font-size:9px;font-style:normal;font-weight:800;white-space:nowrap}
@keyframes attendancePulse{50%{opacity:.45;transform:scale(.85)}}@keyframes faceScan{0%,100%{top:40px;opacity:.4}50%{top:195px;opacity:1}}
.attendance-camera.is-complete{display:grid;place-items:center;min-height:540px;background:radial-gradient(circle at 50% 18%,#e5fff7,transparent 30%),linear-gradient(145deg,#f8fffd,#f3f7ff 60%,#f5f0ff)}.attendance-success-card{max-width:420px;text-align:center;animation:successReveal .55s cubic-bezier(.2,.8,.2,1) both}.attendance-success-card[hidden]{display:none}.faceid-success{position:relative;width:112px;height:112px;margin:0 auto 22px;border-radius:30px;background:#fff;box-shadow:0 18px 45px #157b6920}.faceid-corner{position:absolute;width:28px;height:28px;border-color:#00b98c;border-style:solid}.faceid-corner.c1{left:15px;top:15px;border-width:4px 0 0 4px;border-radius:13px 0 0}.faceid-corner.c2{right:15px;top:15px;border-width:4px 4px 0 0;border-radius:0 13px 0 0}.faceid-corner.c3{left:15px;bottom:15px;border-width:0 0 4px 4px;border-radius:0 0 0 13px}.faceid-corner.c4{right:15px;bottom:15px;border-width:0 4px 4px 0;border-radius:0 0 13px}.faceid-eye{position:absolute;top:43px;width:7px;height:14px;border-radius:5px;background:#087f72;animation:faceBlink 2.1s ease-in-out 1}.faceid-eye.e1{left:38px}.faceid-eye.e2{right:38px}.faceid-smile{position:absolute;left:37px;bottom:34px;width:38px;height:20px;border:4px solid #087f72;border-top:0;border-radius:0 0 24px 24px;animation:smileDraw .7s .2s both}.faceid-ring{position:absolute;inset:-7px;border:3px solid #00c995;border-radius:37px;animation:faceRing .9s .1s both}.success-kicker{color:#078466;font-size:9px;font-weight:900;letter-spacing:.13em}.attendance-success-card h3{margin:10px 0 12px;color:#071c3e;font-size:30px;letter-spacing:-.055em}.attendance-success-card>p{margin:0;color:#617188;font-size:12px;line-height:1.65}.success-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:18px 0}.success-meta span{padding:11px;border:1px solid #dce8f2;border-radius:11px;background:#fff;text-align:left}.success-meta small,.success-meta b{display:block}.success-meta small{color:#8290a3;font-size:7px;font-weight:800;letter-spacing:.1em}.success-meta b{margin-top:4px;color:#083f39;font-size:12px}.success-invite{font-weight:700;color:#30445f!important}.attendance-success-card .attendance-convert{margin-top:16px;text-align:left}.attendance-success-card .attendance-convert span b{font-size:13px}
@keyframes successReveal{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}@keyframes faceRing{0%{opacity:0;transform:scale(.7)}55%{opacity:1;transform:scale(1.07)}100%{opacity:0;transform:scale(1.18)}}@keyframes smileDraw{from{opacity:0;transform:scaleX(.2)}to{opacity:1;transform:none}}@keyframes faceBlink{50%{height:3px;top:49px}}
.attendance-camera.is-complete{min-height:460px;padding:24px}.attendance-camera.is-complete .attendance-success-card{max-width:390px}.attendance-camera.is-complete .faceid-success{width:96px;height:96px;margin-bottom:16px;border-radius:27px}.attendance-camera.is-complete .faceid-eye{top:36px}.attendance-camera.is-complete .faceid-eye.e1{left:32px}.attendance-camera.is-complete .faceid-eye.e2{right:32px}.attendance-camera.is-complete .faceid-smile{left:31px;bottom:28px;width:34px}.attendance-camera.is-complete .attendance-success-card h3{font-size:27px}.attendance-records.is-complete{display:grid;place-items:center;min-height:460px;background:radial-gradient(circle at 80% 12%,#efeaff,transparent 30%),linear-gradient(145deg,#071c3e,#123963 58%,#39227f);border-color:#244d7d}.attendance-records.is-complete>*:not(.attendance-right-conversion){display:none!important}.attendance-right-conversion{max-width:350px;color:#fff;animation:successReveal .55s .12s both}.attendance-right-conversion[hidden]{display:none}.right-conversion-kicker{color:#7fe6ce;font-size:9px;font-weight:900;letter-spacing:.13em}.attendance-right-conversion h3{margin:12px 0 14px;color:#fff;font-size:31px;line-height:1.05;letter-spacing:-.055em}.attendance-right-conversion>p{margin:0;color:#b9cbe0;font-size:13px;line-height:1.65}.attendance-right-conversion ul{display:grid;gap:10px;margin:22px 0;padding:0;list-style:none}.attendance-right-conversion li{position:relative;padding-left:22px;color:#e5eef8;font-size:11px}.attendance-right-conversion li:before{content:'✓';position:absolute;left:0;color:#63e1c2;font-weight:900}.attendance-right-conversion .attendance-convert{margin-top:24px;background:linear-gradient(110deg,#00c995,#268bff 56%,#682cf5);box-shadow:0 16px 35px #0003}.attendance-right-conversion .attendance-convert span b{font-size:14px}.attendance-right-conversion .attendance-convert span small{color:#eef7ff}
.attendance-camera.is-complete>.camera-status,.attendance-camera.is-complete>.face-frame,.attendance-camera.is-complete>.attendance-steps,.attendance-camera.is-complete>.attendance-primary,.attendance-camera.is-complete>.attendance-feedback{display:none!important}.attendance-right-conversion h3{margin:8px 0 10px;font-size:28px}.attendance-right-conversion>p{font-size:12px;line-height:1.5}.attendance-right-conversion ul{gap:7px;margin:14px 0}.attendance-right-conversion .attendance-convert{margin-top:14px;padding:12px 14px}
/* Homepage rhythm: remove oversized dead zones while retaining breathing room. */
.platform-pillars{padding:96px 0}.os-problem{padding:105px 0}.os-workflow{padding:92px 0}.os-modules{padding:105px 0}.os-local{padding:96px 0}.os-quote{padding:100px 0}.os-close{padding:98px 0}.pillar-grid{margin-top:0}.os-section-head h2{margin-bottom:0}
@media(max-width:1120px){.attendance-launch{display:inline-flex}.hajiri-menu{gap:19px}.hajiri-actions{gap:12px}}
@media(max-width:700px){.attendance-launch{position:fixed;right:14px;bottom:16px;z-index:9900;padding:12px 15px;background:#fff;box-shadow:0 14px 35px #071c3e35}.attendance-overlay{padding:66px 8px 10px}.attendance-shell{padding:16px;max-height:calc(100vh - 76px);border-radius:20px}.attendance-layout{grid-template-columns:1fr}.attendance-top h2{font-size:28px}.face-frame{height:220px}.attendance-records{padding:16px}.attendance-camera.is-complete{display:none}.attendance-records.is-complete{min-height:calc(100vh - 190px);padding:24px}.attendance-right-conversion h3{font-size:28px}.attendance-right-conversion .attendance-convert{flex-direction:column;align-items:stretch;text-align:center}.attendance-right-conversion .attendance-convert>em{text-align:center}.platform-pillars,.os-problem,.os-workflow,.os-modules,.os-local,.os-quote,.os-close{padding:74px 0}}
/* Single-screen modal, progression rewards, and completion celebration. */
.attendance-overlay{padding:18px 20px}.attendance-shell{display:flex;flex-direction:column;width:min(940px,100%);height:min(680px,calc(100vh - 36px));max-height:none;overflow:hidden;padding:22px 28px}.attendance-top{flex:0 0 auto;margin-bottom:16px}.attendance-top h2{margin-top:6px;font-size:31px}.attendance-top p{line-height:1.45}.attendance-layout{flex:1;min-height:0}.attendance-camera,.attendance-records{height:100%;min-height:0;overflow:hidden}.face-frame{height:220px;margin:11px 0}.attendance-camera.is-complete,.attendance-records.is-complete{min-height:0;height:100%}.attendance-camera.is-complete .faceid-success{width:88px;height:88px;margin-bottom:12px}.attendance-camera.is-complete .faceid-eye{top:32px}.attendance-camera.is-complete .faceid-eye.e1{left:29px}.attendance-camera.is-complete .faceid-eye.e2{right:29px}.attendance-camera.is-complete .faceid-smile{left:28px;bottom:25px;width:32px}.attendance-camera.is-complete .attendance-success-card h3{margin:7px 0 8px;font-size:25px}.attendance-camera.is-complete .success-meta{margin:12px 0}.attendance-camera.is-complete .success-invite{font-size:11px}.attendance-steps button.is-done{color:#078466!important;background:#e5f8f2!important}.attendance-steps button.is-done:before{content:'✓ ';font-weight:900}.attendance-toast{position:absolute;z-index:30;right:76px;top:22px;display:flex;align-items:center;gap:10px;min-width:265px;padding:12px 14px;border:1px solid #bdebdc;border-radius:14px;background:#fffffff5;box-shadow:0 16px 42px #071c3e2b;opacity:0;pointer-events:none;transform:translateY(-14px) scale(.96);transition:.35s cubic-bezier(.2,.8,.2,1)}.attendance-toast.is-visible{opacity:1;transform:none}.attendance-toast>i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:linear-gradient(145deg,#00c995,#268bff);color:#fff;font-style:normal;font-weight:900}.attendance-toast b,.attendance-toast small{display:block}.attendance-toast b{color:#071c3e;font-size:11px}.attendance-toast small{margin-top:3px;color:#62748c;font-size:8px}.attendance-confetti{position:absolute;z-index:20;left:50%;top:44%;width:1px;height:1px;pointer-events:none}.attendance-confetti i{position:absolute;width:7px;height:12px;border-radius:2px;background:#00c995;animation:confettiBurst 1.6s var(--d) cubic-bezier(.15,.7,.25,1) both}.attendance-confetti i:nth-child(3n){background:#682cf5}.attendance-confetti i:nth-child(3n+1){background:#268bff}.attendance-confetti i:nth-child(4n){border-radius:50%;background:#ffd34e}@keyframes confettiBurst{0%{opacity:0;transform:translate(0,0) rotate(0)}12%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r))}}
@media(max-width:700px){.attendance-overlay{padding:8px}.attendance-shell{height:calc(100vh - 16px);max-height:none;padding:14px;overflow:hidden}.attendance-top{margin-bottom:10px}.attendance-top h2{font-size:24px}.attendance-top p{font-size:10px}.attendance-layout{grid-template-columns:1fr}.attendance-camera,.attendance-records{height:auto}.face-frame{height:190px}.attendance-records:not(.is-complete){display:none}.attendance-records.is-complete{display:grid;height:100%;min-height:0;padding:20px}.attendance-right-conversion h3{font-size:27px}.attendance-toast{left:14px;right:14px;top:64px;min-width:0}.attendance-camera.is-complete{display:none}}

/* Mobile Safari: size the initial camera dialog to the visual viewport and
   allow its contents to scroll when browser chrome or permission UI is open. */
@media(max-width:700px){
  .attendance-overlay{top:0;right:0;bottom:auto;left:0;width:100%;height:var(--attendance-viewport-height,100dvh);padding:max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom));overflow:hidden}
  .attendance-shell{box-sizing:border-box;width:100%;height:auto;max-height:calc(var(--attendance-viewport-height,100dvh) - 16px);overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .attendance-layout{flex:0 0 auto;min-height:auto}
  .attendance-camera{height:auto;overflow:visible}
  .attendance-close{flex:0 0 38px}
}