/* ==========================================================================
   DocuMind — Auth Experience ("AU")
   Layered on top of style.css. Owns its own tokens so the app shell is
   untouched. Dark-first, with a fully re-mapped light theme.

   1. Tokens          5. Fields          9. Hero preview
   2. Backdrop 3D     6. Buttons         10. Alerts, steps, misc
   3. Top bar         7. Card            11. Motion / responsive
   4. Layout + hero   8. Title motion
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

.au {
  --au-indigo: #6366f1;
  --au-cyan: #22d3ee;
  --au-violet: #a855f7;
  --au-amber: #f6b53b;
  --au-grad: linear-gradient(120deg, var(--au-indigo), var(--au-violet) 48%, var(--au-cyan));

  --au-bg: #05070f;
  --au-bg-2: #0a0f1f;
  --au-panel: rgba(255, 255, 255, 0.045);
  --au-panel-2: rgba(255, 255, 255, 0.075);
  --au-line: rgba(255, 255, 255, 0.11);
  --au-line-2: rgba(255, 255, 255, 0.2);

  --au-text: #f3f6ff;
  --au-text-2: #b9c3e0;
  --au-text-3: #7d88a8;

  --au-shadow: 0 40px 90px rgba(2, 5, 18, 0.62), 0 10px 30px rgba(2, 5, 18, 0.4);
  --au-glow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 30px 80px rgba(79, 70, 229, 0.28);
  --au-blur: 26px;
  --au-ok: #34d399;
  --au-warn: #fbbf24;
  --au-err: #fb7185;
}

/* Light palette, expressed ONCE as a custom-property-friendly mixin and used by
   both entry points: an explicit ``data-theme="light"`` choice, and the OS
   preference when the user has not chosen a theme. Previously the OS branch
   re-listed the values and had silently drifted — it was missing --au-glow,
   --au-ok and --au-warn, so OS-light users got an incomplete palette. Sharing
   the block keeps the two in step. */
:root[data-theme="light"] .au {
  --au-bg: #eef1fa;
  --au-bg-2: #ffffff;
  --au-panel: rgba(255, 255, 255, 0.72);
  --au-panel-2: rgba(255, 255, 255, 0.9);
  --au-line: rgba(15, 24, 41, 0.1);
  --au-line-2: rgba(15, 24, 41, 0.18);
  --au-text: #0d1428;
  --au-text-2: #3d4a68;
  --au-text-3: #6a769a;
  --au-shadow: 0 30px 70px rgba(20, 30, 70, 0.16), 0 6px 20px rgba(20, 30, 70, 0.08);
  --au-glow: 0 0 0 1px rgba(255, 255, 255, 0.7), 0 24px 60px rgba(79, 70, 229, 0.18);
  --au-ok: #059669;
  --au-warn: #b45309;
  --au-err: #dc2626;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .au {
    --au-bg: #eef1fa;
    --au-bg-2: #ffffff;
    --au-panel: rgba(255, 255, 255, 0.72);
    --au-panel-2: rgba(255, 255, 255, 0.9);
    --au-line: rgba(15, 24, 41, 0.1);
    --au-line-2: rgba(15, 24, 41, 0.18);
    --au-text: #0d1428;
    --au-text-2: #3d4a68;
    --au-text-3: #6a769a;
    --au-shadow: 0 30px 70px rgba(20, 30, 70, 0.16), 0 6px 20px rgba(20, 30, 70, 0.08);
    --au-glow: 0 0 0 1px rgba(255, 255, 255, 0.7), 0 24px 60px rgba(79, 70, 229, 0.18);
    --au-ok: #059669;
    --au-warn: #b45309;
    --au-err: #dc2626;
  }
}

.au {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--au-text);
  font-family: var(--font-ui);
  background: radial-gradient(120% 90% at 50% -10%, var(--au-bg-2), var(--au-bg) 60%);
  overflow-x: hidden;
}

.au-stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.au ::selection {
  background: color-mix(in srgb, var(--au-indigo) 45%, transparent);
}

/* --------------------------------------------------------------------------
   2. Backdrop
   -------------------------------------------------------------------------- */

.au-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.au-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}

.au-canvas.is-live {
  opacity: 1;
}

/* Aurora blobs — slow, oversized, heavily blurred colour fields. */
.au-aurora {
  position: absolute;
  inset: -25%;
  filter: blur(70px);
  opacity: 0.75;
}

.au-aurora__blob {
  position: absolute;
  display: block;
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform;
}

.au-aurora__blob--a {
  width: 46vw;
  height: 46vw;
  left: 6%;
  top: 4%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.75), transparent 66%);
  animation: auDrift 26s var(--ease) infinite alternate;
}

.au-aurora__blob--b {
  width: 40vw;
  height: 40vw;
  right: 4%;
  top: 22%;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.5), transparent 68%);
  animation: auDrift 32s var(--ease) 2s infinite alternate-reverse;
}

