/* NiagaBill public front page. Kept separate from document and app styles. */
#login { display: block; place-items: normal; background: #f7f8f2; color: #173d37; padding: 0 6%; }
.site-header { max-width: 1240px; margin: auto; height: 106px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #dce3d8; }
.wordmark { display: flex; align-items: center; color: #173d37; font-size: 25px; font-weight: 750; letter-spacing: -1px; }
.wordmark:hover { text-decoration: none; }
.brand-mark { display: grid; place-items: center; background: #184b40; color: #d9f48b; border-radius: 12px; height: 39px; width: 39px; margin-right: 11px; font-size: 29px; }
.brand-dot { color: #789b3c; }
.header-note { color: #6c7b71; font-size: 13px; }
.header-signin { color: #173d37; font-weight: 650; border: 1px solid #cdd8cb; padding: 9px 17px; border-radius: 7px; }
.landing { max-width: 1140px; margin: auto; padding: 68px 0 60px; display: grid; grid-template-columns: 1.15fr 1fr; gap: 80px; align-items: center; }
.eyebrow { display: flex; align-items: center; gap: 9px; font-size: 10px; font-weight: 750; letter-spacing: 1.6px; }
.eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: #81a349; }
.hero h1 { font-size: clamp(36px, 4.3vw, 59px); line-height: 1.08; font-weight: 650; letter-spacing: -2.6px; margin: 22px 0; }
.hero-intro { font-size: 16px; line-height: 1.8; color: #64776d; margin: 0; }
.workflow { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 27px 0; font-size: 12px; font-weight: 650; }
.workflow b { color: #8d9e86; font-weight: 400; }
.document-preview { max-width: 440px; background: white; border: 1px solid #dde4d8; border-radius: 12px; padding: 24px 28px 0; box-shadow: 0 14px 32px #2b482409; transform: rotate(-1.5deg); }
.preview-top,.preview-heading,.preview-row,.preview-total,.preview-bottom { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.preview-logo { font-size: 9px; font-weight: 750; letter-spacing: 1.5px; }
.preview-badge { font-size: 9px; background: #ecf3df; color: #536f37; border-radius: 20px; padding: 4px 9px; }
.preview-heading { margin: 22px 0 15px; }
.preview-heading strong { font-size: 23px; letter-spacing: -.6px; }
.preview-heading span { font-size: 10px; color: #849084; }
.preview-rule { height: 2px; background: #254e3f; margin-bottom: 13px; }
.preview-row { font-size: 11px; margin: 12px 0; }
.preview-total { border-top: 1px solid #e5eadd; padding: 16px 0; margin-top: 20px; font-size: 11px; }
.preview-total strong { font-size: 21px; }
.preview-bottom { margin: 0 -28px; padding: 12px 28px; border-radius: 0 0 12px 12px; background: #f0f4e8; font-size: 9px; color: #698061; }
.preview-bottom span:last-child { font-size: 18px; }
.hero-points { display: flex; flex-wrap: wrap; gap: 16px; font-size: 10px; color: #6d7e69; margin-top: 27px; }
.auth-panel { width: 100%; max-width: 440px; justify-self: end; }
#login .login-card { width: 100%; padding: 30px; gap: 17px; border: 1px solid #e0e6db; border-radius: 15px; box-shadow: 0 14px 45px #233e2010; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: #f1f4ec; padding: 4px; border-radius: 8px; margin-bottom: 6px; }
.auth-tabs button { padding: 10px 6px; border: 0; border-radius: 5px; background: transparent; color: #72806b; font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; }
.auth-tabs button[aria-pressed="true"] { background: white; color: #244d3c; box-shadow: 0 1px 4px #233e2012; }
.auth-kicker { font-size: 9px; letter-spacing: 1.5px; color: #82936d; font-weight: 750; margin: 0 0 10px; }
#login h2 { font-size: 27px; letter-spacing: -.8px; font-weight: 650; margin-bottom: 7px; }
.auth-description { font-size: 12px; color: #748171; margin: 0; line-height: 1.7; }
#login .field { gap: 7px; }
#login .field span { color: #405b4a; font-size: 12px; font-weight: 550; }
#login input { min-width: 0; width: 100%; background: #fcfdf9; border: 1px solid #dce3d5; border-radius: 6px; padding: 12px; font-size: 13px; }
#login input:focus { outline: 2px solid #8cac61; outline-offset: 2px; }
#login .btn--primary { display: flex; align-items: center; justify-content: space-between; background: #1e4b3d; border-color: #1e4b3d; color: #fff; padding: 13px 17px; border-radius: 6px; font-weight: 550; }
#login .btn--primary:hover { background: #2c624f; }
#login button:disabled { opacity: .6; cursor: wait; }
#login button:focus-visible, #login a:focus-visible { outline: 2px solid #789b3c; outline-offset: 4px; }
.auth-hint,.auth-footnote { color: #7a8672; font-size: 10px; margin: 0; }
.auth-footnote { text-align: center; border-top: 1px solid #edf0e7; padding-top: 15px; }
#login .login-error:empty { display: none; }
.auth-caption { text-align: center; font-size: 10px; color: #839078; margin: 17px 0 0; }
.text-button { background: none; border: 0; color: #375c48; text-decoration: underline; cursor: pointer; }
#workspace-profile { display: grid; gap: 18px; min-width: 0; }
#login textarea { width: 100%; min-width: 0; resize: vertical; padding: 12px; border: 1px solid #dce3d5; border-radius: 6px; font: inherit; background: #fcfdf9; }
#login textarea:focus { outline: 2px solid #8cac61; outline-offset: 2px; }
#login .profile-image input[type="file"] { font-size: 11px; padding: 8px; }
#login .profile-image { gap: 10px; }
#login .profile-image small { font-size: 11px; }
#login .quote-template-options { grid-template-columns: 1fr; }
.site-footer { max-width: 1240px; margin: auto; padding: 22px 0; border-top: 1px solid #dce3d8; display: flex; justify-content: space-between; gap: 12px; color: #839078; font-size: 10px; }
@media (max-width: 1000px) { .landing { gap: 35px; } .header-note { display: none; } .hero h1 { letter-spacing: -1.7px; } }
@media (max-width: 720px) { #login { padding: 0 6%; } .site-header { height: 80px; } .landing { grid-template-columns: 1fr; padding-top: 36px; gap: 35px; } .hero h1 { font-size: 44px; } .auth-panel { max-width: none; justify-self: stretch; } .document-preview { display: none; } .hero-points { margin-top: 12px; } .hero-intro { font-size: 14px; } .workflow { margin-bottom: 12px; } .site-footer { flex-direction: column; } #login .login-card { padding: 24px; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }