/* =====================================================================
   Workpulse sign-in — centered card on a cohesive branded backdrop.
   One designed scene (gradient + grid + glow + pulse motifs), with the
   sign-in card as the single, clear focal point. Scoped under .wp-login
   so nothing leaks into the shared logout/error pages.
   ===================================================================== */

/* the shared layout wraps this page in .login-bg > main.pb-1; neutralize their
   spacing so .wp-login's 100vh doesn't spill a few px and trigger a scrollbar.
   (login.css only loads on the sign-in page, so this is safely scoped.) */
.login-bg { height: auto !important; min-height: 100vh; }
.login-bg > main { padding: 0 !important; }

.wp-login {
    --wp-accent: #7CB342;
    --wp-accent-dark: #5E9E2E;
    --wp-accent-light: #9BD15F;
    --wp-ink: #192219;

    position: relative;
    height: 100vh;
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-family: "Plus Jakarta Sans", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    color: var(--wp-ink);
    background:
        radial-gradient(1100px 760px at 50% -12%, rgba(124, 179, 66, 0.20), transparent 60%),
        radial-gradient(900px 900px at 88% 105%, rgba(60, 120, 70, 0.30), transparent 55%),
        radial-gradient(820px 820px at 10% 95%, rgba(60, 120, 70, 0.22), transparent 55%),
        linear-gradient(160deg, #24482f 0%, #1b3a26 52%, #15301f 100%);
    /* soft edge vignette draws the eye to the centered card */
    box-shadow: inset 0 0 260px 30px rgba(2, 12, 6, 0.32);
}

/* faint engineering grid, faded toward the edges */
.wp-login::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 35%, transparent 78%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 35%, transparent 78%);
}

/* film grain */
.wp-login::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.5;
    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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

/* slow drifting ambient glow */
.wp-glow {
    position: absolute;
    top: 42%;
    left: 50%;
    width: 760px;
    height: 760px;
    max-width: 120vw;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(124, 179, 66, 0.14), transparent 66%);
    filter: blur(26px);
    pointer-events: none;
    z-index: 0;
    animation: wp-glow 22s ease-in-out infinite;
}
@keyframes wp-glow {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; }
    50%      { transform: translate(-50%, -54%) scale(1.08); opacity: 1; }
}

/* ---- fit wrapper: scaled by JS so the whole stack always fits the screen --- */
.wp-fit {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(22px, 3.6vh, 40px);
    padding: 44px 0; /* breathing room so the logo/marquee never touch the viewport edges */
    transform-origin: center center;
    will-change: transform;
}

