/* auth gate (sign-in) + About modal */
#authGate{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:20000;padding:20px;overflow:hidden;
  background:
    radial-gradient(circle at 16% 18%, rgba(29,158,117,0.12), transparent 42%),
    radial-gradient(circle at 84% 82%, rgba(46,79,110,0.40), transparent 46%),
    linear-gradient(160deg, var(--navy-dark) 0%, #0c1826 55%, #070d15 100%);
  transition:opacity .45s ease, transform .45s ease;
}
#authGate::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:repeating-radial-gradient(circle at 50% 42%, rgba(255,255,255,0.028) 0, rgba(255,255,255,0.028) 1px, transparent 1px, transparent 36px);
}
#authGate.gate-exit{opacity:0;transform:scale(.97);pointer-events:none}
#authGate .gate-box{position:relative;z-index:1;width:100%;max-width:372px;background:rgba(26,46,68,0.70);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);border:1px solid rgba(255,255,255,0.08);border-radius:var(--r-2xl);padding:32px 30px 28px;box-shadow:0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 1px rgba(29,158,117,0.08);animation:gateBoxIn .5s .95s cubic-bezier(.2,.8,.2,1) both}
@keyframes gateBoxIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}

/* brief branded moment before the sign-in card appears — logo announces
   itself, then the card reveals. Click anywhere to skip; respects
   prefers-reduced-motion. */
#cold-mark{position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;animation:coldMarkSeq 1.15s cubic-bezier(.2,.8,.2,1) both}
#cold-mark img{width:64px;height:64px}
@keyframes coldMarkSeq{
  0%{opacity:0;transform:scale(.6) rotate(-8deg)}
  35%{opacity:1;transform:scale(1.06) rotate(2deg)}
  55%,85%{opacity:1;transform:scale(1) rotate(0)}
  100%{opacity:0;transform:scale(.94) rotate(0)}
}
#authGate.skip-intro #cold-mark{animation:none;opacity:0;display:none}
#authGate.skip-intro .gate-box{animation:none;opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  #cold-mark{display:none}
  #authGate .gate-box{animation:none;opacity:1;transform:none}
}
#authGate .gate-logo{display:flex;align-items:center;gap:10px;margin-bottom:24px}
#authGate .gate-logo .eco-mark{animation:gateLogoIn .6s .15s cubic-bezier(.2,.8,.2,1) both}
#authGate .gate-logo .eco-mark-grad{animation:gateLogoIn .6s .15s cubic-bezier(.2,.8,.2,1) both}
@keyframes gateLogoIn{from{opacity:0;transform:scale(.7) rotate(-6deg)}to{opacity:1;transform:scale(1) rotate(0)}}
#authGate .gate-title{font-size:var(--t-2xl);font-weight:700;color:var(--text);letter-spacing:.2px}
#authGate .gate-tag{font-size:var(--t-sm);color:var(--text-muted);margin-top:2px}
#authGate .gate-field{margin-bottom:12px}
#authGate .gate-field label{display:block;font-size:var(--t-sm);color:var(--text-muted);margin-bottom:5px}
#authGate input{width:100%;padding:9px 11px;background:rgba(17,30,46,0.65);border:1px solid var(--divider);border-radius:var(--radius);color:var(--text);font-size:var(--t-md);font-family:inherit;transition:border-color .15s ease, box-shadow .15s ease}
#authGate input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(29,158,117,0.18)}
#authGate .gate-submit{width:100%;padding:10px;margin-top:6px;background:var(--brand-grad);border:none;border-radius:var(--radius);color:#fff;font-size:var(--t-md);font-weight:600;cursor:pointer;font-family:inherit;transition:filter .15s ease, box-shadow .15s ease, transform .1s ease}
#authGate .gate-submit:hover{filter:brightness(1.08);box-shadow:0 6px 18px rgba(29,158,117,.32)}
#authGate .gate-submit:active{transform:translateY(1px)}
#authGate .gate-submit:disabled{opacity:.65;cursor:not-allowed;box-shadow:none}
#authGate .gate-err{font-size:var(--t-base);color:var(--red);background:var(--red-bg);border:1px solid var(--red-border);border-radius:var(--r-md);padding:8px 10px;margin-bottom:12px;display:none}
#authGate .gate-msg{font-size:var(--t-base);color:var(--teal);background:var(--teal-dim);border:1px solid var(--teal-border);border-radius:var(--r-md);padding:8px 10px;margin-bottom:12px;display:none}
#authGate .gate-link{font-size:var(--t-base);color:var(--text-dim);cursor:pointer;text-decoration:underline;background:none;border:none;padding:0;margin-top:10px;display:inline-block;font-family:inherit;transition:color .15s ease}
#authGate .gate-link:hover{color:var(--teal)}
#authGate .gate-link:disabled{color:var(--text-faint);cursor:not-allowed;text-decoration:none}
#authGate .gate-sub{font-size:var(--t-sm);color:var(--text-faint);margin-bottom:18px;line-height:1.5}
#authGate .gate-hint{font-size:var(--t-xs);color:var(--text-faint);margin-top:14px;line-height:1.5}

