/* Footing - the account pages (log in, create account, forgot and new password). On phones and tablets the
   form comes first and a tour of the app plays under it: four real captures, one after another. On desktops the
   form sits in a glass card in the middle, over a soft picture of the app, with sharp pieces of the app floating
   around it that lean towards the mouse. Loaded after et.css and footing.css, which give the colours and the form
   basics. Motion is transform and opacity only, and stops for people who ask for less motion. */

body.et-auth { min-height: 100vh; background: transparent; color: var(--ink); font-family: var(--font); font-weight: 500; }
body.et-auth::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
html[data-theme="light"] body.et-auth::before {
  background:
    radial-gradient(640px 520px at 70% 10%, rgba(94, 184, 255, .7), rgba(94, 184, 255, 0) 70%),
    radial-gradient(700px 560px at 100% 60%, rgba(43, 100, 174, .35), rgba(43, 100, 174, 0) 70%),
    radial-gradient(760px 600px at 5% 90%, rgba(70, 120, 170, .4), rgba(70, 120, 170, 0) 70%),
    #E2E0DA;
}
html[data-theme="dark"] body.et-auth::before {
  background:
    radial-gradient(640px 520px at 70% 10%, rgba(94, 184, 255, .42), rgba(94, 184, 255, 0) 70%),
    radial-gradient(700px 560px at 100% 60%, rgba(43, 100, 174, .45), rgba(43, 100, 174, 0) 70%),
    radial-gradient(760px 600px at 5% 90%, rgba(60, 110, 160, .4), rgba(60, 110, 160, 0) 70%),
    #060D17;
}
.au .if-dark { display: none; }
html[data-theme="dark"] .au .if-dark { display: block; }
html[data-theme="dark"] .au .if-light { display: none; }
.au img { max-width: none; }

.au { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; }

/* ---------- the form ---------- */
.au-side { display: flex; flex-direction: column; min-width: 0; padding: 22px 24px 28px; }
.au-top { display: flex; align-items: center; gap: 12px; }
.au-brand { display: inline-block; text-decoration: none; }
.au-logo img { display: block; width: auto; height: 30px; }
.au-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.au .lang-switch { gap: 3px; padding: 3px; border: 1px solid var(--hair); border-radius: 999px; background: transparent; }
.au .lang-switch button { height: 30px; min-width: 40px; border: 0 !important; border-radius: 999px; color: var(--slate); }
.au .lang-switch button:hover { background: var(--w-bg-2); }
.au .lang-switch button[aria-pressed="true"] { background: var(--sel); color: var(--on-sel); }
.au .theme-btn { width: 40px; height: 40px; border: 1px solid var(--hair); border-radius: 50%; background: transparent; color: var(--ink); }
.au .theme-btn:hover { background: var(--w-bg-2); }

.au-card { width: 100%; max-width: 460px; margin: 34px auto 0; }
.au-card h1 { margin: 0; font-size: 40px; font-weight: 300; letter-spacing: -.025em; line-height: 1.1; color: var(--ink); }
.au-card .intro { margin: 8px 0 0; color: var(--slate); font-size: 14.5px; line-height: 1.5; }
.au .form { gap: 16px; margin-top: 26px; }
.au .field { gap: 7px; font-size: 12.5px; color: var(--slate); }
.au .field input {
  height: 48px; padding: 0 16px; border: 1px solid var(--hair); border-radius: 14px; background: var(--field); color: var(--ink);
  font-family: inherit; font-size: 15px; font-weight: 500; box-shadow: none;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.au .field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--focus); }