/* one calm entrance: logo, then card, then the brand band */
.wp-top, .wp-stage, .wp-bottom { animation: wp-rise 0.7s cubic-bezier(.16, 1, .3, 1) both; }
.wp-stage { animation-delay: 0.08s; }
.wp-bottom { animation-delay: 0.18s; }
@keyframes wp-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- top: wordmark + tagline -------------------------------------- */
.wp-top {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding-top: 0;
    text-align: center;
}
.wp-brand { display: flex; flex-direction: column; align-items: center; gap: 9px; user-select: none; }
.wp-brand__logo { display: inline-flex; align-items: center; gap: 3px; text-decoration: none; cursor: pointer; }
.wp-brand__mark {
    height: clamp(44px, 4.8vh, 54px); width: auto; display: block;
    filter: drop-shadow(0 8px 18px rgba(124, 179, 66, 0.45));
}
.wp-brand__name { font-size: 36px; font-weight: 700; letter-spacing: -0.025em; color: #fff; }
.wp-brand__full {
    height: clamp(36px, 4vh, 46px); width: auto; display: block;
    filter: drop-shadow(0 8px 18px rgba(124, 179, 66, 0.45));
}

/* brand slogan — sits above the pulse equalizer in the bottom band */
.wp-slogan {
    margin: 0;
    font-size: clamp(18px, 1.7vw, 23px);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.005em;
    text-align: center;
}
.wp-slogan em {
    font-style: normal;
    font-weight: 700;
    background: linear-gradient(120deg, var(--wp-accent-light), #d8efb6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---- stage: the centered card ------------------------------------- */
.wp-stage {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* card + trust strip share one centered axis */
.wp-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* soft halo directly behind the card so it reads as the focal point */
.wp-stage::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 620px;
    height: 620px;
    max-width: 130vw;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(124, 179, 66, 0.18), transparent 62%);
    pointer-events: none;
}

.wp-card {
    position: relative;
    overflow: hidden;
    width: min(440px, 92vw);
    padding: clamp(26px, 2.4vw, 36px);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow:
        0 50px 100px -34px rgba(5, 18, 9, 0.7),
        0 8px 24px -12px rgba(5, 18, 9, 0.4),
        inset 0 1px 0 #fff;
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
}

.wp-form__head { margin-bottom: 20px; }
.wp-form__title { margin: 0; font-size: 27px; font-weight: 800; color: var(--wp-ink); letter-spacing: -0.03em; }
.wp-form__sub { margin: 6px 0 0; font-size: 14px; color: #7a857c; line-height: 1.5; }
.wp-form__sub em { font-style: normal; font-weight: 700; color: var(--wp-accent-dark); }

.wp-card .text-danger { font-size: 13px; font-weight: 600; color: #d64545; }
.wp-card .field-validation-error, .wp-card span.text-danger { display: block; margin: 2px 2px 0; font-size: 12px; }
.wp-card > form > .text-danger[role="alert"], .wp-card .text-danger[role="alert"] { margin-bottom: 14px; }

.wp-fields { display: flex; flex-direction: column; gap: 13px; }

.wp-field__label {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
    color: #8a948c; margin-bottom: 7px; transition: color 0.25s;
}
.wp-field__label .wp-optional { font-weight: 500; text-transform: none; letter-spacing: 0; color: #aab2ac; font-size: 11px; }

.wp-input {
    position: relative; display: flex; align-items: center;
    background: #fff; border-radius: 12px; border: 1.5px solid #e2e7e0;
    box-shadow: 0 1px 2px rgba(20, 40, 22, 0.04);
    transition: border-color 0.25s, box-shadow 0.25s;
}
.wp-field.is-focused .wp-input { border-color: var(--wp-accent); box-shadow: 0 0 0 4px rgba(124, 179, 66, 0.15); }
.wp-field.is-focused .wp-field__label { color: var(--wp-accent-dark); }

.wp-input__icon { display: grid; place-items: center; width: 44px; flex-shrink: 0; opacity: 0.7; }
.wp-input__icon img { width: 18px; height: 18px; }

.wp-input input {
    flex: 1; width: 100%; border: none !important; outline: none !important;
    background: transparent; padding: 13px 14px 13px 0; font-size: 15px; color: #1d2a20;
    font-family: inherit; letter-spacing: 0.01em; border-radius: 0 !important;
}
.wp-input input::placeholder { color: #9aa49c; }
.wp-input input:focus { box-shadow: none !important; }
.wp-input__toggle { background: none; border: none; cursor: pointer; color: #9aa49c; padding: 0 14px; font-size: 12px; font-weight: 600; font-family: inherit; }
.wp-input__toggle:hover { color: #6b756d; }

.wp-input input:-webkit-autofill,
.wp-input input:-webkit-autofill:hover,
.wp-input input:-webkit-autofill:focus {
    -webkit-text-fill-color: #1d2a20;
    box-shadow: 0 0 0 40px #fff inset !important;
    -webkit-box-shadow: 0 0 0 40px #fff inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

.wp-options { display: flex; align-items: center; justify-content: space-between; margin: 15px 0 17px; }
.wp-remember { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: #5d685f; user-select: none; }
.wp-remember input { position: absolute; opacity: 0; width: 0; height: 0; }
.wp-remember__box { width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; border: 1.5px solid #cdd4ce; background: #fff; transition: all 0.2s; color: #fff; }
.wp-remember__box svg { opacity: 0; transition: opacity 0.15s; }
.wp-remember input:checked + .wp-remember__box { background: var(--wp-accent); border-color: var(--wp-accent); }
.wp-remember input:checked + .wp-remember__box svg { opacity: 1; }
.wp-remember input:focus-visible + .wp-remember__box { box-shadow: 0 0 0 3px rgba(124, 179, 66, 0.25); }
.wp-forgot { font-size: 13px; font-weight: 600; color: var(--wp-accent-dark); text-decoration: none; }
.wp-forgot:hover { text-decoration: underline; }

.wp-submit {
    width: 100%; height: 52px; margin-top: 20px; border-radius: 13px; border: none; cursor: pointer;
    background: linear-gradient(135deg, #8bc34a, var(--wp-accent-dark));
    color: #fff; font-size: 15px; font-weight: 700; letter-spacing: 0.01em; font-family: inherit;
    box-shadow: 0 14px 30px -10px rgba(124, 179, 66, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: transform 0.15s, filter 0.2s, box-shadow 0.2s;
}
.wp-submit:hover { filter: brightness(1.04); box-shadow: 0 18px 36px -12px rgba(124, 179, 66, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.wp-submit:active { transform: scale(0.985); }

.wp-form__foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid #eef1ed; text-align: center; }
.wp-form__foot-text { font-size: 13px; color: #8a948c; }
.wp-form__foot a { font-size: 13px; font-weight: 700; color: var(--wp-accent-dark); text-decoration: none; }
.wp-form__foot a:hover { text-decoration: underline; }

.wp-extra-links { margin-top: 14px; text-align: center; }
.wp-extra-links a { font-size: 13px; font-weight: 600; color: var(--wp-accent-dark); text-decoration: none; }
.wp-extra-links a:hover { text-decoration: underline; }

/* ---- logout / signed-out card (reuses the .wp-login scaffold) ---- */
.wp-card--out { text-align: center; }
.wp-out__icon {
    width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 18px; display: grid; place-items: center; position: relative;
    background: radial-gradient(circle, rgba(124, 179, 66, 0.20), rgba(124, 179, 66, 0.06));
    border: 1.5px solid rgba(124, 179, 66, 0.4); color: var(--wp-accent-dark);
}
.wp-out__icon::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid rgba(124, 179, 66, 0.35); animation: wp-ring 2.2s ease-out infinite; }
@keyframes wp-ring { 0% { transform: scale(0.9); opacity: 0.7; } 100% { transform: scale(1.28); opacity: 0; } }
.wp-out__title { margin: 0; font-size: 25px; font-weight: 800; color: var(--wp-ink); letter-spacing: -0.03em; }
.wp-out__sub { margin: 8px 0 0; font-size: 14px; color: #7a857c; line-height: 1.55; }
.wp-out__redirect { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 22px; font-size: 13px; color: #8a948c; }
.wp-out__redirect b { color: var(--wp-ink); font-weight: 700; }
.wp-out__spinner { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid rgba(124, 179, 66, 0.25); border-top-color: var(--wp-accent); animation: wp-spin 0.8s linear infinite; flex-shrink: 0; }
@keyframes wp-spin { to { transform: rotate(360deg); } }
.wp-out__btn { display: inline-block; margin-top: 20px; height: 50px; line-height: 50px; padding: 0 30px; border-radius: 13px; background: linear-gradient(135deg, #8bc34a, var(--wp-accent-dark)); color: #fff; font-weight: 700; font-size: 15px; box-shadow: 0 14px 30px -10px rgba(124, 179, 66, 0.55); transition: filter 0.2s; }
.wp-out__btn, .wp-out__btn:hover, .wp-out__btn:focus, .wp-out__btn:visited, .wp-out__btn:active { color: #fff; text-decoration: none; }
.wp-out__btn:hover { filter: brightness(1.04); }
.wp-out__foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid #eef1ed; font-size: 13px; color: #8a948c; }
.wp-out__foot a { font-weight: 700; color: var(--wp-accent-dark); text-decoration: none; }
.wp-out__foot a:hover { text-decoration: underline; }

/* trust strip just under the card — integrated, not a floating box */
.wp-trust {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 24px;
}
.wp-trust__item { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(255, 255, 255, 0.74); }
.wp-trust__item svg { color: var(--wp-accent-light); flex-shrink: 0; }
.wp-trust__sep { width: 4px; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, 0.2); }

/* ---- bottom: pulse + ecosystem marquee ---------------------------- */
.wp-bottom {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 0;
}

/* heartbeat / ECG pulse line — the brand "pulse" motif */
.wp-pulse {
    display: block;
    width: 280px;
    max-width: 78vw;
    height: 56px;
    overflow: visible;
}
.wp-pulse__line {
    fill: none;
    stroke: url(#wpPulseGrad);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 5px rgba(155, 209, 95, 0.45));
}
/* faint full trace behind the animated draw */
.wp-pulse__ghost {
    fill: none;
    stroke: rgba(255, 255, 255, 0.12);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.wp-pulse__dot {
    fill: #e3f4c8;
    filter: drop-shadow(0 0 6px rgba(155, 209, 95, 0.95));
}

/* tagline under the pulse — still used by the signed-out page */
.wp-eyebrow {
    font-size: clamp(12px, 1.3vw, 14.5px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
    padding: 0 16px;
}

/* rotating cross-sell spotlight — "Did you know? Workpulse also handles …" */
.wp-spotlight {
    width: min(560px, 92vw);
    text-align: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(155, 209, 95, 0.18);
    border-radius: 18px;
    padding: 22px 26px;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.wp-spotlight__eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--wp-accent-light);
}
.wp-spotlight__dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--wp-accent); flex-shrink: 0;
    animation: wp-beat 1.4s ease-in-out infinite;
}
@keyframes wp-beat {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    30%      { transform: scale(1.5); opacity: 1; }
    45%      { transform: scale(1); }
}
.wp-spotlight__lead {
    margin: 12px 0 0;
    font-size: clamp(17px, 1.5vw, 20px);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.35;
}
.wp-spotlight__module {
    font-weight: 700;
    background: linear-gradient(120deg, var(--wp-accent-light), #d8efb6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: opacity 0.35s ease;
}
.wp-spotlight__benefit {
    margin: 8px 0 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.62);
    min-height: 20px;
    line-height: 1.45;
    transition: opacity 0.35s ease;
}
.wp-spotlight.is-swapping .wp-spotlight__module,
.wp-spotlight.is-swapping .wp-spotlight__benefit { opacity: 0; }
.wp-spotlight__dots { display: flex; justify-content: center; gap: 6px; margin-top: 16px; }
.wp-spotlight__dot-i {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    transition: background 0.3s, width 0.3s;
}
.wp-spotlight__dot-i.is-on { background: var(--wp-accent-light); width: 18px; border-radius: 3px; }

/* soft cross-sell line beneath the spotlight */
.wp-cross-sell {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
}
.wp-cross-sell a { font-weight: 700; color: var(--wp-accent-light); text-decoration: none; }
.wp-cross-sell a:hover { text-decoration: underline; }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 760px) {
    .wp-trust { gap: 8px 16px; }
    .wp-bottom { padding-bottom: 22px; }
}

@media (max-width: 480px) {
    .wp-card { padding: 26px 22px; }
    .wp-form__title { font-size: 24px; }
    .wp-trust__item { font-size: 12px; }
}

/* ---- height-aware: compact the decorative band on short laptops -------
   Everything stays visible; the band tightens (smaller gaps, shorter pulse,
   trimmer spotlight) as the viewport gets shorter so the whole column needs far
   less down-scaling and the card stays large. */
@media (max-height: 880px) {
    .wp-fit { padding: 16px 0; gap: clamp(10px, 1.5vh, 22px); }
    .wp-bottom { gap: 10px; }
    .wp-pulse { height: 40px; }
    .wp-spotlight { padding: 14px 22px; }
    .wp-spotlight__lead { margin-top: 8px; font-size: clamp(15px, 1.4vw, 18px); }
    .wp-spotlight__benefit { margin-top: 6px; }
    .wp-spotlight__dots { margin-top: 10px; }
}
@media (max-height: 720px) {
    .wp-fit { padding: 10px 0; gap: 8px; }
    .wp-bottom { gap: 8px; }
    .wp-pulse { height: 30px; }
    .wp-spotlight { padding: 12px 18px; }
}

/* when JS clamps at the minimum scale on tiny screens, allow scrolling */
.wp-login.wp-login--scroll {
    height: auto;
    min-height: 100vh;
    align-items: flex-start;
    overflow-y: auto;
    padding: 28px 0;
}

@media (prefers-reduced-motion: reduce) {
    .wp-login::after { display: none; }
    .wp-glow, .wp-spotlight__dot, .wp-top, .wp-stage, .wp-bottom,
    .wp-out__icon::after, .wp-out__spinner { animation: none !important; }
    .wp-pulse__dot { display: none; }
    .wp-top, .wp-stage, .wp-bottom { opacity: 1; transform: none; }
}