.au-aurora__blob--c {
  width: 52vw;
  height: 52vw;
  left: 28%;
  bottom: -22%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.6), transparent 66%);
  animation: auDrift 38s var(--ease) 5s infinite alternate;
}

:root[data-theme="light"] .au-aurora {
  opacity: 0.55;
  mix-blend-mode: multiply;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .au-aurora {
    opacity: 0.55;
    mix-blend-mode: multiply;
  }
}

@keyframes auDrift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(6vw, -5vh, 0) scale(1.16);
  }

  100% {
    transform: translate3d(-5vw, 6vh, 0) scale(0.94);
  }
}

/* Perspective floor grid. */
.au-grid {
  position: absolute;
  left: -25%;
  right: -25%;
  bottom: -32%;
  height: 78%;
  background-image:
    linear-gradient(to right, var(--au-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--au-line) 1px, transparent 1px);
  background-size: 74px 74px;
  transform: perspective(560px) rotateX(66deg);
  transform-origin: bottom center;
  mask-image: radial-gradient(65% 75% at 50% 30%, #000, transparent 78%);
  animation: auGrid 18s linear infinite;
  opacity: 0.85;
}

@keyframes auGrid {
  to {
    background-position: 0 74px, 0 74px;
  }
}

/* Cursor spotlight. */
.au-glow {
  position: absolute;
  width: 720px;
  height: 720px;
  margin: -360px 0 0 -360px;
  left: var(--mx, 50%);
  top: var(--my, 40%);
  background: radial-gradient(circle, rgba(129, 140, 248, 0.22), transparent 62%);
  transition: opacity 400ms ease;
  opacity: 0;
}

.au.is-pointer .au-glow {
  opacity: 1;
}

/* Film grain so the big gradients never band. */
.au-noise {
  position: absolute;
  inset: 0;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   3. Top bar
   -------------------------------------------------------------------------- */

.au-topbar {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px clamp(18px, 4vw, 44px);
  animation: auRise 700ms var(--ease) both;
}

.au-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--au-text);
  text-decoration: none;
  transition: transform 220ms var(--spring);
}

.au-brand:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.au-brand__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.au-logo__page {
  stroke-dasharray: 132;
  animation: auDraw 1.4s var(--ease) 150ms both;
}

.au-logo__line {
  stroke-dasharray: 22;
  animation: auDraw 700ms var(--ease) calc(600ms + var(--d) * 140ms) both;
}

@keyframes auDraw {
  from {
    stroke-dashoffset: 160;
  }

  to {
    stroke-dashoffset: 0;
  }
}

.au-brand:hover .au-logo__page {
  animation: auPulse 1.6s var(--ease) infinite;
}

@keyframes auPulse {
  50% {
    opacity: 0.55;
  }
}

.au-topbar__right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.au-icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  border: 1px solid var(--au-line);
  background: var(--au-panel);
  backdrop-filter: blur(var(--au-blur));
  -webkit-backdrop-filter: blur(var(--au-blur));
  color: var(--au-text-2);
  cursor: pointer;
  transition: transform 240ms var(--spring), color 200ms ease, border-color 200ms ease, background-color 200ms ease;
}

.au-icon-btn:hover {
  color: var(--au-text);
  border-color: var(--au-line-2);
  background: var(--au-panel-2);
  transform: translateY(-2px) rotate(-6deg);
}

.au-icon-btn:active {
  transform: scale(0.92);
}

.au-icon-btn__i {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  transition: transform 420ms var(--spring), opacity 240ms ease;
}

.au-icon-btn__i--sun {
  opacity: 0;
  transform: rotate(-90deg) scale(0.4);
}

:root[data-theme="dark"] .au-icon-btn__i--moon {
  opacity: 0;
  transform: rotate(90deg) scale(0.4);
}

:root[data-theme="dark"] .au-icon-btn__i--sun {
  opacity: 1;
  transform: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .au-icon-btn__i--moon {
    opacity: 0;
    transform: rotate(90deg) scale(0.4);
  }

  :root:not([data-theme]) .au-icon-btn__i--sun {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   4. Layout + hero
   -------------------------------------------------------------------------- */

.au-layout {
  position: relative;
  z-index: 2;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-content: center;
  align-items: start;
  padding: 0 clamp(18px, 4vw, 44px) clamp(40px, 6vw, 72px);
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
}

.au-layout>* {
  align-self: center;
}

.au-hero {
  display: none;
}

.au-hero__content {
  max-width: 620px;
}

.au-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px 7px 10px;
  margin-bottom: 22px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--au-text-2);
  border: 1px solid var(--au-line);
  border-radius: var(--radius-pill);
  background: var(--au-panel);
  backdrop-filter: blur(var(--au-blur));
  -webkit-backdrop-filter: blur(var(--au-blur));
  animation: auRise 700ms var(--ease) 80ms both;
}

.au-eyebrow__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--au-ok);
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7);
  animation: auPing 2.4s var(--ease) infinite;
}

@keyframes auPing {
  70% {
    box-shadow: 0 0 0 9px rgba(52, 211, 153, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0);
  }
}