.au .field.invalid input { border-color: var(--c-exp); }
.au .pw input { padding-right: 82px; }
.au .pw-toggle { top: 7px; right: 7px; height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--w-bg-2); color: var(--ink); font-family: inherit; font-size: 12.5px; }
.au .pw-toggle:hover { background: var(--chip); }
.au .check { color: var(--text); font-weight: 500; }
.au .check input { accent-color: var(--accent); }
.au .form-row a, .au .auth-alt a { color: var(--accent); font-weight: 600; text-decoration: none; }
.au .form-row a:hover, .au .auth-alt a:hover { text-decoration: underline; }
.au .btn-primary {
  height: 50px; border: 0; border-radius: 999px; background: var(--sel); color: var(--on-sel); font-family: inherit;
  font-size: 15px; font-weight: 700; letter-spacing: .01em; transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.au .btn-primary:hover { background: var(--sel); opacity: .9; }
.au .btn-primary:active { transform: scale(.985); }
.au .btn.busy::after { border-color: var(--on-sel); border-right-color: transparent; }
.au .form-error { border-color: var(--c-exp); border-radius: 12px; background: var(--c-exp-tint); color: var(--c-exp); }
.au .auth-alt { margin-top: 22px; color: var(--slate); text-align: center; }
.au .form-done h2 { font-size: 20px; font-weight: 600; }
.au .form-done p { margin-top: 8px; color: var(--slate); }

/* Log in and Create account: two halves of one switch, the highlight slides between them. */
.au-switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; margin-bottom: 30px; border: 1px solid var(--hair); border-radius: 999px; }
.au-switch a { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 999px; color: var(--slate); font-size: 14px; font-weight: 600; text-decoration: none; transition: color 260ms var(--ease); }
.au-switch a:hover { color: var(--ink); }
.au-switch a[aria-current="page"] { color: var(--on-sel); }
.au-ind { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--sel); transition: transform 260ms var(--ease); }
.au-switch[data-on="signup"] .au-ind { transform: translateX(100%); }

