/* The hero's two ways in: book a walkthrough, or leave a work email for a login. */
.hero-actions{flex-wrap:wrap}
.login-ask{display:flex;align-items:center;height:56px;padding:4px;border-radius:12px;background:#ffffff26;box-shadow:inset 0 0 0 1px #ffffff59;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.login-ask input[type=email]{width:220px;height:100%;padding:0 14px;border:0;border-radius:9px;background:transparent;color:#fff;font:inherit;font-size:16px;outline:none}
.login-ask input[type=email]::placeholder{color:#e3ecf8}
.login-ask:focus-within{box-shadow:inset 0 0 0 1px #fff,0 0 0 3px #93baf2}
.login-ask button{height:100%;padding:0 16px;border-radius:9px;background:#fff;color:var(--ink);font-size:15px;white-space:nowrap;transition:background-color 160ms}
.login-ask button:disabled{opacity:.7;cursor:default}
.login-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* The note sits over the clouds, so it gets its own quiet backing to stay readable on any sky. */
.login-note{width:fit-content;max-width:100%;margin:14px auto 0;padding:7px 14px;border-radius:12px;text-align:center;font-size:14px;line-height:20px;color:#fff;background:#0a2a5ccc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.login-note.error{color:#ffe1dc}
.login-note a{color:inherit}
.login-ask.sent{padding:0 18px;color:#fff;font-size:15px}
@media(hover:hover) and (pointer:fine){.login-ask button:hover{background:#eaf1fa}}
@media(max-width:760px){
 .hero-actions{flex-direction:column;align-items:stretch;width:100%;max-width:360px;margin:0 auto}
 .hero-actions .primary{text-align:center}
 .login-ask{height:52px}
 .login-ask{min-width:0}
 .login-ask input[type=email]{flex:1;width:0;min-width:0}
 .login-ask button{padding:0 12px;font-size:14px}
}