.au-hero__title {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5.6vw, 4.4rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.au-line {
  display: block;
}

.au-hero__title-accent {
  animation: auSlide 9s var(--ease) infinite;
}

/* The gradient must sit on the element that actually contains the glyphs —
   background-clip:text does not clip through to descendant text. */
.au-rotator__item {
  background: var(--au-grad);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@keyframes auSlide {
  to {
    background-position: 220% 0;
  }
}

/* Rotating headline phrase — 3D flip, driven by auth.js */
.au-rotator {
  display: inline-grid;
  vertical-align: bottom;
  perspective: 700px;
  overflow: hidden;
  min-height: 1.02em;
}

.au-rotator__inner {
  display: grid;
}

.au-rotator__item {
  grid-area: 1 / 1;
  will-change: transform, opacity;
}

.au-rotator__item.is-active {
  animation: auFlipIn 620ms var(--spring) both;
}

.au-rotator__item.is-out {
  animation: auFlipOut 460ms var(--ease) both;
}

@keyframes auFlipIn {
  from {
    opacity: 0;
    transform: translateY(48%) rotateX(-72deg);
  }
}

@keyframes auFlipOut {
  to {
    opacity: 0;
    transform: translateY(-48%) rotateX(72deg);
  }
}

.au-hero__sub {
  margin: 0 0 34px;
  max-width: 52ch;
  font-size: 1.06rem;
  line-height: 1.62;
  color: var(--au-text-2);
}

.au-stats {
  display: flex;
  gap: 34px;
  margin-top: 34px;
}

.au-stat b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  background: var(--au-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.au-stat span {
  font-size: 0.8rem;
  color: var(--au-text-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   5. Fields
   -------------------------------------------------------------------------- */

.au-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.au-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 2px;
}

.au-field {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 15px;
  border: 1px solid var(--au-line);
  background: var(--au-panel);
  backdrop-filter: blur(var(--au-blur));
  -webkit-backdrop-filter: blur(var(--au-blur));
  transition: border-color 220ms ease, background-color 220ms ease, box-shadow 260ms ease, transform 260ms var(--ease);
  animation: auRise 620ms var(--ease) calc(120ms + var(--d, 0) * 80ms) both;
}

.au-field:hover {
  border-color: var(--au-line-2);
  background: var(--au-panel-2);
}

.au-field.is-focus {
  border-color: color-mix(in srgb, var(--au-indigo) 65%, transparent);
  box-shadow: 0 14px 40px rgba(79, 70, 229, 0.24);
  transform: translateY(-2px);
}

.au-field__icon {
  display: grid;
  place-items: center;
  padding-left: 15px;
  color: var(--au-text-3);
  transition: color 220ms ease, transform 320ms var(--spring);
}

.au-field.is-focus .au-field__icon {
  color: var(--au-indigo);
  transform: scale(1.12);
}

.au-field__icon .au-ico {
  width: 18px;
  height: 18px;
}

.au-field__input {
  flex: 1;
  min-width: 0;
  padding: 27px 12px 10px;
  font-size: 0.98rem;
  color: var(--au-text);
  background: none;
  border: none;
  outline: none;
}

.au-field__input::placeholder {
  color: transparent;
}

.au-field__input:-webkit-autofill,
.au-field__input:-webkit-autofill:hover {
  -webkit-text-fill-color: var(--au-text);
  -webkit-box-shadow: 0 0 0 60px transparent inset;
  transition: background-color 9999s;
}

.au-field__label {
  position: absolute;
  left: 46px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.95rem;
  color: var(--au-text-3);
  pointer-events: none;
  line-height: 1;
  transition: top 240ms var(--spring), transform 240ms var(--spring), font-size 240ms var(--spring),
    color 200ms ease;
}

.au-field__input:focus~.au-field__label,
.au-field__input:not(:placeholder-shown)~.au-field__label {
  top: 9px;
  transform: none;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--au-indigo);
}

/* Animated underline that wipes in on focus. */
.au-field__bar {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--au-grad);
  transform: scaleX(0);
  transform-origin: center;
  opacity: 0;
  transition: transform 380ms var(--ease), opacity 260ms ease;
}

.au-field.is-focus .au-field__bar {
  transform: scaleX(1);
  opacity: 1;
}

.au-field.is-invalid {
  border-color: color-mix(in srgb, var(--au-err) 60%, transparent);
  animation: auShake 460ms var(--ease);
}

.au-field.is-invalid .au-field__icon {
  color: var(--au-err);
}

.au-field.is-valid .au-field__icon::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 5px;
  margin: 14px 0 0 -30px;
  border-left: 2px solid var(--au-ok);
  border-bottom: 2px solid var(--au-ok);
  transform: rotate(-45deg);
  animation: auCheckIn 320ms var(--spring) both;
}

.au-field__toggle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-right: 6px;
  border: none;
  border-radius: 11px;
  background: none;
  color: var(--au-text-3);
  cursor: pointer;
  transition: color 200ms ease, background-color 200ms ease, transform 240ms var(--spring);
}

.au-field__toggle:hover {
  color: var(--au-indigo);
  background: var(--au-panel-2);
  transform: scale(1.06);
}

.au-field__toggle .au-eye {
  grid-area: 1 / 1;
  display: grid;
  transition: transform 380ms var(--spring), opacity 220ms ease;
}

.au-field__toggle .au-eye--hide {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}

.au-field__toggle[aria-pressed="true"] .au-eye--show {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}

.au-field__toggle[aria-pressed="true"] .au-eye--hide {
  opacity: 1;
  transform: none;
}

.au-hint {
  margin: -6px 0 0;
  font-size: 0.8rem;
  color: var(--au-text-3);
}

.au-caps {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -6px 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--au-warn);
  animation: auRise 300ms var(--ease) both;
}

/* Strength meter + rule checklist */
.au-strength {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.au-strength__bars {
  display: flex;
  flex: 1;
  gap: 5px;
}

.au-strength__bars i {
  flex: 1;
  height: 4px;
  border-radius: 3px;
  background: var(--au-line-2);
  transform: scaleX(0.9);
  transition: background-color 300ms ease, transform 300ms var(--spring), box-shadow 300ms ease;
}

.au-strength__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--au-text-3);
  white-space: nowrap;
}

.au-strength[data-level="1"] .au-strength__bars i:nth-child(-n + 1),
.au-strength[data-level="2"] .au-strength__bars i:nth-child(-n + 2),
.au-strength[data-level="3"] .au-strength__bars i:nth-child(-n + 3),
.au-strength[data-level="4"] .au-strength__bars i:nth-child(-n + 4) {
  transform: scaleX(1);
}

.au-strength[data-level="1"] .au-strength__bars i:nth-child(-n + 1) {
  background: var(--au-err);
}

.au-strength[data-level="2"] .au-strength__bars i:nth-child(-n + 2) {
  background: var(--au-warn);
}

.au-strength[data-level="3"] .au-strength__bars i:nth-child(-n + 3),
.au-strength[data-level="4"] .au-strength__bars i {
  background: linear-gradient(90deg, var(--au-cyan), var(--au-ok));
  box-shadow: 0 0 14px rgba(52, 211, 153, 0.45);
}

.au-strength[data-level="1"] .au-strength__label {
  color: var(--au-err);
}

.au-strength[data-level="2"] .au-strength__label {
  color: var(--au-warn);
}

.au-strength[data-level="3"] .au-strength__label,
.au-strength[data-level="4"] .au-strength__label {
  color: var(--au-ok);
}

.au-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
}

.au-rule {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--au-text-3);
  transition: color 220ms ease;
}

.au-rule__dot {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.5px solid var(--au-line-2);
  color: transparent;
  transition: background-color 240ms ease, border-color 240ms ease, color 240ms ease, transform 320ms var(--spring);
}

.au-rule.is-met {
  color: var(--au-text-2);
}

.au-rule.is-met .au-rule__dot {
  background: var(--au-ok);
  border-color: var(--au-ok);
  color: #04140d;
  transform: scale(1.12);
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.au-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: 15px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--au-text);
  background: var(--au-panel);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform 240ms var(--spring), box-shadow 260ms ease, background-color 220ms ease, border-color 220ms ease, opacity 200ms ease;
  animation: auRise 620ms var(--ease) calc(300ms + var(--d, 0) * 90ms) both;
}

.au-btn--primary {
  background: linear-gradient(110deg, #4f46e5, #7c3aed 46%, #0891b2);
  background-size: 200% 100%;
  box-shadow: 0 14px 34px rgba(79, 70, 229, 0.38);
  color: #fff;
  transition: transform 240ms var(--spring), box-shadow 260ms ease, background-position 700ms var(--ease);
}

.au-btn--primary:hover {
  background-position: 100% 0;
  box-shadow: 0 20px 44px rgba(79, 70, 229, 0.5);
  transform: translateY(-3px);
}

.au-btn--primary:active {
  transform: translateY(-1px) scale(0.985);
}

.au-btn--ghost:hover {
  background: var(--au-panel-2);
  border-color: var(--au-line-2);
  transform: translateY(-2px);
}

.au-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

/* Light sweep across the button. */
.au-btn__shine {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.4) 50%, transparent 62%);
  transform: translateX(-120%);
}

.au-btn:hover .au-btn__shine {
  animation: auSweep 900ms var(--ease);
}

@keyframes auSweep {
  to {
    transform: translateX(120%);
  }
}

.au-btn__arrow {
  display: grid;
  transition: transform 300ms var(--spring);
}

.au-btn:hover .au-btn__arrow {
  transform: translateX(6px);
}

.au-btn__spinner {
  position: absolute;
  display: none;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.32);
  border-top-color: #fff;
  animation: auSpin 700ms linear infinite;
}

.au-btn.is-loading .au-btn__spinner {
  display: block;
}

