:root{color-scheme:dark;font-family:Inter,"Segoe UI",Arial,sans-serif;color:#f4f8ff;background:#03182e;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-width:280px}.scene{position:fixed;inset:0;background:#03182e;overflow:hidden;pointer-events:none;user-select:none}.scene video,.scene img{position:absolute;width:100%;height:100%;object-fit:contain;object-position:center;opacity:.7}.scene [hidden]{display:none}video::-webkit-media-controls{display:none!important}main{position:relative;min-height:100svh;display:grid;place-items:center;padding:32px 20px}.login{width:min(100%,420px);padding:36px;border:1px solid #ffffff30;border-radius:24px;background:linear-gradient(145deg,#102c46ed,#071b30ed);box-shadow:0 28px 90px #0006,inset 0 1px 0 #ffffff10;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity 550ms ease,transform 550ms cubic-bezier(.2,.7,.2,1),visibility 550ms}.login.visible{opacity:1;visibility:visible;transform:none}.brand{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.2em}.brand strong{font-weight:750}.brand-mark{position:relative;display:grid;place-items:center;width:37px;height:37px;font-size:32px;font-weight:800;letter-spacing:-.13em;padding-right:4px;color:#64dad6}.brand-mark span{position:absolute;width:7px;height:7px;right:4px;top:4px;border-radius:50%;background:#f9b75b}.heading{margin:30px 0 28px}.eyebrow{font-size:9px;font-weight:650;letter-spacing:.19em;color:#75d8dd!important;margin-bottom:13px!important}h1{font-size:27px;letter-spacing:-.045em;line-height:1.2;margin:0 0 10px;font-weight:650}.heading p{font-size:14px;color:#b1c3d5;margin:0;line-height:1.5}label{display:block;margin:0 0 9px;font-size:12px;font-weight:600;color:#d8e4ef}.field{display:flex;align-items:center;position:relative;margin-bottom:21px;border:1px solid #ffffff26;background:#04172a99;border-radius:11px;transition:border-color .18s,box-shadow .18s}.field:focus-within{border-color:#72dcdf;box-shadow:0 0 0 3px #72dcdf1a}.field>svg{flex-shrink:0;width:18px;height:18px;margin-left:15px;stroke:#8faac0;stroke-width:1.5}input{background:transparent;border:0;outline:0;padding:15px 13px;width:100%;min-width:0;color:#fff;font:inherit;font-size:14px}input::placeholder{color:#8199ad}button{font:inherit;cursor:pointer}.reveal{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border:0;border-radius:8px;background:transparent;color:#91aec6}.reveal svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.5}.reveal:hover{color:#fff}.submit{display:flex;align-items:center;justify-content:center;gap:16px;width:100%;padding:15px 18px;border:1px solid #9be9e849;border-radius:11px;background:linear-gradient(110deg,#74dedc,#8ce4dc);color:#06263b;font-size:14px;font-weight:750;box-shadow:0 5px 22px #33b9c21a;transition:filter .2s,transform .2s}.submit:hover{filter:brightness(1.07);transform:translateY(-1px)}.submit span{font-size:20px;line-height:1}.feedback{font-size:12px;line-height:1.6;color:#c4d9e8;margin:0}.feedback:not(:empty){margin-top:16px}.signature{text-align:center;font-size:9px;letter-spacing:.14em;color:#8fa8bf;margin:28px 0 0}.signature span{padding:0 6px;color:#68d6d6}button:focus-visible{outline:2px solid #fff;outline-offset:4px}.noscript{position:fixed;bottom:10px;padding:10px;background:#03182e}
@media(max-width:480px){main{padding:24px 18px}.login{padding:29px 25px;border-radius:20px}h1{font-size:25px}.heading{margin-top:26px}.scene video,.scene img{object-fit:contain}}
@media(prefers-reduced-motion:reduce){.login,.submit{transition:none}}
@media(orientation:portrait),(max-width:767px){
  main{min-height:100dvh;padding:0 8vw}
  .login{width:84vw;height:92dvh;min-height:0;max-width:none;overflow-y:auto;padding:1.5em;display:flex;flex-direction:column;justify-content:safe center;font-size:clamp(16px,4.1vw,42px);border-radius:1.3em;background:rgb(7 27 48 / 30%);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 12px 40px #0002}
  .login>*{flex-shrink:0}
  .login .brand{font-size:.7em;letter-spacing:.13em;gap:.7em}
  .login .heading{margin:1.7em 0}
  .login .eyebrow{font-size:.6em;margin-bottom:1em!important}
  .login h1{font-size:1.65em}
  .login .heading p{font-size:.9em;color:#edf4fc}
  .login label{font-size:.8em;margin-bottom:.6em;color:#fff}
  .login .field{background:#071b30;margin-bottom:1.4em;border-radius:.7em}
  .login input{font-size:1em;padding:1em .8em}
  .login .field>svg{width:1.15em;height:1.15em;margin-left:1em}
  .login .reveal{width:2.8em;height:2.8em;font-size:1em}
  .login .reveal svg{width:1.2em;height:1.2em}
  .login .submit{font-size:.95em;padding:1em;border-radius:.7em}
  .login .signature{font-size:.55em;line-height:1.7;margin-top:2em;color:#e3edf7}
  .login .feedback{font-size:.8em}
}
.login .brand-logo{display:block;width:100%;max-width:20em;margin:0 auto;font-size:inherit;letter-spacing:normal}.brand-logo img{display:block;width:100%;height:auto;object-fit:contain;opacity:1}

/* Shared blue landing background; iPhone presentation stays inside the login. */
:root,body,.scene{background:#074782}
.brand-logo [hidden]{display:none!important}
.iphone .brand-logo video,.iphone .brand-logo #animated-intro{position:static;display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;opacity:1;border-radius:.6em}
.iphone .brand-logo #animation{display:block}
.iphone .brand-logo #brand-image{aspect-ratio:16/9;object-fit:contain;border-radius:.6em}