.attendance-right-conversion{position:relative}
.signup-orb-wrap{position:absolute;z-index:0;right:-30px;top:-44px;width:150px;height:150px;filter:saturate(1.12);pointer-events:none}
.signup-orb-wrap:before{content:'';position:absolute;inset:30px;border-radius:50%;background:#5c3dff55;filter:blur(28px);animation:orbGlow 3s ease-in-out infinite}
.signup-liquid-orb{position:relative;z-index:2;display:block}
.signup-orb-wrap>i{position:absolute;z-index:3;left:50%;top:50%;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 18px 6px #fff;animation:orbGlint 2.8s ease-in-out infinite}
.attendance-right-conversion>.right-conversion-kicker,.attendance-right-conversion>h3,.attendance-right-conversion>p,.attendance-right-conversion>ul,.attendance-right-conversion>.attendance-convert{position:relative;z-index:2}
.attendance-right-conversion>h3{max-width:255px}.attendance-right-conversion>p{max-width:285px}
.attendance-right-conversion>.attendance-convert{outline:2px solid #8af0d4;outline-offset:3px;animation:ctaBreathe 2.7s ease-in-out infinite;transition:transform .2s}
.attendance-right-conversion>.attendance-convert:hover{transform:translateY(-2px) scale(1.01)}
@keyframes orbGlow{50%{opacity:.6;transform:scale(1.18)}}
@keyframes orbGlint{0%,100%{transform:translate(-20px,-24px);opacity:.45}50%{transform:translate(20px,12px);opacity:1}}
@keyframes ctaBreathe{50%{box-shadow:0 18px 42px #00c99555}}
@media(prefers-reduced-motion:reduce){.signup-orb-wrap:before,.signup-orb-wrap>i,.attendance-right-conversion>.attendance-convert{animation:none}}
@media(max-width:700px){.attendance-right-conversion h3{max-width:72%;font-size:27px}.signup-orb-wrap{right:-24px;top:-40px;transform:scale(.82)}}
.attendance-records.is-complete{padding:0!important}.attendance-right-conversion{width:100%;height:100%;max-width:none;padding:34px 28px;display:flex;flex-direction:column;justify-content:center;overflow:hidden;border-radius:18px}.signup-orb-wrap{inset:0;width:100%;height:100%;opacity:1;filter:saturate(1.25);overflow:hidden;transform:none}.signup-orb-wrap:before{inset:8%;background:radial-gradient(circle at 78% 32%,#fff8,#573bff55 25%,transparent 60%);filter:blur(24px);animation:orbGlow 4.5s ease-in-out infinite}.signup-liquid-orb{position:absolute;left:48%!important;right:0!important;top:0!important;bottom:0!important;width:52%!important;height:100%!important}.signup-orb-wrap>i{left:84%;top:18%;animation:orbGlintWide 5.5s ease-in-out infinite}.attendance-right-conversion:after{content:'';position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,#071c3ef7 0,#0b2d58ed 48%,#071c3e22 72%,transparent 100%);pointer-events:none}.attendance-right-conversion>h3{max-width:270px}.attendance-right-conversion>p{max-width:280px}.attendance-right-conversion>.attendance-convert{width:100%}@keyframes orbGlintWide{0%,100%{transform:translate(-70px,-15px);opacity:.35}50%{transform:translate(35px,120px);opacity:1}}
.attendance-right-conversion{animation:successReveal .35s both}
@media(max-width:700px){.attendance-right-conversion{padding:28px 22px}.attendance-right-conversion h3{max-width:82%;font-size:27px}.signup-orb-wrap{inset:0;width:100%;height:100%;transform:none}}
.attendance-right-conversion .signup-orb-wrap>i{display:none!important}

/* Completion modal: keep verification and conversion visible together without scrolling. */
.attendance-overlay.is-complete *,
.attendance-overlay.is-complete *:before,
.attendance-overlay.is-complete *:after{box-sizing:border-box}
.attendance-overlay.is-complete .attendance-layout{overflow:hidden}
.attendance-overlay.is-complete .attendance-right-conversion{justify-content:flex-start}
.attendance-overlay.is-complete .attendance-right-conversion>.attendance-convert{margin-top:auto}

@media(max-width:700px){
  .attendance-overlay.is-complete{padding:8px!important}
  .attendance-overlay.is-complete .attendance-shell{box-sizing:border-box!important;width:100%!important;height:calc(100dvh - 16px)!important;max-height:calc(100dvh - 16px)!important;padding:12px!important;padding-bottom:max(12px,env(safe-area-inset-bottom))!important;overflow:hidden!important}
  .attendance-overlay.is-complete .attendance-top{min-height:74px;margin:0 0 8px!important;padding:2px 2px 0}
  .attendance-overlay.is-complete .attendance-top h2{margin:6px 0 0!important;font-size:23px!important;line-height:1!important}
  .attendance-overlay.is-complete .attendance-top p{display:none!important}
  .attendance-overlay.is-complete .attendance-close{flex:0 0 38px;width:38px;height:38px}
  .attendance-overlay.is-complete .attendance-layout{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:68px minmax(0,1fr)!important;gap:8px!important;min-height:0!important;overflow:hidden!important}
  .attendance-overlay.is-complete .attendance-camera.is-complete{box-sizing:border-box!important;display:grid!important;place-items:center!important;width:100%!important;height:68px!important;min-height:68px!important;padding:8px 12px!important;overflow:hidden!important;border-radius:14px!important}
  .attendance-overlay.is-complete .attendance-success-card{position:relative;display:block!important;width:100%!important;max-width:none!important;padding:4px 6px 4px 46px;text-align:left!important}
  .attendance-overlay.is-complete .attendance-success-card:before{content:'✓';position:absolute;left:2px;top:50%;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:linear-gradient(145deg,#00c995,#268bff);color:#fff;font-size:18px;font-weight:900;transform:translateY(-50%);box-shadow:0 8px 18px #158c7828}
  .attendance-overlay.is-complete .attendance-success-card .faceid-success,
  .attendance-overlay.is-complete .attendance-success-card>p,
  .attendance-overlay.is-complete .attendance-success-card .success-meta{display:none!important}
  .attendance-overlay.is-complete .attendance-success-card .success-kicker{display:block;font-size:7px!important;letter-spacing:.11em!important}
  .attendance-overlay.is-complete .attendance-success-card h3{margin:3px 0 0!important;font-size:17px!important;line-height:1.05!important;letter-spacing:-.035em!important}
  .attendance-overlay.is-complete .attendance-records.is-complete{box-sizing:border-box!important;display:grid!important;width:100%!important;height:auto!important;min-height:0!important;padding:0!important;overflow:hidden!important;border-radius:16px!important}
  .attendance-overlay.is-complete .attendance-right-conversion{box-sizing:border-box!important;width:100%!important;height:100%!important;min-height:0!important;padding:16px!important;justify-content:flex-start!important;overflow:hidden!important;border-radius:16px!important}
  .attendance-overlay.is-complete .attendance-right-conversion:after{background:radial-gradient(circle at 88% 12%,#5829bd77,transparent 29%),linear-gradient(180deg,#071c3efa 0,#0b2d58f2 56%,#071c3ef8 100%)!important}
  .attendance-overlay.is-complete .right-conversion-kicker{font-size:7px!important;letter-spacing:.11em!important}
  .attendance-overlay.is-complete .attendance-right-conversion h3{max-width:78%!important;margin:7px 0 8px!important;font-size:clamp(20px,6.4vw,25px)!important;line-height:1.02!important}
  .attendance-overlay.is-complete .attendance-right-conversion>p{max-width:78%!important;font-size:10px!important;line-height:1.4!important}
  .attendance-overlay.is-complete .attendance-right-conversion ul{gap:5px!important;margin:10px 0!important}
  .attendance-overlay.is-complete .attendance-right-conversion li{padding-left:18px!important;font-size:9px!important;line-height:1.25!important}
  .attendance-overlay.is-complete .signup-orb-wrap{inset:0!important;opacity:.72!important;overflow:hidden!important}
  .attendance-overlay.is-complete .signup-liquid-orb{z-index:0!important;left:auto!important;right:-4%!important;top:31%!important;bottom:auto!important;width:70%!important;height:48%!important;border-radius:50%!important;clip-path:circle(48% at 50% 50%);opacity:.9!important}
  .attendance-overlay.is-complete .attendance-right-conversion>.attendance-convert{box-sizing:border-box!important;position:relative!important;z-index:3!important;display:flex!important;width:100%!important;min-height:58px!important;margin:auto 0 0!important;padding:10px 11px!important;align-items:center!important;flex-direction:row!important;gap:9px!important;text-align:left!important;border-radius:12px!important}
  .attendance-overlay.is-complete .attendance-convert span{min-width:0}
  .attendance-overlay.is-complete .attendance-convert span b{font-size:11px!important;line-height:1.15!important}
  .attendance-overlay.is-complete .attendance-convert span small{margin-top:3px!important;font-size:7px!important;line-height:1.2!important}
  .attendance-overlay.is-complete .attendance-convert>em{margin-left:auto!important;padding:8px 9px!important;font-size:8px!important;text-align:center!important}
}

@media(max-width:370px), (max-height:700px) and (max-width:700px){
  .attendance-overlay.is-complete .attendance-layout{grid-template-rows:60px minmax(0,1fr)!important}
  .attendance-overlay.is-complete .attendance-camera.is-complete{height:60px!important;min-height:60px!important}
  .attendance-overlay.is-complete .attendance-right-conversion{padding:13px!important}
  .attendance-overlay.is-complete .attendance-right-conversion ul{grid-template-columns:1fr 1fr!important}
  .attendance-overlay.is-complete .attendance-right-conversion li:last-child{display:none!important}
  .attendance-overlay.is-complete .attendance-right-conversion>.attendance-convert{min-height:52px!important}
}

@media(min-width:701px) and (max-height:760px){
  .attendance-overlay.is-complete .attendance-right-conversion{padding:22px!important}
  .attendance-overlay.is-complete .attendance-right-conversion h3{margin:7px 0 9px!important;font-size:25px!important}
  .attendance-overlay.is-complete .attendance-right-conversion>p{font-size:11px!important;line-height:1.45!important}
  .attendance-overlay.is-complete .attendance-right-conversion ul{gap:6px!important;margin:10px 0!important}
  .attendance-overlay.is-complete .attendance-right-conversion>.attendance-convert{min-height:58px!important;margin-top:auto!important}
}

/* Compact phone completion: content-sized card, no floating page triggers. */
@media(max-width:700px){
  body.attendance-demo-open .attendance-launch{display:none!important;visibility:hidden!important;pointer-events:none!important}
  .attendance-overlay.is-complete .attendance-shell{height:auto!important;max-height:calc(100dvh - 16px)!important;overflow:hidden!important}
  .attendance-overlay.is-complete .attendance-layout{flex:0 0 auto!important;grid-template-rows:62px auto!important;height:auto!important;overflow:hidden!important}
  .attendance-overlay.is-complete .attendance-camera.is-complete{height:62px!important;min-height:62px!important}
  .attendance-overlay.is-complete .attendance-records.is-complete{height:auto!important;min-height:0!important}
  .attendance-overlay.is-complete .attendance-right-conversion{height:auto!important;min-height:0!important;padding:14px 15px!important}
  .attendance-overlay.is-complete .signup-orb-wrap{display:none!important}
  .attendance-overlay.is-complete .attendance-right-conversion:after{background:radial-gradient(circle at 92% 4%,#6136c866,transparent 30%),linear-gradient(145deg,#071c3efb,#0b315cf8 68%,#21146ff4)!important}
  .attendance-overlay.is-complete .attendance-right-conversion h3{max-width:100%!important;margin:7px 0!important;font-size:clamp(20px,6vw,24px)!important}
  .attendance-overlay.is-complete .attendance-right-conversion>p{max-width:100%!important;font-size:10px!important;line-height:1.35!important}
  .attendance-overlay.is-complete .attendance-right-conversion ul{gap:4px!important;margin:9px 0!important}
  .attendance-overlay.is-complete .attendance-right-conversion li{font-size:9px!important}
  .attendance-overlay.is-complete .attendance-right-conversion>.attendance-convert{min-height:56px!important;margin:13px 0 0!important}
}

@media(max-width:370px), (max-height:700px) and (max-width:700px){
  .attendance-overlay.is-complete .attendance-top{min-height:64px!important}
  .attendance-overlay.is-complete .attendance-layout{grid-template-rows:56px auto!important}
  .attendance-overlay.is-complete .attendance-camera.is-complete{height:56px!important;min-height:56px!important}
  .attendance-overlay.is-complete .attendance-right-conversion{padding:11px 13px!important}
  .attendance-overlay.is-complete .attendance-right-conversion h3{font-size:19px!important}
  .attendance-overlay.is-complete .attendance-right-conversion>.attendance-convert{min-height:50px!important;margin-top:9px!important}
}