.au-btn.is-loading .au-btn__label,
.au-btn.is-loading .au-btn__arrow {
  visibility: hidden;
}

@keyframes auSpin {
  to {
    transform: rotate(360deg);
  }
}

.au-ripple {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: rgba(255, 255, 255, 0.45);
  pointer-events: none;
  animation: auRipple 620ms var(--ease-out) forwards;
}

@keyframes auRipple {
  to {
    transform: translate(-50%, -50%) scale(2.6);
    opacity: 0;
  }
}

.au-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--au-text-2);
  background: none;
  border: none;
  padding: 6px 8px;
  border-radius: 9px;
  cursor: pointer;
  transition: color 200ms ease, background-color 200ms ease, transform 240ms var(--spring);
}

.au-link:hover {
  color: var(--au-indigo);
  background: var(--au-panel);
  transform: translateY(-1px);
  text-decoration: none;
}

.au-link .au-ico {
  transition: transform 260ms var(--spring);
}

.au-link:hover .au-ico {
  transform: translateX(3px);
}

.au-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.au-row--end {
  justify-content: flex-end;
  margin-top: -6px;
}

.au-row--end .au-link {
  padding: 8px 12px;
  margin: -8px -12px -8px 0;
  border: 1px solid transparent;
}

.au-row--end .au-link:hover {
  border-color: var(--au-line);
  background: var(--au-panel);
}

/* Third-party sign-in buttons (Google / GitHub) */
.au-oauth {
  display: grid;
  gap: 10px;
  margin-bottom: 4px;
}
.au-oauth__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}
.au-oauth__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--au-text);
}

.au-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 18px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--au-text-3);
}

.au-divider::before,
.au-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--au-line-2), transparent);
  transform: scaleX(0);
  animation: auGrow 800ms var(--ease) 500ms forwards;
}

@keyframes auGrow {
  to {
    transform: scaleX(1);
  }
}

.au-foot {
  margin: 6px 0 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--au-text-2);
}

.au-foot a {
  color: var(--au-text);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   7. Card
   -------------------------------------------------------------------------- */

.au-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  border-radius: 26px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
  backdrop-filter: blur(34px) saturate(140%);
  -webkit-backdrop-filter: blur(34px) saturate(140%);
  box-shadow: var(--au-shadow), var(--au-rim, inset 0 1px 0 rgba(255, 255, 255, 0.14));
  transform-style: preserve-3d;
  transition: transform 500ms var(--ease), box-shadow 400ms ease;
  animation: auCardIn 900ms var(--spring) 60ms both;
}

:root[data-theme="dark"] .au-card {
  --au-rim: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

:root[data-theme="light"] .au-card {
  --au-rim: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.66));
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .au-card {
    --au-rim: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.66));
  }
}

/* Conic gradient that sweeps around the border. */
.au-card__border {
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--ang, 0deg), transparent 0%, var(--au-indigo) 12%, var(--au-cyan) 22%, transparent 40%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.85;
  animation: auSpin 7s linear infinite;
  pointer-events: none;
}

@property --ang {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.au-card__glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, 0.14), transparent 55%);
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}

.au.is-pointer .au-card__glare {
  opacity: 1;
}

.au-card__inner {
  position: relative;
  padding: clamp(26px, 3.4vw, 38px);
  transform: translateZ(28px);
}

.au-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

/* Spinning 3D cube logo */
.au-cube {
  position: relative;
  width: 46px;
  height: 46px;
  flex: none;
  perspective: 420px;
}

.au-cube__inner {
  position: relative;
  width: 46px;
  height: 46px;
  transform-style: preserve-3d;
  animation: auCube 12s linear infinite;
}

.au-cube__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 1.5px solid color-mix(in srgb, var(--au-indigo) 55%, transparent);
  border-radius: 13px;
  background: linear-gradient(150deg, rgba(99, 102, 241, 0.3), rgba(34, 211, 238, 0.12));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.au-cube__face svg {
  width: 20px;
  height: 20px;
  color: var(--au-text);
}

.au-cube__face--f {
  transform: translateZ(23px);
}

.au-cube__face--b {
  transform: rotateY(180deg) translateZ(23px);
}

.au-cube__face--l {
  transform: rotateY(-90deg) translateZ(23px);
}

.au-cube__face--r {
  transform: rotateY(90deg) translateZ(23px);
}

.au-cube__face--t {
  transform: rotateX(90deg) translateZ(23px);
}

.au-cube__face--d {
  transform: rotateX(-90deg) translateZ(23px);
}

@keyframes auCube {
  0% {
    transform: rotateX(-18deg) rotateY(0deg);
  }

  100% {
    transform: rotateX(-18deg) rotateY(360deg);
  }
}

.au-cube::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.4), transparent 68%);
  filter: blur(10px);
  z-index: -1;
  animation: auPulse 3.4s var(--ease) infinite;
}

.au-card__eyebrow {
  margin: 0 0 2px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--au-indigo);
}

.au-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.15rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.au-card__sub {
  margin: 10px 0 24px;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--au-text-2);
}

