/* =====================================================================
   Sign in, create account, reset password. One stylesheet, every page.
   22 September 2026.

   SELF CONTAINED ON PURPOSE. Every page on this site carries its own big
   inline stylesheet, and they do not all define the same things: the form
   field styles exist on the checkout and the account page and nowhere
   else. A shared component that borrowed them would look right on two
   pages and broken on forty one. So this file brings its own tokens, its
   own fields and its own buttons, and the modal looks the same wherever
   it is opened from.

   The values are the site's own: Ramina blue, orange, Poppins, the pale
   hairline, and the easing the rest of the site animates on.
   ===================================================================== */
.au-scope{
  --au-blue:#837259;
  --au-orange:#a68f6e;
  --au-ink:#1b1916;
  --au-mute:#66717A;
  --au-line:#e3dfd8;
  --au-pale:#f6f4f1;
  --au-bad:#816c4c;
  --au-good:#1D7A3C;
  --au-ease:cubic-bezier(.18,.78,.16,1);
  font-family:Poppins,Arial,sans-serif;
  color:var(--au-ink);
}

/* ---- the modal ---------------------------------------------------- */
.au-modal{position:fixed;z-index:200;inset:0;display:grid;place-items:center;padding:20px}
.au-modal[hidden]{display:none}
.au-veil{position:absolute;inset:0;background:rgba(20,18,16,.55);backdrop-filter:blur(4px);opacity:0;transition:opacity .3s ease}
.au-modal.is-on .au-veil{opacity:1}

.au-card{
  position:relative;width:min(452px,100%);max-height:calc(100dvh - 40px);overflow-y:auto;
  padding:clamp(26px,3vw,38px) clamp(22px,2.6vw,34px) clamp(20px,2.4vw,28px);
  border-radius:24px;background:#fff;
  box-shadow:0 30px 80px rgba(20,18,16,.34);
  opacity:0;transform:translateY(14px) scale(.985);
  transition:opacity .34s ease,transform .44s var(--au-ease);
}
.au-modal.is-on .au-card{opacity:1;transform:none}

.au-x{
  position:absolute;z-index:2;right:14px;top:14px;
  display:grid;place-items:center;width:44px;height:44px;padding:0;
  border:0;border-radius:50%;background:rgba(32,30,27,.06);color:var(--au-ink);
  cursor:pointer;transition:background .24s ease,transform .3s var(--au-ease);
}
.au-x svg{width:17px;height:17px}
@media(hover:hover) and (pointer:fine){.au-x:hover{background:rgba(32,30,27,.12);transform:rotate(90deg)}}

/* ---- the full page version ---------------------------------------- */
/* The same card, with no scrim and no close button: it IS the page. */
.au-page{display:grid;place-items:center;padding:clamp(34px,6vw,84px) clamp(18px,3.4vw,54px)}
.au-page .au-card{opacity:1;transform:none;box-shadow:0 18px 48px rgba(30,28,25,.1);max-height:none;overflow:visible}
/* The page already has the real logo in the site header directly above
   this card, so the one inside it is the same mark twice in 100px. It
   stays in the pop up, where there is no header to carry it. */
.au-page .au-head{display:none}

/* ---- the header inside the card ------------------------------------ */
.au-head{display:flex;justify-content:center;margin-bottom:clamp(18px,2vw,24px)}
.au-brand{display:block}
.au-brand img{display:block;width:124px;height:auto}

/* ---- a view --------------------------------------------------------- */
.au-view[hidden]{display:none}
.au-view{animation:auIn .34s var(--au-ease)}
@keyframes auIn{from{opacity:0;transform:translateX(7px)}to{opacity:1;transform:none}}

.au-eyebrow{margin:0 0 9px;color:var(--au-blue);font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;text-align:center}
.au-title{margin:0;font-size:clamp(25px,2.6vw,31px);font-weight:300;line-height:1.1;letter-spacing:-.04em;text-align:center}
.au-sub{margin:11px 0 clamp(20px,2.4vw,26px);color:var(--au-mute);font-size:14px;line-height:1.55;text-align:center}