#authGate .gate-info-btn{display:block;width:100%;margin-top:16px;padding:9px 10px;background:var(--teal-dim);border:1px solid var(--teal-border);border-radius:var(--radius);color:var(--teal);font-size:var(--t-base);font-weight:600;text-align:center;cursor:pointer;font-family:inherit;transition:background .15s ease,border-color .15s ease}
#authGate .gate-info-btn:hover{background:rgba(29,158,117,0.26);border-color:rgba(29,158,117,0.5)}
#aboutGate .about-highlights{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:16px 0 4px}
#aboutGate .about-hl-item{display:flex;align-items:center;gap:8px;font-size:var(--t-base);color:var(--text-muted);background:rgba(255,255,255,0.03);border:1px solid var(--divider);border-radius:7px;padding:8px 10px}
#aboutGate .about-hl-item span.ic{font-size:var(--t-xl);flex-shrink:0}
#aboutGate .about-demo-btn{display:inline-flex;align-items:center;gap:7px;margin-top:16px;padding:8px 14px;background:rgba(255,255,255,0.04);border:1px solid var(--divider);border-radius:20px;color:var(--text-muted);font-size:var(--t-base);font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s ease,color .15s ease}
#aboutGate .about-demo-btn:hover{background:rgba(255,255,255,0.09);color:var(--text)}
#aboutGate .about-demo-btn .play{width:18px;height:18px;border-radius:50%;background:var(--brand-grad);color:#fff;display:flex;align-items:center;justify-content:center;font-size:var(--t-3xs);flex-shrink:0}
#aboutGate .about-demo-note{display:none;margin-top:10px;font-size:var(--t-base);color:var(--text-faint);line-height:1.6;background:rgba(255,255,255,0.03);border:1px solid var(--divider);border-radius:7px;padding:10px 12px}
#aboutGate .about-demo-note.open{display:block}
#aboutGate .about-demo-note strong{color:var(--text-muted);display:block;margin-bottom:3px}
#aboutGate .about-shot-promo{font-size:var(--t-base);color:var(--text-dim);line-height:1.55;margin-top:8px}


#aboutGate{position:fixed;inset:0;z-index:20050;display:none;align-items:center;justify-content:center;padding:20px;overflow-y:auto;background:rgba(7,13,20,0.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#aboutGate.open{display:flex}
#aboutGate .about-box{position:relative;width:100%;max-width:620px;max-height:88vh;overflow-y:auto;background:rgba(26,46,68,0.92);border:1px solid rgba(255,255,255,0.08);border-radius:var(--r-2xl);padding:32px 30px 28px;box-shadow:0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 1px rgba(29,158,117,0.08);animation:gateBoxIn .35s cubic-bezier(.2,.8,.2,1) both}
#aboutGate .about-close{position:absolute;top:16px;right:16px;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,0.06);border:1px solid var(--divider);color:var(--text-muted);font-size:var(--t-lg);line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s ease,color .15s ease;font-family:inherit}
#aboutGate .about-close:hover{background:rgba(255,255,255,0.12);color:var(--text)}
#aboutGate .about-logo{display:flex;align-items:center;gap:10px;margin-bottom:6px}
#aboutGate .about-logo img{height:34px;width:auto;display:block}
#aboutGate .about-title{font-size:19px;font-weight:700;color:var(--text)}
#aboutGate .about-tag{font-size:var(--t-sm);color:var(--text-muted);margin-top:2px}
#aboutGate .about-lede{font-size:var(--t-md);color:var(--text-muted);line-height:1.6;margin:18px 0 4px}
#aboutGate .about-h{font-size:var(--t-sm);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin:26px 0 12px}
#aboutGate .about-shots{display:flex;flex-direction:column;gap:18px}
#aboutGate .about-shot img{display:block;width:100%;height:auto;border-radius:var(--r-lg);border:1px solid var(--divider)}
#aboutGate .about-shot-cap{font-size:var(--t-sm);color:var(--text-faint);margin-top:6px;line-height:1.4}
#aboutGate .about-shot-t{font-size:var(--t-base);font-weight:600;color:var(--text);margin-bottom:6px}
#aboutGate .about-states{display:flex;flex-wrap:wrap;gap:6px}
#aboutGate .about-state{font-size:var(--t-sm);padding:5px 10px;border-radius:20px;border:1px solid var(--divider);color:var(--text-dim)}
#aboutGate .about-state.live{border-color:var(--teal-border);background:var(--teal-dim);color:var(--teal)}
#aboutGate .about-cov-note{font-size:var(--t-base);color:var(--text-faint);line-height:1.6;margin-top:10px}
#aboutGate .about-price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
#aboutGate .about-price{border:1px solid var(--divider);border-radius:var(--r-lg);padding:12px 10px;text-align:center}
#aboutGate .about-price.feat{border-color:var(--teal-border);background:var(--teal-dim)}
#aboutGate .about-price-lbl{font-size:var(--t-sm);color:var(--text-muted);margin-bottom:4px}
#aboutGate .about-price-val{font-size:var(--t-2xl);font-weight:700;color:var(--text)}
#aboutGate .about-price-per{font-size:var(--t-xs);font-weight:400;color:var(--text-faint);display:block;margin-top:2px}
#aboutGate .about-price-note{font-size:var(--t-sm);color:var(--text-faint);line-height:1.6;margin-top:12px}
#aboutGate .about-cta{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
#aboutGate .about-btn{flex:1;min-width:150px;text-align:center;padding:10px;border-radius:var(--radius);font-size:var(--t-base);font-weight:600;cursor:pointer;text-decoration:none;font-family:inherit;border:none;transition:background .15s ease}
#aboutGate .about-btn-p{background:var(--brand-grad);color:#fff}
#aboutGate .about-btn-p:hover{filter:brightness(1.08)}
#aboutGate .about-btn-s{background:rgba(255,255,255,0.05);color:var(--text-muted);border:1px solid var(--divider)}
#aboutGate .about-btn-s:hover{background:rgba(255,255,255,0.1);color:var(--text)}
@media(max-width:520px){#aboutGate .about-price-grid{grid-template-columns:1fr}}