.au-legal {
  margin: 0;
  font-size: 0.78rem;
  color: var(--au-text-3);
  text-align: center;
  animation: auRise 600ms var(--ease) 700ms both;
}

.au-legal kbd {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 1px 5px;
  border: 1px solid var(--au-line-2);
  border-radius: 5px;
  background: var(--au-panel);
  color: var(--au-text-2);
}

/* --------------------------------------------------------------------------
   8. Title motion (per-character reveal)
   -------------------------------------------------------------------------- */

.au-title .au-word {
  display: inline-block;
  white-space: nowrap;
}

.au-char {
  display: inline-block;
  animation: auChar 620ms var(--ease) calc(200ms + var(--i) * 26ms) both;
}

@keyframes auChar {
  from {
    opacity: 0;
    transform: translateY(60%) rotateX(-80deg) scale(0.85);
  }
}

/* --------------------------------------------------------------------------
   9. Hero preview mock
   -------------------------------------------------------------------------- */

.au-preview {
  position: relative;
  max-width: 460px;
  transform-style: preserve-3d;
  transition: transform 500ms var(--ease);
  animation: auRise 900ms var(--ease) 400ms both;
}

.au-preview__card {
  position: relative;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid var(--au-line);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--au-shadow);
  transform: translateZ(30px);
}

.au-preview__glow {
  position: absolute;
  inset: -30%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.32), transparent 62%);
  filter: blur(34px);
  z-index: -1;
}

.au-preview__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
}

.au-preview__bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--au-line-2);
}

.au-preview__bar i:nth-child(1) {
  background: #ff5f57;
}

.au-preview__bar i:nth-child(2) {
  background: #febc2e;
}

.au-preview__bar i:nth-child(3) {
  background: #28c840;
}

.au-preview__bar span {
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--au-text-3);
}

.au-preview__q {
  justify-self: end;
  max-width: 78%;
  margin: 0 0 14px auto;
  padding: 9px 14px;
  font-size: 0.86rem;
  color: #fff;
  background: linear-gradient(120deg, #4f46e5, #7c3aed);
  border-radius: 15px 15px 5px 15px;
  animation: auRise 600ms var(--ease) 700ms both;
}

.au-preview__a {
  display: flex;
  gap: 11px;
  align-items: flex-start;
}

.au-preview__avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(140deg, var(--au-cyan), var(--au-indigo));
  animation: auRise 600ms var(--ease) 800ms both;
}

.au-preview__lines {
  display: grid;
  gap: 9px;
  flex: 1;
  padding-top: 4px;
}

.au-preview__lines i {
  display: block;
  height: 8px;
  width: var(--w);
  border-radius: 5px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.14));
  transform-origin: left;
  animation: auBar 800ms var(--ease) calc(900ms + var(--i) * 130ms) both;
}

@keyframes auBar {
  from {
    transform: scaleX(0);
    opacity: 0;
  }
}

.au-preview__cite {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 6px 10px;
  width: fit-content;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--au-amber);
  background: rgba(246, 181, 59, 0.12);
  border: 1px solid rgba(246, 181, 59, 0.4);
  border-radius: 9px;
  animation: auRise 600ms var(--ease) 1.5s both;
}

.au-preview__cite-badge {
  padding: 1px 6px;
  border-radius: 5px;
  background: rgba(246, 181, 59, 0.24);
  font-family: var(--font-mono);
}

.au-chip {
  position: absolute;
  padding: 7px 13px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--au-text);
  border: 1px solid var(--au-line-2);
  border-radius: var(--radius-pill);
  background: var(--au-panel-2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
  animation: auFloat 6s var(--ease) infinite alternate;
}

.au-chip--top {
  top: -16px;
  right: 12px;
  transform: translateZ(60px);
  animation-delay: 0.4s;
}

.au-chip--bottom {
  bottom: -14px;
  left: 8px;
  transform: translateZ(50px);
  animation-delay: 1.6s;
}

@keyframes auFloat {
  to {
    transform: translateY(-12px) translateZ(60px);
  }
}

/* --------------------------------------------------------------------------
   10. Alerts, steps, misc widgets
   -------------------------------------------------------------------------- */

.au-alert {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 13px 15px;
  margin-bottom: 18px;
  border-radius: 14px;
  border: 1px solid var(--au-line);
  background: var(--au-panel);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--au-text-2);
  animation: auRise 500ms var(--ease) both, auShake 500ms var(--ease) 120ms;
}

.au-alert__ico {
  flex: none;
  margin-top: 1px;
}

.au-alert--error {
  color: var(--au-err);
  border-color: color-mix(in srgb, var(--au-err) 40%, transparent);
  background: color-mix(in srgb, var(--au-err) 12%, transparent);
}

.au-alert--ok {
  color: var(--au-ok);
  border-color: color-mix(in srgb, var(--au-ok) 40%, transparent);
  background: color-mix(in srgb, var(--au-ok) 12%, transparent);
}

