/* ---------------------------------------------------------------------------
   marketing.css -- the "outward facing" visual language for e-TaxLine:
   the landing page ("/") and the login/register pages. Deliberately kept
   separate from style.css (the plain, functional look of the logged-in
   app itself) so the two can evolve independently -- a prospective client
   judging the product from "/" should see something polished; a tenant
   doing day-to-day invoicing needs speed and clarity more than flourish.
   Palette matches the WhatsApp/Facebook ad graphic built for this product
   (deep green + gold) so a prospect clicking through from that ad lands
   somewhere that visually agrees with what they just saw.
--------------------------------------------------------------------------- */

:root {
    --etx-green-deep: #05341f;
    --etx-green-mid: #0a4a2c;
    --etx-green-light: #0d5c37;
    --etx-gold: #ffd76a;
    --etx-gold-hover: #ffcf4d;
    --etx-mint: #d7ecdf;
    --etx-mint-dim: #b8d9c4;
}

/* This stylesheet is only ever loaded on the marketing/auth pages, so it's
   safe to style `html` unconditionally here -- done so the gradient always
   covers the full scrollable page height, not just the body's own content
   box (which otherwise can leave a plain white sliver below a short page,
   depending on how margins collapse). */
html, .mkt-page {
    background: linear-gradient(160deg, var(--etx-green-deep) 0%, var(--etx-green-mid) 45%, var(--etx-green-light) 100%);
}
.mkt-page {
    background-attachment: fixed;
    min-height: 100vh;
    color: #ffffff;
}

.mkt-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 1.35rem;
    color: #ffffff;
    text-decoration: none;
}
.mkt-brand:hover { color: #ffffff; }
.mkt-brand .mark {
    background: var(--etx-gold);
    color: var(--etx-green-mid);
    width: 34px; height: 34px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900;
    font-size: 1.05rem;
}

.mkt-nav { padding: 22px 0; }
.mkt-nav .btn-outline-light { border-color: rgba(255,255,255,0.5); }
.mkt-nav .btn-outline-light:hover { background: rgba(255,255,255,0.12); color: #fff; }

.mkt-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: #ffffff; color: #b3121b; font-weight: 800;
    padding: 9px 22px; border-radius: 999px; font-size: 0.82rem;
    letter-spacing: 0.3px;
}
.mkt-badge .dot { width: 9px; height: 9px; border-radius: 50%; background: #b3121b; }

.mkt-hero h1 { font-weight: 800; font-size: 3rem; letter-spacing: -1px; line-height: 1.12; }
.mkt-hero .accent { color: var(--etx-gold); }
.mkt-hero p.lead { color: var(--etx-mint); font-size: 1.2rem; }

.btn-gold {
    background: var(--etx-gold); border-color: var(--etx-gold); color: var(--etx-green-mid);
    font-weight: 700;
}
.btn-gold:hover, .btn-gold:focus {
    background: var(--etx-gold-hover); border-color: var(--etx-gold-hover); color: var(--etx-green-mid);
}

.mkt-card {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 18px;
    color: #ffffff;
}
.mkt-card h5 { color: var(--etx-gold); font-weight: 700; }
.mkt-card p { color: var(--etx-mint); }

.mkt-stat { text-align: center; }
.mkt-stat .num { font-size: 2.1rem; font-weight: 800; color: var(--etx-gold); }
.mkt-stat .label { color: var(--etx-mint); font-size: 0.9rem; }

.mkt-pricing-card {
    background: #ffffff; color: #123524; border-radius: 18px; border: none;
}
.mkt-pricing-card .price { color: var(--etx-green-mid); font-weight: 800; }
.mkt-pricing-card.featured {
    box-shadow: 0 0 0 3px var(--etx-gold);
    transform: translateY(-6px);
}
.mkt-pricing-card .badge-popular {
    background: var(--etx-gold); color: var(--etx-green-mid); font-weight: 700;
}

.mkt-footer { color: var(--etx-mint-dim); padding: 40px 0 30px; text-align: center; font-size: 0.9rem; }
.mkt-footer a { color: var(--etx-mint-dim); text-decoration: underline; }

/* ---- Auth pages (login / register): split card, brand panel + form panel ---- */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; padding: 40px 0; }
.auth-card {
    background: #ffffff; color: #142a1e; border-radius: 22px;
    box-shadow: 0 30px 70px rgba(0,0,0,0.35);
    overflow: hidden;
}
.auth-side {
    background: linear-gradient(160deg, var(--etx-green-deep) 0%, var(--etx-green-mid) 45%, var(--etx-green-light) 100%);
    color: #ffffff; padding: 52px 44px;
    display: flex; flex-direction: column; justify-content: center;
    min-height: 100%;
}
.auth-side h2 { font-weight: 800; line-height: 1.2; }
.auth-side .accent { color: var(--etx-gold); }
.auth-side ul { list-style: none; padding: 0; margin: 26px 0 0; }
.auth-side ul li { display: flex; gap: 12px; margin-bottom: 14px; color: var(--etx-mint); font-size: 0.98rem; }
.auth-side ul li .check {
    background: var(--etx-gold); color: var(--etx-green-mid);
    width: 22px; height: 22px; min-width: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 12px; margin-top: 2px;
}
.auth-form-side { padding: 52px 44px; }
.auth-form-side h4 { font-weight: 800; color: #123524; }

.mkt-page .form-control, .mkt-page .form-select {
    border-radius: 10px; border: 1px solid #d7dee0; padding: 10px 14px;
}
.mkt-page .form-control:focus, .mkt-page .form-select:focus {
    border-color: var(--etx-green-light);
    box-shadow: 0 0 0 0.2rem rgba(13,92,55,0.15);
}
.mkt-page .form-label { font-weight: 600; color: #234133; font-size: 0.92rem; }

@media (max-width: 767.98px) {
    .mkt-hero h1 { font-size: 2.2rem; }
    .auth-side { display: none; }
}