/**
 * Legacy Log — ll-frontend.css  (v3.8.0)
 * Marketing site, auth pages and static pages (terms, privacy, changelog).
 * Requires ll-core.css loaded first. Class names unchanged from v3.7.
 * Digitalis Creative
 */

/* ── TOP NAV ───────────────────────────────────────────────────── */
.fe-nav {
    position: sticky; top: 0; z-index: 100; height: 62px;
    display: flex; align-items: center; gap: 0; padding: 0 2rem;
    background: rgba(255,255,255,0.85);
    -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--line);
}
.fe-nav-logo { display: flex; align-items: center; gap: .6rem; margin-right: auto; color: var(--ink-1); }
.fe-nav-logo:hover { color: var(--ink-1); }
.fe-nav-logo i {
    width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
    background: var(--accent-tint); color: var(--accent-strong); font-size: .85rem;
    box-shadow: inset 0 0 0 1px rgba(185,138,62,0.22);
}
.fe-nav-logo-name { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink-1); }
.fe-nav-links { display: flex; align-items: center; gap: 2px; margin-right: 1rem; }
.fe-nav-link { display: flex; align-items: center; height: 36px; padding: 0 .75rem; border-radius: var(--rad-sm); color: var(--ink-2); font-size: .9rem; font-weight: 500; transition: color .15s, background .15s; }
.fe-nav-link:hover { color: var(--ink-1); background: var(--surface-3); }
.fe-nav-actions { display: flex; align-items: center; gap: .5rem; }
.fe-btn-ghost, .fe-btn-gold {
    display: inline-flex; align-items: center; gap: .4rem; height: 36px; padding: 0 1rem;
    border-radius: var(--rad-sm); font-size: .88rem; font-weight: 550; white-space: nowrap;
    transition: background .15s, border-color .15s, box-shadow .15s, color .15s;
}
.fe-btn-ghost { color: var(--ink-1); border: 1px solid var(--line-2); background: var(--surface); box-shadow: var(--shadow-xs); }
.fe-btn-ghost:hover { color: var(--ink-1); border-color: #CFC4B3; background: var(--surface-2); }
.fe-btn-gold { color: #fff; background: var(--accent-strong); border: 1px solid var(--accent-strong); box-shadow: 0 1px 2px rgba(120,76,20,0.18), inset 0 1px 0 rgba(255,255,255,0.12); }
.fe-btn-gold:hover { color: #fff; background: #8F5D1C; border-color: #8F5D1C; }

/* ── AUTH ──────────────────────────────────────────────────────── */
.auth-page {
    min-height: calc(100vh - 62px); display: flex; align-items: center; justify-content: center; padding: 3rem 1rem;
    background: radial-gradient(700px 360px at 50% 0%, rgba(185,138,62,0.12), transparent 70%), var(--bg);
}
.auth-card {
    width: 100%; max-width: 420px; padding: 2.5rem 2.25rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg);
}
.auth-logo { text-align: center; margin-bottom: 2rem; }
.auth-logo-icon {
    width: 48px; height: 48px; margin: 0 auto .9rem; border-radius: 14px; display: grid; place-items: center;
    background: var(--accent-tint); color: var(--accent-strong); font-size: 1.2rem;
    box-shadow: inset 0 0 0 1px rgba(185,138,62,0.22), var(--accent-glow);
}
.auth-logo-name { font-family: var(--font-display); font-size: 1.6rem; color: var(--ink-1); letter-spacing: -0.015em; }
.auth-logo-tagline { font-size: .9rem; color: var(--ink-2); margin-top: .25rem; }
.auth-notice { padding: .75rem .9rem; border-radius: var(--rad); font-size: .88rem; margin-bottom: 1.25rem; border: 1px solid; }
.auth-notice.error   { background: #FBF1EF; border-color: rgba(181,72,58,0.22); color: #8A3327; }
.auth-notice.success { background: #F1F7F3; border-color: rgba(62,122,87,0.22); color: #2C5B40; }
.auth-notice:not(.error):not(.success) { background: var(--accent-tint); border-color: rgba(185,138,62,0.3); color: var(--accent-ink); }   /* v3.8.7: plan notice */
.auth-links { text-align: center; margin-top: 1.4rem; font-size: .88rem; color: var(--ink-3); }
.auth-links a { color: var(--accent-ink); font-weight: 550; }
.auth-links a:hover { color: var(--ink-1); }
.auth-divider { display: flex; align-items: center; gap: .75rem; margin: 1.25rem 0; color: var(--ink-3); font-size: .8rem; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.hp-field { display: none !important; visibility: hidden !important; }

/* forms */
.form-row { margin-bottom: 1.05rem; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: 1.05rem; }
.form-label { display: block; margin-bottom: .4rem; font-size: .84rem; font-weight: 550; color: var(--ink-1); }
.form-input, .form-select {
    width: 100%; min-height: 44px; padding: .65rem .85rem;
    font-family: var(--font-ui); font-size: .95rem; color: var(--ink-1);
    background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--rad-sm);
    box-shadow: var(--shadow-xs); outline: 0; appearance: none; -webkit-appearance: none;
    transition: border-color .15s, box-shadow .15s;
}
.form-input::placeholder { color: #ADA395; }
.form-input:hover, .form-select:hover { border-color: #CFC4B3; }
.form-input:focus, .form-select:focus { border-color: var(--accent); box-shadow: var(--accent-glow); }
.form-select {
    padding-right: 2.2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E655B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .85rem center;
}

/* buttons (full-width on auth/marketing pages) */
.btn-primary, .btn-outline {
    width: 100%; min-height: 44px; padding: .65rem 1rem;
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    font-family: var(--font-ui); font-size: .95rem; font-weight: 550; cursor: pointer;
    border-radius: var(--rad-sm); transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn-primary { color: #fff; background: var(--accent-strong); border: 1px solid var(--accent-strong); box-shadow: 0 1px 2px rgba(120,76,20,0.18), inset 0 1px 0 rgba(255,255,255,0.12); }
.btn-primary:hover { color: #fff; background: #8F5D1C; border-color: #8F5D1C; }
.btn-primary:focus-visible, .btn-outline:focus-visible { outline: none; box-shadow: var(--accent-glow); }
.btn-outline { margin-top: .6rem; color: var(--ink-1); background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-xs); }
.btn-outline:hover { color: var(--ink-1); background: var(--surface-2); border-color: #CFC4B3; }

/* ── LANDING ───────────────────────────────────────────────────── */
.lp-hero {
    position: relative; overflow: hidden; text-align: center; padding: 6rem 2rem 5rem;
    background:
        radial-gradient(900px 420px at 50% -10%, rgba(185,138,62,0.16), transparent 70%),
        radial-gradient(600px 300px at 90% 20%, rgba(59,120,184,0.06), transparent 70%),
        var(--surface);
    border-bottom: 1px solid var(--line);
}
.lp-hero-wrap { position: relative; max-width: 720px; margin: 0 auto; }
.lp-hero-label {
    display: inline-flex; align-items: center; gap: .45rem; margin-bottom: 1.5rem;
    padding: .3rem .85rem; border-radius: var(--rad-pill);
    font-size: .8rem; font-weight: 550; color: var(--accent-ink);
    background: var(--accent-tint); border: 1px solid rgba(185,138,62,0.25);
}
.lp-hero-h { font-family: var(--font-display); font-size: clamp(2.3rem, 5.5vw, 3.75rem); font-weight: 400; letter-spacing: -0.03em; line-height: 1.08; color: var(--ink-1); margin-bottom: 1.25rem; }
.lp-hero-h span { color: var(--accent-strong); font-style: italic; }
.lp-hero-sub { font-size: 1.15rem; color: var(--ink-2); line-height: 1.65; max-width: 560px; margin: 0 auto 2.25rem; }
.lp-hero-actions { display: flex; align-items: center; justify-content: center; gap: .75rem; flex-wrap: wrap; }
.lp-cta-primary, .lp-cta-ghost { display: inline-flex; align-items: center; gap: .5rem; height: 48px; padding: 0 1.6rem; border-radius: var(--rad); font-size: 1rem; font-weight: 550; transition: background .15s, border-color .15s, box-shadow .15s, color .15s; }
.lp-cta-primary { color: #fff; background: var(--accent-strong); border: 1px solid var(--accent-strong); box-shadow: 0 6px 20px rgba(162,107,35,0.25), inset 0 1px 0 rgba(255,255,255,0.14); }
.lp-cta-primary:hover { color: #fff; background: #8F5D1C; }
.lp-cta-ghost { color: var(--ink-1); background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-xs); }
.lp-cta-ghost:hover { color: var(--ink-1); border-color: #CFC4B3; }

.lp-stats { display: flex; justify-content: center; gap: 0; background: var(--surface); border-bottom: 1px solid var(--line); }
.lp-stat { padding: 1.3rem 2.75rem; text-align: center; border-right: 1px solid var(--line); }
.lp-stat:last-child { border-right: 0; }
.lp-stat-n { font-family: var(--font-display); font-size: 2rem; letter-spacing: -0.02em; color: var(--ink-1); }
.lp-stat-l { font-size: .82rem; color: var(--ink-3); }

.lp-section { padding: 5.5rem 2rem; }
.lp-section.light { background: var(--bg); }
.lp-section.white { background: var(--surface); }
.lp-section.dark  { background: #2B2622; color: #F5EFE6; }
.lp-section-inner { max-width: 1120px; margin: 0 auto; }
.lp-section-head { margin-bottom: 3rem; }
.lp-section-head.centered { text-align: center; }
.lp-section-head.centered .lp-section-label { justify-content: center; }
.lp-section-head.centered .lp-section-sub { margin: 0 auto; }
.lp-section-label { display: flex; align-items: center; gap: .45rem; margin-bottom: .6rem; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.lp-section-label.dark-label, .lp-section.dark .lp-section-label { color: #E1C08A; }
.lp-section-h { font-family: var(--font-display); font-size: clamp(1.8rem, 3.6vw, 2.5rem); font-weight: 400; letter-spacing: -0.02em; color: var(--ink-1); margin-bottom: .75rem; }
.lp-section.dark .lp-section-h { color: #fff; }
.lp-section-sub { max-width: 560px; font-size: 1.05rem; color: var(--ink-2); line-height: 1.7; }
.lp-section.dark .lp-section-sub { color: rgba(245,239,230,0.7); }

.lp-features { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.lp-feature { padding: 1.75rem 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--rad-lg); box-shadow: var(--shadow-sm); transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s; }
.lp-feature:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--line-2); }
.lp-feature-icon { width: 42px; height: 42px; margin-bottom: 1.1rem; border-radius: 12px; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent-strong); font-size: 1rem; box-shadow: inset 0 0 0 1px rgba(185,138,62,0.2); }
.lp-feature-h { font-size: 1.05rem; font-weight: 600; color: var(--ink-1); margin-bottom: .4rem; }
.lp-feature-p { font-size: .95rem; color: var(--ink-2); line-height: 1.6; }

.lp-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; }
.lp-step { text-align: center; padding: 1.5rem 1rem; }
.lp-step-num { width: 48px; height: 48px; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-size: 1.2rem; color: #E1C08A; background: rgba(225,192,138,0.1); border: 1px solid rgba(225,192,138,0.3); box-shadow: 0 0 24px rgba(225,192,138,0.15); }
.lp-step-h { font-size: 1.05rem; font-weight: 600; color: #fff; margin-bottom: .4rem; }
.lp-step-p { font-size: .95rem; color: rgba(245,239,230,0.65); line-height: 1.6; }

.lp-cta-section { text-align: center; padding: 5.5rem 2rem; background: radial-gradient(700px 300px at 50% 100%, rgba(185,138,62,0.14), transparent 70%), var(--surface); border-top: 1px solid var(--line); }
.lp-cta-h { font-family: var(--font-display); font-size: clamp(1.8rem, 3.2vw, 2.4rem); font-weight: 400; letter-spacing: -0.02em; color: var(--ink-1); margin-bottom: .75rem; }
.lp-cta-sub { font-size: 1.05rem; color: var(--ink-2); line-height: 1.7; margin-bottom: 2rem; }

.lp-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 2rem; background: var(--bg); border-top: 1px solid var(--line); }
.lp-footer-brand { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--ink-2); }
.lp-footer-brand i { color: var(--accent); }
.lp-footer-links { display: flex; gap: 1.25rem; }
.lp-footer-link { font-size: .85rem; color: var(--ink-2); }
.lp-footer-link:hover { color: var(--ink-1); }
.lp-footer-copy { font-size: .8rem; color: var(--ink-3); }

/* ── RESPONSIVE ────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .fe-nav { padding: 0 1.1rem; }
    .fe-nav-links { display: none; }
    .lp-hero { padding: 4rem 1.25rem 3.5rem; }
    .lp-stats { flex-wrap: wrap; }
    .lp-stat { flex: 1 1 50%; padding: 1rem; }
    .lp-section { padding: 3.5rem 1.25rem; }
    .lp-features, .lp-steps { grid-template-columns: 1fr; }
    .lp-steps { gap: 1rem; }
    .auth-card { padding: 2rem 1.4rem; border-radius: var(--rad-lg); }
    .form-row-2 { grid-template-columns: 1fr; }
    .lp-footer { flex-direction: column; text-align: center; }
    .lp-footer-links { justify-content: center; }
}
@media (max-width: 480px) { .lp-stat { flex-basis: 100%; } }