/* Stepper for the recovery flow */
.au-steps {
  display: flex;
  align-items: center;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.au-steps li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--au-text-3);
}

.au-steps li+li {
  flex: 1;
}

.au-steps__dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--au-line-2);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  transition: background-color 320ms ease, border-color 320ms ease, color 320ms ease, transform 320ms var(--spring);
}

.au-steps li.is-active {
  color: var(--au-text);
}

.au-steps li.is-active .au-steps__dot {
  border-color: transparent;
  background: var(--au-grad);
  color: #fff;
  transform: scale(1.12);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--au-indigo) 18%, transparent);
}

.au-steps li.is-done {
  color: var(--au-text-2);
}

.au-steps li.is-done .au-steps__dot {
  border-color: var(--au-ok);
  background: var(--au-ok);
  color: #04140d;
}

.au-steps__line {
  flex: 1;
  height: 2px;
  margin: 0 10px;
  border-radius: 2px;
  background: var(--au-line);
  overflow: hidden;
}

.au-steps__line::after {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 2px;
  background: var(--au-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 600ms var(--ease);
}

.au-steps li.is-done .au-steps__line::after {
  transform: scaleX(1);
}

/* 3D envelope that opens when the reset mail is sent */
.au-envelope {
  position: relative;
  width: 132px;
  height: 96px;
  margin: 6px auto 26px;
  perspective: 620px;
  animation: auRise 700ms var(--spring) both;
}

.au-envelope__back,
.au-envelope__front {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  border: 1px solid var(--au-line-2);
}

.au-envelope__back {
  background: linear-gradient(150deg, rgba(99, 102, 241, 0.24), rgba(34, 211, 238, 0.1));
}

.au-envelope__front {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
  clip-path: polygon(0 22%, 50% 62%, 100% 22%, 100% 100%, 0 100%);
  z-index: 3;
}

.au-envelope__flap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 58%;
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.42), rgba(99, 102, 241, 0.24));
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  transform: rotateX(0deg);
  transition: transform 700ms var(--spring);
  z-index: 4;
}

.au-envelope.is-open .au-envelope__flap {
  transform: rotateX(178deg);
}

.au-envelope__letter {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 12%;
  height: 74%;
  border-radius: 8px;
  background: linear-gradient(180deg, #fff, #e8ecfb);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  transform: translateY(0) scale(0.9);
  opacity: 0.4;
  transition: transform 700ms var(--spring), opacity 500ms ease;
  z-index: 2;
}

.au-envelope__letter::after {
  content: "";
  position: absolute;
  inset: 12px 12px auto;
  height: 5px;
  border-radius: 3px;
  background: var(--au-indigo);
  opacity: 0.35;
  box-shadow: 0 12px 0 rgba(79, 70, 229, 0.2), 0 24px 0 rgba(79, 70, 229, 0.14);
}

.au-envelope.is-open .au-envelope__letter {
  transform: translateY(-42%) scale(1);
  opacity: 1;
}

.au-envelope::after {
  content: "";
  position: absolute;
  inset: -26%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.4), transparent 66%);
  filter: blur(16px);
  animation: auPulse 3.2s var(--ease) infinite;
}

.au-badge-3d {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 22px;
  border-radius: 22px;
  color: var(--au-text);
  background: linear-gradient(150deg, rgba(99, 102, 241, 0.32), rgba(34, 211, 238, 0.14));
  border: 1px solid var(--au-line-2);
  box-shadow: 0 20px 50px rgba(79, 70, 229, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  animation: auFloatBadge 5s var(--ease) infinite alternate;
}

.au-badge-3d .au-ico {
  width: 30px;
  height: 30px;
}

@keyframes auFloatBadge {
  to {
    transform: translateY(-9px) rotate(-4deg);
  }
}

.au-email-out {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 11px 14px;
  border-radius: 13px;
  border: 1px dashed var(--au-line-2);
  background: var(--au-panel);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--au-text);
  word-break: break-all;
}

.au-devbox {
  margin: 0 0 18px;
  padding: 14px;
  border-radius: 14px;
  border: 1px dashed color-mix(in srgb, var(--au-warn) 55%, transparent);
  background: color-mix(in srgb, var(--au-warn) 10%, transparent);
  font-size: 0.82rem;
  color: var(--au-text-2);
  animation: auRise 600ms var(--ease) 200ms both;
}

.au-devbox__label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  font-weight: 700;
  color: var(--au-warn);
}

.au-devbox code {
  display: block;
  padding: 10px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.28);
  font-size: 0.74rem;
  word-break: break-all;
}

.au-devbox .au-btn {
  min-height: 40px;
  margin-top: 10px;
  font-size: 0.85rem;
}

.au-la {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--au-text-2);
}

.au-la:hover {
  color: var(--au-indigo);
  transform: translateY(-2px);
}

.au-la[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

.au-confirm-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--au-ok);
  animation: auRise 320ms var(--ease) both;
}

@keyframes auRise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
}

