/* Public landing page — shares the app theme tokens defined in site.css (:root --pep-*). */

body.landing {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #2d3748;
}

/* Navbar matches the in-app top bar gradient */
.landing-navbar {
    background: linear-gradient(135deg, var(--pep-primary, #667eea) 0%, var(--pep-primary-2, #764ba2) 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.landing-navbar .navbar-brand,
.landing-navbar .nav-link { color: #fff; }
.landing-navbar .brand-logo { height: 34px; width: auto; }

/* Hero */
.landing-hero {
    background: linear-gradient(135deg, var(--pep-primary, #667eea) 0%, var(--pep-primary-2, #764ba2) 100%);
    color: #fff;
    overflow: hidden;
}
.landing-hero h1 { font-weight: 800; line-height: 1.1; text-shadow: 0 2px 10px rgba(0,0,0,0.18); }
.landing-hero .hero-illustration { max-width: 100%; height: auto; filter: drop-shadow(0 10px 24px rgba(0,0,0,0.18)); }

.btn-pep { background: #ffd166; color: #2d3748; font-weight: 700; border: none; }
.btn-pep:hover { background: #ffc233; color: #2d3748; }

/* Feature cards */
.feature-card { border: none; border-radius: 1rem; transition: transform .15s ease, box-shadow .15s ease; }
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(102,126,234,0.18); }
.feature-icon {
    width: 64px; height: 64px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.6rem; color: #fff;
    background: linear-gradient(135deg, var(--pep-primary, #667eea) 0%, var(--pep-primary-2, #764ba2) 100%);
}

/* Pricing */
.pricing-card { border: 2px solid var(--pep-primary, #667eea); border-radius: 1.25rem; }
.pricing-card .price { color: var(--pep-primary-dark, #5a67d8); font-weight: 800; }
.pricing-feature i { color: var(--pep-success, #48bb78); }

.section-title { font-weight: 800; color: #2d3748; }

footer.landing-footer { background: #2d3748; color: rgba(255,255,255,0.7); }
footer.landing-footer a { color: rgba(255,255,255,0.85); }
footer.landing-footer a:hover { color: #fff; }

.child-row .remove-child { height: 38px; }