.au-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 18px 0 0; color: var(--slate); font-size: 12.5px; text-align: center; }
.au-note .ic { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.au-tag { display: none; }

/* ---------- phones and tablets: the tour under the form ---------- */
.au-tour {
  position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 620px; margin: 0 14px 14px; padding: 44px 0 26px;
  overflow: hidden; isolation: isolate; border-radius: 32px; color: #F4F7FA;
  background:
    radial-gradient(700px 520px at 90% 0%, rgba(94, 184, 255, .38), rgba(94, 184, 255, 0) 65%),
    radial-gradient(700px 600px at 0% 100%, rgba(43, 100, 174, .5), rgba(43, 100, 174, 0) 65%),
    linear-gradient(160deg, #0F2E4D 0%, #0A1A2C 55%, #060D17 100%);
}
.au-screens { position: relative; flex: 1; min-height: 460px; }
.au-slide { position: absolute; inset: 0; display: flex; flex-direction: column; margin: 0; opacity: 0; visibility: hidden; transition: opacity 700ms var(--ease), visibility 0s linear 700ms; }
.au-slide.is-on { opacity: 1; visibility: visible; transition: opacity 700ms var(--ease); }
.au-slide figcaption { order: -1; padding: 0 48px; }
.au-slide figcaption b { display: block; max-width: 18ch; font-size: clamp(30px, 2.8vw, 44px); font-weight: 300; letter-spacing: -.03em; line-height: 1.06; }
.au-slide figcaption span { display: block; margin-top: 12px; color: rgba(220, 238, 251, .68); font-size: 15.5px; }
.au-frame { position: relative; flex: 1; margin-top: 30px; perspective: 1700px; }
.au-frame img {
  position: absolute; left: 48px; top: 0; width: calc(100% + 80px); border-radius: 16px; transform-origin: 0 0;
  transform: rotateY(-10deg) rotateX(5deg);
  box-shadow: 0 50px 110px rgba(0, 0, 0, .5), 0 0 0 1px rgba(220, 238, 251, .12);
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(to bottom, #000 62%, rgba(0, 0, 0, 0) 100%);
}
/* The whole overview is tall, so it fades sooner and its dock stays out of sight. */
.au-slide:first-child .au-frame img { -webkit-mask-image: linear-gradient(to bottom, #000 45%, rgba(0, 0, 0, 0) 84%); mask-image: linear-gradient(to bottom, #000 45%, rgba(0, 0, 0, 0) 84%); }
/* A slow push in while a screen is showing. The scale property adds to the tilt. */
.au-slide.is-on .au-frame img { animation: au-push 7s ease-out both; }
@keyframes au-push { from { scale: 1; } to { scale: 1.045; } }
/* Upcoming payments and the balance side by side, rounded like the app's tiles (28px corners on a 340px tile). */
.au-pair .au-frame img { width: min(36%, 300px); border-radius: 8.24% / 6.56%; transform: rotate(-3deg); -webkit-mask-image: none; mask-image: none; }
.au-pair .au-frame .au-second { left: calc(48px + min(36%, 300px) + 28px); top: 14%; width: min(40%, 330px); border-radius: 8.24% / 11.72%; transform: rotate(4deg); box-shadow: 0 40px 90px rgba(0, 0, 0, .5), 0 0 0 1px rgba(94, 184, 255, .25); }
.au-tabs { position: relative; z-index: 2; display: flex; gap: 8px; margin-top: 18px; padding: 0 48px; }
.au-tabs button {
  position: relative; flex: 1; height: 44px; overflow: hidden; border: 1px solid rgba(220, 238, 251, .2); border-radius: 999px;
  background: rgba(6, 13, 23, .35); color: rgba(220, 238, 251, .72); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: background-color 260ms var(--ease), color 260ms var(--ease);
}
.au-tabs button:hover { color: #F4F7FA; }
.au-tabs button:focus-visible { outline: 2px solid #5EB8FF; outline-offset: 2px; }
.au-tabs button[aria-selected="true"] { border-color: transparent; background: #DCEEFB; color: #0F2E4D; }
/* While the tour plays, the open tab fills along its bottom edge; when it is full the next screen comes in. */
.au-tabs i { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: rgba(15, 46, 77, .4); transform: scaleX(0); transform-origin: 0 50%; }
.au-tour.playing [aria-selected="true"] i { animation: au-fill 6s linear forwards; }
.au-tour.playing:hover [aria-selected="true"] i, .au-tour.playing:focus-within [aria-selected="true"] i { animation-play-state: paused; }
@keyframes au-fill { to { transform: scaleX(1); } }

/* The desktop picture and floating pieces; only shown, and only loaded, on desktops. */
.au-bg, .au-float { display: none; }

@media (max-width: 640px) {
  .au-logo img { height: 26px; }
  .au-side { padding: 18px 20px 24px; }
  .au-card h1 { font-size: 30px; }
  /* 16px text in boxes stops phones from zooming in on them. */
  .au .field input { font-size: 16px; }
  .au-tour { min-height: 0; padding-top: 30px; }
  .au-screens { min-height: 400px; }
  .au-slide figcaption, .au-tabs { padding: 0 22px; }
  .au-frame img { left: 22px; }
  .au-pair .au-frame .au-second { left: calc(22px + min(36%, 300px) + 20px); }
  .au-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .au-tabs button { height: 40px; font-size: 12.5px; }
}

/* ---------- desktops: a glass card over the app ---------- */
/* Wide screens with a mouse. Tablets keep the tour even when turned sideways, since they have no hover. */
@keyframes au-drift { from { transform: scale(1.06); } to { transform: scale(1.14) translate3d(-1.5%, -1%, 0); } }
@keyframes au-bob { from { translate: 0 0; } to { translate: 0 -10px; } }
@media (min-width: 1081px) and (hover: hover) {
  .au { display: flex; flex-direction: column; isolation: isolate; }
  .au-tour { display: none; }
  .au-side { flex: 1; padding: 26px 40px 28px; }
  .au-card {
    width: min(440px, 100%); margin: auto auto 0; padding: 30px 32px; border: 1px solid; border-radius: 30px;
    -webkit-backdrop-filter: blur(24px) saturate(1.25); backdrop-filter: blur(24px) saturate(1.25);
  }
  html[data-theme="light"] .au-card { background: rgba(245, 244, 240, .66); border-color: rgba(255, 255, 255, .75); box-shadow: 0 30px 80px rgba(15, 27, 40, .16); }
  html[data-theme="dark"] .au-card { background: rgba(10, 22, 36, .66); border-color: rgba(220, 238, 251, .14); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
  .au-card h1 { font-size: 32px; }
  .au-switch { margin-bottom: 26px; }
  .au-note { margin-bottom: auto; }
  .au-tag { display: block; margin: 24px 0 0; color: var(--slate); font-size: 15px; font-weight: 300; letter-spacing: .01em; text-align: center; }

  /* The whole app, soft and slowly drifting, behind everything. */
  .au-bg { display: block; position: fixed; inset: 0; z-index: -2; overflow: hidden; }
  .au-bg img { width: 100%; height: 100%; object-fit: cover; transform-origin: 60% 35%; animation: au-drift 40s ease-in-out infinite alternate; }
  .au-bg::after { content: ""; position: absolute; inset: 0; }
  html[data-theme="dark"] .au-bg::after { background: radial-gradient(70% 70% at 50% 45%, rgba(6, 13, 23, .45), rgba(6, 13, 23, .9)); }
  html[data-theme="light"] .au-bg::after { background: radial-gradient(70% 70% at 50% 45%, rgba(226, 224, 218, .35), rgba(226, 224, 218, .88)); }

  /* Sharp pieces of the app around the card. --px and --py (-1 to 1) follow the mouse; the translate property
     adds a slow float on top. Tiles are rounded like the app's: 28px corners on a 340px-wide tile. */
  .au-float { display: block; position: fixed; inset: 0; z-index: -1; pointer-events: none; perspective: 1600px; }
  .au-f { position: absolute; }
  /* The pictures load lazily, so each one fades in once it has arrived instead of popping in. */
  .au-fade .au-f, .au-fade .au-bg img { opacity: 0; transition: opacity 700ms var(--ease); }
  .au-fade .au-f.is-in, .au-fade .au-bg img.is-in { opacity: 1; }
  .au-f1 {
    left: -4vw; top: 15vh; width: clamp(400px, 34vw, 600px); border-radius: 22px; transform-origin: 100% 50%;
    transform: translate3d(calc(var(--px, 0) * -18px), calc(var(--py, 0) * -12px), 0) rotateY(16deg) rotateZ(-2deg);
    box-shadow: 0 50px 110px rgba(0, 0, 0, .4), 0 0 0 1px rgba(220, 238, 251, .14);
    animation: au-bob 10s ease-in-out infinite alternate;
  }
  .au-f2 {
    right: 4vw; top: 13vh; width: clamp(230px, 19vw, 320px); border-radius: 8.24% / 11.72%;
    transform: translate3d(calc(var(--px, 0) * 26px), calc(var(--py, 0) * 18px), 0) rotate(5deg);
    box-shadow: 0 40px 90px rgba(0, 0, 0, .4), 0 0 0 1px rgba(94, 184, 255, .25);
    animation: au-bob 8s ease-in-out -2s infinite alternate;
  }
  .au-f3 {
    right: 10vw; bottom: -8vh; width: clamp(210px, 16vw, 270px); border-radius: 8.24% / 6.56%;
    transform: translate3d(calc(var(--px, 0) * 36px), calc(var(--py, 0) * 24px), 0) rotate(-4deg);
    box-shadow: 0 40px 90px rgba(0, 0, 0, .4), 0 0 0 1px rgba(220, 238, 251, .16);
    animation: au-bob 9s ease-in-out -5s infinite alternate;
  }
  .au-f4 {
    left: 5vw; bottom: -12vh; width: clamp(360px, 33vw, 560px); border-radius: 20px;
    transform: translate3d(calc(var(--px, 0) * 14px), calc(var(--py, 0) * 10px), 0) rotate(3deg);
    box-shadow: 0 40px 90px rgba(0, 0, 0, .4), 0 0 0 1px rgba(220, 238, 251, .14);
    animation: au-bob 11s ease-in-out -7s infinite alternate;
  }
}
@media (min-width: 1081px) and (max-width: 1280px) and (hover: hover) {
  .au-f1 { left: -12vw; }
  .au-f4 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .au *, .au *::before, .au *::after { animation: none !important; transition-duration: 0ms !important; }
}