@keyframes auShake {

  10%,
  90% {
    transform: translateX(-3px);
  }

  30%,
  70% {
    transform: translateX(6px);
  }

  50% {
    transform: translateX(-6px);
  }
}

@keyframes auCheckIn {
  from {
    opacity: 0;
    transform: rotate(-45deg) scale(0.3);
  }
}

@keyframes auCardIn {
  from {
    opacity: 0;
    transform: translateY(46px) rotateX(14deg) scale(0.94);
  }
}

@keyframes auPageOut {
  to {
    opacity: 0;
    transform: scale(0.97);
    filter: blur(6px);
  }
}

.au.is-leaving .au-card {
  animation: auPageOut 320ms var(--ease) forwards;
}

/* Confetti burst on successful recovery */
.au-confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
}

.au-confetti i {
  position: absolute;
  top: -20px;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  opacity: 0;
  animation: auConfetti 1.6s var(--ease-out) forwards;
}

@keyframes auConfetti {
  0% {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }

  100% {
    opacity: 0;
    transform: translateY(88vh) rotate(720deg);
  }
}

/* --------------------------------------------------------------------------
   11. Motion + responsive
   -------------------------------------------------------------------------- */

@media (min-width: 560px) {
  .au-layout {
    grid-template-columns: minmax(0, 1fr) minmax(400px, 460px);
  }

  .au-hero {
    display: block;
    animation: auRise 900ms var(--ease) 120ms both;
    align-self: center;
  }

  .au-main {
    align-self: center;
  }
}

@media (max-width: 560px) {
  .au-stats {
    gap: 20px;
  }

  .au-stat b {
    font-size: 1.4rem;
  }

  .au-preview {
    display: none;
  }

  .au-card {
    max-width: 460px;
  }

  .au-steps li span:not(.au-steps__dot):not(.au-steps__line) {
    display: none;
  }
}

/* Short viewports (720–900px tall laptops): the hero column is the tallest
   thing on the page, so shed its optional pieces before anything clips. */
@media (min-width: 560px) and (max-height: 900px) {
  .au-hero__title {
    font-size: clamp(2.2rem, 4vw, 3.1rem);
  }

  .au-hero__sub {
    margin-bottom: 24px;
    font-size: 1rem;
  }

  .au-eyebrow {
    margin-bottom: 16px;
  }

  .au-preview__q,
  .au-preview__cite {
    display: none;
  }

  .au-preview__lines i:nth-child(n + 3) {
    display: none;
  }

  /* Tighten the card so the longer forms still fit without scrolling. */
  .au-card__inner {
    padding: 24px 26px;
  }

  .au-card__head {
    margin-bottom: 16px;
  }

  .au-cube {
    width: 38px;
    height: 38px;
  }

  .au-cube__inner {
    width: 38px;
    height: 38px;
  }

  .au-cube__face--f {
    transform: translateZ(19px);
  }

  .au-cube__face--b {
    transform: rotateY(180deg) translateZ(19px);
  }

  .au-cube__face--l {
    transform: rotateY(-90deg) translateZ(19px);
  }

  .au-cube__face--r {
    transform: rotateY(90deg) translateZ(19px);
  }

  .au-cube__face--t {
    transform: rotateX(90deg) translateZ(19px);
  }

  .au-cube__face--d {
    transform: rotateX(-90deg) translateZ(19px);
  }

  .au-card__title {
    font-size: 1.6rem;
  }

  .au-card__sub {
    margin: 8px 0 18px;
    font-size: 0.88rem;
  }

  .au-form {
    gap: 12px;
  }

  .au-field__input {
    padding: 18px 12px 7px;
  }

  .au-btn {
    min-height: 46px;
    padding: 11px 20px;
  }

  .au-divider {
    margin: 16px 0 14px;
  }

  .au-badge-3d {
    width: 58px;
    height: 58px;
    margin-bottom: 16px;
  }

  .au-badge-3d .au-ico {
    width: 24px;
    height: 24px;
  }

  .au-steps {
    margin-bottom: 18px;
  }

  .au-legal {
    display: none;
  }
}

@media (min-width: 560px) and (max-height: 780px) {
  .au-preview {
    display: none;
  }

  .au-stats {
    margin-top: 26px;
    gap: 26px;
  }

  .au-stat b {
    font-size: 1.5rem;
  }

  /* The register card is the tallest form; drop its hint and tighten rows. */
  .au-hint {
    display: none;
  }

  .au-card__inner {
    padding: 20px 24px;
  }

  .au-form {
    gap: 10px;
  }

  .au-btn {
    min-height: 44px;
  }
}

@media (min-width: 560px) and (max-height: 680px) {
  .au-stats {
    display: none;
  }
}

@media (hover: none) {

  .au-card__glare,
  .au-glow {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  .au-canvas,
  .au-aurora__blob,
  .au-chip,
  .au-badge-3d,
  .au-cube__inner,
  .au-envelope__flap,
  .au-envelope__letter,
  .au-card__border {
    animation: none !important;
  }

  .au *,
  .au *::before,
  .au *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}