/* Login page brand showcase: image slider, "You Zust Care" slogan, cycling activity cards. */
.zl-show { position: relative; isolation: isolate; overflow: hidden; min-height: 300px; color: #fff; background: #0B4545; font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
@media (min-width: 1024px) { .zl-show { height: 100vh; min-height: 0; } }

.zl-slides, .zl-slide, .zl-shade { position: absolute; inset: 0; margin: 0; }
.zl-slides { z-index: -3; }
.zl-slide { opacity: 0; transition: opacity 1.4s ease; }
.zl-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.zl-slide.is-on { opacity: 1; }
.zl-slide.is-on img { animation: zl-kenburns 9s ease-out forwards; }
@keyframes zl-kenburns { from { transform: scale(1.16) translate(1.5%, 1%); } to { transform: scale(1.02) translate(0, 0); } }
.zl-shade { z-index: -2; background:
  linear-gradient(180deg, rgba(11, 69, 69, .55) 0%, rgba(11, 69, 69, .15) 35%, rgba(11, 69, 69, .35) 60%, rgba(8, 40, 40, .92) 100%),
  linear-gradient(90deg, rgba(11, 69, 69, .55), rgba(11, 69, 69, 0) 70%); }

.zl-blob { position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); opacity: .45; pointer-events: none; animation: zl-drift 16s ease-in-out infinite alternate; }
.zl-blob-1 { width: 340px; height: 340px; background: #FF7A59; left: -120px; bottom: 10%; }
.zl-blob-2 { width: 280px; height: 280px; background: #FFD166; right: -100px; top: 8%; opacity: .3; animation-delay: -8s; }
@keyframes zl-drift { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(50px, -40px) scale(1.15); } }

.zl-inner { position: relative; height: 100%; display: flex; flex-direction: column; gap: 22px; padding: clamp(22px, 4vw, 48px); }
.zl-logo { align-self: flex-start; display: inline-block; background: #fff; border-radius: 16px; padding: 10px 14px; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .45); animation: zl-rise .8s ease both; }
.zl-logo img { height: 46px; width: auto; display: block; }

.zl-copy { margin-top: auto; max-width: 560px; }
.zl-slogan { margin: 0 0 12px; font-family: "Fraunces", Georgia, serif; font-weight: 700; line-height: 1.05; letter-spacing: -.015em; color: #fff; text-shadow: 0 4px 24px rgba(0, 0, 0, .35); }
.zl-slogan > span { display: block; opacity: 0; transform: translateY(22px); animation: zl-rise .9s cubic-bezier(.2, .7, .2, 1) forwards; }
.zl-s1 { font-size: clamp(2.2rem, 3.6vw + .6rem, 4rem); animation-delay: .15s !important; }
.zl-s2 { font-size: clamp(1.3rem, 1.6vw + .7rem, 2.1rem); font-weight: 600; color: rgba(255, 255, 255, .92); animation-delay: .45s !important; }
.zl-zust { background: linear-gradient(90deg, #FFD166, #FF7A59, #4CC9F0, #06D6A0, #FFD166); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; animation: zl-shine 7s linear infinite; }
@keyframes zl-rise { to { opacity: 1; transform: none; } }
@keyframes zl-shine { to { background-position: 300% 0; } }

.zl-ticker { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4em; margin: 0; font-size: clamp(1rem, .6vw + .85rem, 1.25rem); font-weight: 700; color: rgba(255, 255, 255, .85); opacity: 0; animation: zl-rise .8s .8s ease forwards; }
.zl-words { position: relative; display: inline-grid; min-width: 9em; height: 1.4em; overflow: hidden; }
.zl-words > span { grid-area: 1 / 1; white-space: nowrap; color: #FFD166; transform: translateY(110%); opacity: 0; transition: transform .55s cubic-bezier(.2, .7, .2, 1), opacity .55s; border-bottom: 3px solid rgba(255, 122, 89, .7); width: fit-content; }
.zl-words > span.is-on { transform: none; opacity: 1; }
.zl-words > span.is-out { transform: translateY(-110%); opacity: 0; }

.zl-cards { position: relative; height: 66px; max-width: 340px; }
.zl-card { position: absolute; inset: 0; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 18px; background: rgba(255, 255, 255, .96); color: #1B2B2B; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .5); opacity: 0; transform: translateY(18px) scale(.96); transition: opacity .6s, transform .6s cubic-bezier(.2, .7, .2, 1); }
.zl-card.is-on { opacity: 1; transform: none; }
.zl-card.is-out { opacity: 0; transform: translateY(-18px) scale(.96); }
.zl-card strong { display: block; font-size: .93rem; line-height: 1.2; }
.zl-card small { display: block; font-size: .78rem; color: #5A6B6B; }
.zl-ico { width: 44px; height: 44px; flex: none; border-radius: 13px; display: grid; place-items: center; font-size: 1.45rem; }
.zl-ico-teal { background: #DCEFEC; color: #0F5C5C; } .zl-ico-coral { background: #FFE6DE; color: #B23F22; } .zl-ico-gold { background: #FFF1C9; color: #8A5A00; }
.zl-card.is-on .zl-ico { animation: zl-ping 1.6s ease-out; }
@keyframes zl-ping { 0% { box-shadow: 0 0 0 0 rgba(255, 122, 89, .55); } 100% { box-shadow: 0 0 0 14px rgba(255, 122, 89, 0); } }

.zl-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.zl-caption { margin: 0; font-size: .92rem; font-weight: 600; color: rgba(255, 255, 255, .9); transition: opacity .4s; }
.zl-caption.is-fading { opacity: 0; }
.zl-dots { display: flex; gap: 8px; }
.zl-dot { width: 26px; height: 6px; padding: 0; border: 0; border-radius: 6px; background: rgba(255, 255, 255, .3); cursor: pointer; overflow: hidden; }
.zl-dot i { display: block; height: 100%; width: 0; background: #FFD166; }
.zl-dot.is-on { width: 44px; }
.zl-dot.is-on i { animation: zl-fill var(--zl-ms, 5500ms) linear forwards; }
.zl-paused .zl-dot.is-on i { animation: none; width: 100%; }
@keyframes zl-fill { to { width: 100%; } }
.zl-dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Phones: compact banner above the form */
@media (max-width: 1023px) {
  .zl-show { min-height: 0; }
  .zl-inner { gap: 14px; padding: 18px 20px 20px; }
  .zl-logo img { height: 34px; }
  .zl-copy { margin-top: 26px; }
  .zl-cards, .zl-caption { display: none; }
  .zl-foot { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .zl-slide, .zl-card, .zl-words > span { transition: none; }
  .zl-slide.is-on img, .zl-blob, .zl-zust, .zl-dot.is-on i, .zl-card.is-on .zl-ico { animation: none !important; }
  .zl-slogan > span, .zl-ticker, .zl-logo { opacity: 1; transform: none; animation: none; }
}

/* Page frame (classes not in the prebuilt Tailwind bundle) */
.zl-form-col { padding: 0 24px 40px; }
@media (min-width: 1024px) {
  .zl-page { height: 100vh; }
  .zl-form-col { overflow-y: auto; display: flex; flex-direction: column; justify-content: center; }
}
.zl-form { animation: zl-rise .7s .2s ease both; opacity: 0; transform: translateY(12px); }
@media (prefers-reduced-motion: reduce) { .zl-form { animation: none; opacity: 1; transform: none; } }

/* Auth pages (sign in, forgot password): utilities the prebuilt
   Tailwind bundle doesn't include. */
.space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: .5rem; }
.bg-red-100 { background-color: #fee2e2; } .text-red-700 { color: #b91c1c; } .border-red-400 { border-color: #f87171; }
.bg-green-100 { background-color: #dcfce7; } .text-green-700 { color: #15803d; } .border-green-400 { border-color: #4ade80; }
.bg-yellow-100 { background-color: #fef9c3; } .text-yellow-700 { color: #a16207; } .border-yellow-400 { border-color: #facc15; }
.bg-blue-100 { background-color: #dbeafe; } .text-blue-700 { color: #1d4ed8; } .border-blue-400 { border-color: #60a5fa; }
.dark .dark\:text-gray-300 { color: #d0d5dd; }