/*
 * The House of Marketers sign-in screen (the same in Ollie, Agreements, Scout and Millo).
 * The office photo with "It Is Time To Start" / "Something Wonderful" and a liquid-glass Login button across
 * them. Login blurs the photo, sends the lines off the top and bottom, and opens the liquid-glass sign-in box;
 * once signed in, the box says "Login successful. Welcome to <app>" with the app's logo.
 */
.hs { position: fixed; inset: 0; z-index: 1; overflow: hidden; background: #2a1830; color: #fff; font-family: Inter, -apple-system, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
.hs *, .hs *::before, .hs *::after { box-sizing: border-box; }
.hs [hidden] { display: none !important; }
.hs-bg { position: absolute; inset: -40px; background: var(--hs-photo) center / cover no-repeat; filter: blur(0) brightness(0.8); transform: scale(1); transition: filter 0.8s ease, transform 0.8s ease; }
.hs-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(20, 6, 28, 0.15), rgba(20, 6, 28, 0.55)); }
.hs.is-open .hs-bg { filter: blur(18px) brightness(0.7); transform: scale(1.04); }

/* The two lines, close together, with the Login button across both. */
.hs-stage { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; pointer-events: none; }
.hs-line { margin: 0; font-weight: 800; font-size: clamp(44px, 7.4vw, 112px); line-height: 1; letter-spacing: -0.02em; text-align: center; text-shadow: 0 6px 30px rgba(0, 0, 0, 0.35); transition: transform 0.8s cubic-bezier(0.6, 0, 0.2, 1), opacity 0.6s ease; }
.hs.is-open .hs-top { transform: translateY(-60vh); opacity: 0; }
.hs.is-open .hs-bottom { transform: translateY(60vh); opacity: 0; }
.hs-gap { position: relative; height: 0; width: 100%; }

/* Liquid glass. */
.hs-glass { background: linear-gradient(160deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.14)); -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.38); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -1px 0 rgba(255, 255, 255, 0.12), inset 0 0 30px rgba(255, 255, 255, 0.08), 0 30px 80px rgba(20, 0, 30, 0.45); }

.hs-login { position: absolute; left: 50%; top: 50%; width: 200px; height: 68px; margin: -34px 0 0 -100px; border-radius: 999px; color: #fff; font-family: inherit; font-size: 22px; font-weight: 600; line-height: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); cursor: pointer; pointer-events: auto; transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.hs-login:hover { transform: scale(1.04); }
.hs-login:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.hs.is-open .hs-login { opacity: 0; transform: scale(1.5); pointer-events: none; }

/* The sign-in box, in the middle of the screen. */
.hs-card { position: absolute; left: 50%; top: 50%; width: min(400px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow-y: auto; padding: 30px 28px 26px; border-radius: 28px; text-align: center; opacity: 0; transform: translate(-50%, -50%) scale(0.4); pointer-events: none; transition: opacity 0.4s ease 0.1s, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s, height 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.hs.is-open .hs-card { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
.hs-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 60% at 20% 0%, rgba(255, 255, 255, 0.3), transparent 55%); }
.hs-card > * { position: relative; transition: opacity 0.3s ease; }
.hs-logo { display: block; width: 56px; height: 56px; margin: 0 auto 12px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.25)); }
.hs-card h1 { margin: 0 0 20px; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
.hs-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 44px; border: 0; border-radius: 14px; font-family: inherit; font-size: 15px; font-weight: 500; line-height: 1; text-decoration: none; cursor: pointer; }
.hs-btn:disabled { opacity: 0.7; cursor: default; }
.hs-google { background: rgba(255, 255, 255, 0.92); color: #1c1c1c; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15); }
.hs-google:hover { background: #fff; }
.hs-or { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: rgba(255, 255, 255, 0.75); font-size: 13px; }
.hs-or::before, .hs-or::after { content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.3); }
.hs-field { display: block; margin: 0 0 12px; text-align: left; }
.hs-field span { display: block; margin: 0 0 6px 2px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.85); }
.hs-field input { width: 100%; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.14); color: #fff; font-family: inherit; font-size: 15px; outline: none; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08); }
.hs-field input:focus { border-color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.2); }
.hs-error { margin: 2px 0 12px; padding: 8px 12px; border-radius: 10px; background: rgba(255, 70, 110, 0.22); border: 1px solid rgba(255, 140, 170, 0.45); color: #fff; font-size: 13px; text-align: left; }
.hs-error:empty { display: none; }
.hs-primary { margin-top: 4px; color: #fff; background: linear-gradient(180deg, #e8489a, #c92a7e); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 20px rgba(201, 42, 126, 0.45); }
.hs-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* "Forgot your password?" */
.hs-forgot-row { margin: -4px 0 12px; text-align: right; }
.hs-link { padding: 0; border: 0; background: none; color: rgba(255, 255, 255, 0.9); font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.hs-link:hover { color: #fff; }
.hs-reset { display: none; }
.hs.is-reset .hs-form { display: none; }
.hs.is-reset .hs-reset { display: block; }
.hs-sent { margin: 2px 0 12px; padding: 8px 12px; border-radius: 10px; background: rgba(120, 255, 190, 0.16); border: 1px solid rgba(160, 255, 210, 0.45); font-size: 13px; text-align: left; }
.hs-sent:empty { display: none; }
.hs-back { display: block; margin: 14px auto 0; }

/* Signed in: the same box says so, with the app's logo. */
.hs-welcome { display: none; padding: 8px 0 4px; }
.hs-welcome h1 { margin: 0 0 4px; }
.hs-welcome p { margin: 0 0 22px; font-size: 17px; color: rgba(255, 255, 255, 0.9); }
.hs-welcome img { display: block; width: 88px; height: 88px; margin: 0 auto; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.3)); }
.hs.is-done .hs-form, .hs.is-done .hs-reset { display: none; }
.hs.is-done .hs-welcome { display: block; animation: hs-in 0.5s ease both; }
@keyframes hs-in { from { opacity: 0; transform: scale(0.94); } }

@media (max-width: 600px) {
  /* Phones open straight on the sign-in box. */
  .hs-stage { display: none; }
  .hs-card { padding: 26px 20px 22px; border-radius: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .hs *, .hs-bg { transition-duration: 0.01s !important; transition-delay: 0s !important; animation-duration: 0.01s !important; }
}