/* ---- fields ---------------------------------------------------------- */
.au-form{display:block}
.au-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.au-field{display:block;margin-bottom:14px}
.au-field>span{display:block;margin-bottom:8px;font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
.au-field input{
  display:block;width:100%;min-height:54px;padding:0 16px;
  border:1px solid var(--au-line);border-radius:14px;background:#fff;
  color:var(--au-ink);font-family:inherit;font-size:15px;
  transition:border-color .24s ease,box-shadow .24s ease;
}
.au-field input::placeholder{color:#9AA3AB}
.au-field input:focus{outline:0;border-color:var(--au-blue);box-shadow:0 0 0 3px rgba(131,114,89,.14)}
.au-field.is-bad input{border-color:var(--au-bad);box-shadow:0 0 0 3px rgba(129,108,76,.12)}
/* The message row is always there, so a field growing an error does not
   shove the rest of the form down under the reader finger. */
.au-err{display:block;min-height:16px;margin-top:5px;color:var(--au-bad);font-size:12px;line-height:1.35}

/* The show and hide control. It only ever changes the input TYPE. The value
   is never copied anywhere and nothing reads it but the field itself. */
.au-peek{position:relative;display:block}
.au-peek input{padding-right:56px}
.au-eye{
  position:absolute;right:5px;top:50%;transform:translateY(-50%);
  display:grid;place-items:center;width:44px;height:44px;padding:0;
  border:0;border-radius:50%;background:none;color:var(--au-mute);cursor:pointer;
  transition:color .2s ease,background .2s ease;
}
.au-eye svg{width:19px;height:19px}
.au-eye[aria-pressed="true"]{color:var(--au-blue)}
@media(hover:hover) and (pointer:fine){.au-eye:hover{background:var(--au-pale);color:var(--au-blue)}}

.au-row{display:flex;justify-content:flex-end;margin:-4px 0 16px}
.au-linky{padding:0;border:0;background:none;color:var(--au-blue);font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* ---- the primary action ---------------------------------------------- */
.au-go{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;min-height:58px;padding:5px 6px 5px 24px;
  border:0;border-radius:999px;background:var(--au-blue);color:#fff;
  font-family:inherit;font-size:15.5px;font-weight:500;text-align:left;
  cursor:pointer;transition:background .24s ease,transform .18s ease;
}
.au-disc{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--au-blue);transition:transform .4s var(--au-ease)}
.au-disc svg{width:17px;height:17px}
@media(hover:hover) and (pointer:fine){
  .au-go:hover{background:#776346;transform:translateY(-2px)}
  .au-go:hover .au-disc{transform:translate(3px,-3px)}
}
.au-go[disabled]{opacity:.6;cursor:not-allowed;transform:none}

.au-say{margin:13px 0 0;font-size:13.5px;line-height:1.55;text-align:center}
.au-say:empty{display:none}
.au-say.is-bad{color:var(--au-bad)}
.au-say.is-good{color:var(--au-good)}

/* ---- swapping between the three views --------------------------------- */
.au-swap{margin:clamp(18px,2vw,24px) 0 0;padding-top:clamp(16px,1.8vw,22px);border-top:1px solid var(--au-line);color:var(--au-mute);font-size:14px;text-align:center}
.au-swap button{padding:0;border:0;background:none;color:var(--au-blue);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer}
@media(hover:hover) and (pointer:fine){.au-swap button:hover,.au-linky:hover{color:var(--au-orange)}}

/* ---- continue with Google (Tony, 16 Oct 2026 decision) ---------------- */
.au-google{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:54px;padding:0 20px;margin:0 0 16px;
  border:1px solid var(--au-line);border-radius:999px;background:#fff;
  color:var(--au-ink);font-family:inherit;font-size:14.5px;font-weight:500;
  text-decoration:none;cursor:pointer;transition:background .2s ease,border-color .2s ease;
}
.au-google svg{flex:none;width:18px;height:18px}
@media(hover:hover) and (pointer:fine){.au-google:hover{background:#F6F8FA;border-color:var(--au-mute)}}

.au-divider{display:flex;align-items:center;gap:12px;margin:0 0 16px;color:var(--au-mute);font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;text-align:center}
.au-divider::before,.au-divider::after{content:"";flex:1;height:1px;background:var(--au-line)}

/* ---- focus, everywhere in here --------------------------------------- */
.au-scope :focus-visible{outline:3px solid var(--au-blue);outline-offset:3px}

/* ---- small screens ---------------------------------------------------- */
@media(max-width:560px){
  .au-modal{padding:0;place-items:end stretch}
  /* On a phone it comes up from the bottom like a sheet, which is where a
     thumb already is, and it is never taller than the screen. */
  .au-card{width:100%;max-height:92dvh;border-radius:24px 24px 0 0;padding:26px 19px 22px;transform:translateY(26px)}
  .au-pair{grid-template-columns:minmax(0,1fr);gap:0}
  .au-page{padding:26px 18px 40px}
  .au-page .au-card{border-radius:24px}
}
@media(max-width:380px){
  .au-brand img{width:108px}
  .au-title{font-size:23px}
}

/* A finger needs a target whatever the type size says. */
@media(pointer:coarse){
  .au-linky,.au-swap button{min-height:44px;display:inline-flex;align-items:center}
}

@media(prefers-reduced-motion:reduce){
  .au-veil,.au-card,.au-view,.au-x,.au-go,.au-disc,.au-eye,.au-field input{transition:none!important;animation:none!important}
  .au-card{transform:none}
}