/* Dedicated Onboard web login. No application shell or installed-app assets. */
:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #102433; background: #f5f5f2; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
button, input { font: inherit; }
a { color: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.ob-login-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: radial-gradient(ellipse at 9% 8%, #e7eee8 0, transparent 45%), radial-gradient(ellipse at 95% 90%, #f1e7dc 0, transparent 40%), #f5f5f2;
    -webkit-font-smoothing: antialiased;
}
.ob-login-main { flex: 1; display: grid; place-items: center; padding: 32px 24px; }
.ob-login-shell {
    width: min(1080px, 100%);
    display: grid;
    grid-template-columns: 1.06fr 1fr;
    overflow: hidden;
    border: 1px solid #dfe5df;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 20px 65px #1024330b, 0 2px 8px #10243303;
}
.ob-login-story { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; padding: 40px 42px; background: linear-gradient(145deg, #fafbf7, #f4f5ee); }
.ob-login-brand { display: block; width: 324px; max-width: 100%; margin-left: -15px; line-height: 0; border-radius: 8px; }
.ob-login-brand img { display: block; width: 100%; height: auto; }
.ob-login-intro h1 { margin: 0 0 14px; font-size: clamp(24px, 2.45vw, 31px); font-weight: 650; line-height: 1.3; letter-spacing: -.8px; }
.ob-login-intro p { max-width: 43ch; margin: 0; color: #617064; font-size: 14px; line-height: 1.7; }
.ob-login-benefits { display: grid; gap: 20px; margin: 0; padding: 2px 0 0; list-style: none; }
.ob-login-benefits li { display: flex; align-items: flex-start; gap: 12px; }
.ob-login-benefits strong { display: block; margin: 0 0 4px; color: #24392e; font-size: 14px; font-weight: 650; }
.ob-login-benefits li div > span { color: #6c786f; font-size: 13px; line-height: 1.5; }
.ob-login-check { flex: 0 0 28px; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #dce6da; border-radius: 9px; background: #edf3e9; color: #477554; }
.ob-login-check svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ob-login-card { display: flex; flex-direction: column; justify-content: center; padding: 46px 48px; border-left: 1px solid #e9ede7; }
.ob-login-eyebrow { margin: 0 0 12px; color: #6a776e; font-size: 11px; font-weight: 650; letter-spacing: 1.8px; text-transform: uppercase; }
.ob-login-heading h2 { margin: 0 0 10px; font-size: 29px; line-height: 1.2; font-weight: 650; letter-spacing: -.7px; }
.ob-login-heading > p:last-child { margin: 0; color: #728078; font-size: 14px; line-height: 1.6; }
.ob-login-form { display: grid; gap: 20px; margin-top: 30px; }
.ob-login-field { display: grid; gap: 9px; }
.ob-login-field > label { color: #304036; font-size: 13px; font-weight: 600; }
.ob-login-field input { display: block; width: 100%; min-height: 49px; padding: 12px 14px; border: 1px solid #d9e0db; border-radius: 9px; outline: none; background: #fcfdfb; color: #102433; font-size: 15px; line-height: 1.4; transition: border-color .15s, box-shadow .15s; }
.ob-login-field input::placeholder { color: #99a39c; }
.ob-login-field input:focus { border-color: #447f65; box-shadow: 0 0 0 3px #2b785416; background: #fff; }
.ob-login-field input[aria-invalid="true"] { border-color: #d86a74; }
.ob-login-field input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #f3f8f0 inset; -webkit-text-fill-color: #102433; }
.ob-login-password { position: relative; }
.ob-login-password input { padding-right: 54px; }
.ob-login-password-toggle { position: absolute; top: 3px; right: 4px; display: grid; place-items: center; width: 43px; height: 43px; padding: 0; border: 0; border-radius: 6px; color: #7b897f; background: transparent; }
.ob-login-password-toggle:hover { background: #edf3ee; color: #176b52; }
.ob-login-password-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ob-login-eye-slash { display: none; }
.ob-login-password-toggle[aria-pressed="true"] .ob-login-eye-slash { display: block; }
.ob-login-options { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 12px; }
.ob-login-options > a { color: #336d52; text-decoration: none; font-weight: 600; }
.ob-login-options > a:hover { text-decoration: underline; }
.ob-login-remember { display: inline-flex; align-items: center; gap: 8px; color: #58665d; cursor: pointer; }
.ob-login-remember input { width: 16px; height: 16px; margin: 0; accent-color: #176b52; }
.ob-login-submit { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 49px; padding: 13px 20px; border: 1px solid #176b52; border-radius: 9px; color: #fff; background: #176b52; font-size: 14px; font-weight: 650; transition: background .15s; }
.ob-login-submit:hover { background: #11523f; border-color: #11523f; }
.ob-login-submit:disabled { opacity: .65; cursor: wait; }
.ob-login-submit svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ob-login-register { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 28px; padding-top: 24px; border-top: 1px solid #e9ede7; font-size: 13px; }
.ob-login-register p { margin: 0; color: #728078; }
.ob-login-register a { color: #176b52; font-weight: 650; text-decoration: none; }
.ob-login-register a span { margin-left: 4px; }
.ob-login-register a:hover { text-decoration: underline; }
.ob-login-error { margin: 0; font-size: 12px; line-height: 1.5; color: #b42337; }
a:focus-visible, button:focus-visible, input[type="checkbox"]:focus-visible { outline: 3px solid #80b3a0; outline-offset: 4px; }
.z1-app-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; min-height: 40px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid #bfdbfe; color: #52677f; background: #eff6fffa; font-size: 11px; font-weight: 600; line-height: 1.2; }
.z1-app-footer a { color: #334155; font-weight: 750; text-decoration: none; }
.z1-app-footer a:hover { text-decoration: underline; }
.toast-stack { position: fixed; top: 18px; right: 18px; z-index: 10; display: grid; gap: 10px; width: min(400px, calc(100% - 36px)); }
.toast-notification { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 16px; border: 1px solid #c9ddcc; border-radius: 12px; background: #f3faf2; color: #24492b; box-shadow: 0 8px 30px #10243318; }
.toast-copy { display: grid; gap: 5px; font-size: 13px; line-height: 1.5; }
.toast-close { padding: 0; border: 0; background: transparent; color: inherit; font-size: 22px; }
.toast-danger, .toast-warning { border-color: #f3b7b7; background: #fff5f5; color: #973342; }
@media (max-width: 900px) {
    .ob-login-main { padding: 24px 20px; }
    .ob-login-story { padding: 32px 28px; gap: 26px; }
    .ob-login-brand { width: 280px; max-width: calc(100% + 15px); }
    .ob-login-intro h1 { font-size: 26px; }
    .ob-login-card { padding: 36px 30px; }
    .ob-login-register { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 640px) {
    .ob-login-main { padding: 20px 16px; }
    .ob-login-shell { max-width: 440px; grid-template-columns: 1fr; border-radius: 18px; }
    .ob-login-story { padding: 24px 26px 20px; gap: 12px; }
    .ob-login-brand { width: 250px; margin-left: -12px; }
    .ob-login-intro h1 { margin-bottom: 0; font-size: 20px; line-height: 1.4; letter-spacing: -.4px; }
    .ob-login-intro p, .ob-login-benefits { display: none; }
    .ob-login-card { padding: 26px; border-left: 0; border-top: 1px solid #e9ede7; }
    .ob-login-eyebrow { display: none; }
    .ob-login-heading h2 { font-size: 26px; }
    .ob-login-heading > p:last-child { font-size: 13px; }
    .ob-login-form { margin-top: 24px; gap: 19px; }
    .ob-login-field input { font-size: 16px; }
    .ob-login-options { font-size: 12px; }
    .ob-login-register { margin-top: 24px; padding-top: 20px; flex-direction: row; }
    .z1-app-footer { font-size: 10px; padding-inline: 14px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

/* Public login matches the Onboard registration website. */
.ob-login-public .onboard-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4.5rem;padding:.55rem max(1rem,calc((100% - 1180px)/2));border-bottom:1px solid #e6ddd2;background:#fffbf7;box-shadow:0 8px 30px #12263505}
.ob-login-public .onboard-brand{display:flex;align-items:center;flex-shrink:0}
.ob-login-public .onboard-brand-logo{width:170px;height:auto;max-height:57px;object-fit:contain}
.ob-login-public .onboard-menu{display:flex;align-items:center;gap:.18rem;padding:.22rem;border:1px solid #dfd3c666;border-radius:18px;background:#f2e6d96b}
.ob-login-public .onboard-menu a{display:flex;align-items:center;justify-content:center;min-height:2.4rem;padding:0 .78rem;border-radius:14px;color:#5c6872;font-size:.8rem;font-weight:750;white-space:nowrap}
.ob-login-public .onboard-menu a:hover{background:#fffaf5;color:#122635}
.ob-login-public .onboard-nav-actions{display:flex;align-items:center;gap:.35rem;font-size:.82rem;font-weight:750}
.ob-login-public .onboard-nav-actions a{display:flex;align-items:center;justify-content:center;min-height:2.6rem;padding:0 .9rem;border-radius:16px;white-space:nowrap}
.ob-login-public .onboard-nav-actions .onboard-nav-cta{background:#122635;color:#fffaf4}

.ob-login-public {
    font-family: "IBM Plex Sans", "Aptos", "Segoe UI", sans-serif;
    background: linear-gradient(180deg, #f8f4eec7, #f2ece2b8), radial-gradient(circle at top right, #bf6e4229, transparent 28%), url('/images/auth/office-login-bg.jpg') center/cover no-repeat;
}
.ob-login-public .onboard-nav { position: relative; z-index: 2; flex-shrink: 0; }
.ob-login-public .onboard-nav a { text-decoration: none; }
.ob-login-public .onboard-nav a:focus-visible { outline-color: #94512e; }
.ob-login-public .ob-login-main { padding: 32px 20px; }
.ob-login-public .ob-login-shell { width: min(1180px, 100%); grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: .8rem; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.ob-login-public .ob-login-story {
    gap: 26px;
    padding: clamp(24px, 3vw, 36px);
    border-radius: 26px;
    background: linear-gradient(180deg, #09121b24, #09121b8a), linear-gradient(135deg, #a55e3838, #102433d6), url('/images/auth/office-login-bg.jpg') center/cover no-repeat;
    color: #f7f2eb;
    box-shadow: 0 18px 46px #121f2a14;
}
.ob-login-public .ob-login-brand { width: 285px; margin: 0 0 auto; }
.ob-login-public .ob-login-intro h1 { font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; font-size: clamp(26px, 2.35vw, 36px); font-weight: 500; line-height: 1.15; letter-spacing: -.035em; }
.ob-login-public .ob-login-intro p { color: #f7f2ebcf; }
.ob-login-public .ob-login-benefits strong { color: #fffaf4; }
.ob-login-public .ob-login-benefits li div > span { color: #f7f2ebc9; }
.ob-login-public .ob-login-check { border-color: #ffffff30; background: #ffffff18; color: #d1e8d9; }
.ob-login-public .ob-login-card { padding: clamp(26px, 3vw, 40px); border: 1px solid #e2dbd2; border-radius: 26px; background: linear-gradient(180deg, #fffffffa, #fffaf5f5); box-shadow: 0 18px 46px #121f2a14; }
.ob-login-public .ob-login-heading h2 { font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; font-size: 36px; font-weight: 600; letter-spacing: -.035em; }
.ob-login-public .ob-login-heading > p:last-child { color: #5f6d79; }
.ob-login-public .ob-login-field input { border-color: #d7cfc5; border-radius: 13px; background: #fffdfb; }
.ob-login-public .ob-login-submit { border-radius: 13px; }
.ob-login-public-footer { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; padding: .6rem max(1.25rem, calc((100% - 1180px) / 2)) calc(.6rem + env(safe-area-inset-bottom)); background: #122635; color: #fff8eeb8; font-size: .76rem; line-height: 1.25; }
.ob-login-public-footer a { color: #fffaf4; font-weight: 800; text-decoration: none; }
.ob-login-public-footer a:hover { text-decoration: underline; }

@media (max-width: 980px) {
    .ob-login-public .ob-login-shell { width: min(650px, 100%); grid-template-columns: 1fr; }
    .ob-login-public .ob-login-story { gap: 20px; }
    .ob-login-public .ob-login-brand { width: 235px; }
    .ob-login-public .ob-login-intro h1 { font-size: 28px; }
    .ob-login-public .ob-login-intro p, .ob-login-public .ob-login-benefits { display: none; }
}
@media (max-width: 900px) {
    .ob-login-public .onboard-nav { flex-wrap: wrap; gap: .4rem .75rem; padding: .55rem 1rem; }
    .ob-login-public .onboard-menu { order: 3; flex-basis: 100%; justify-content: center; padding: 0; border: 0; background: transparent; }
}
@media (max-width: 600px) {
    .ob-login-public .onboard-nav { padding: .55rem .75rem; }
    .ob-login-public .onboard-nav > .onboard-brand .onboard-brand-logo { width: 125px; }
    .ob-login-public .onboard-nav-actions { gap: 0; font-size: .72rem; }
    .ob-login-public .onboard-nav-actions a { padding: 0 .65rem; min-height: 2.5rem; border-radius: 12px; }
    .ob-login-public .onboard-menu { justify-content: space-between; }
    .ob-login-public .onboard-menu a { padding: 0 .5rem; font-size: .75rem; }
    .ob-login-public .ob-login-main { padding: .7rem; }
    .ob-login-public .ob-login-story, .ob-login-public .ob-login-card { padding: 24px; border-radius: 23px; }
    .ob-login-public .ob-login-story { gap: 18px; }
    .ob-login-public .ob-login-brand { width: 190px; }
    .ob-login-public .ob-login-intro h1 { font-size: 23px; }
    .ob-login-public .ob-login-heading h2 { font-size: 30px; }
    .ob-login-public-footer { padding-inline: .9rem; font-size: .7rem; }
    .ob-login-footer-tagline { display: none; }
}
@media (max-width: 360px) {
    .ob-login-public .onboard-nav > .onboard-brand .onboard-brand-logo { width: 110px; }
    .ob-login-public .onboard-nav-actions a { padding-inline: .5rem; font-size: .68rem; }
}
