/* ---------------------------------------------------------------------------
   Public marketing site (everything served by accounts.views public pages).

   Separate from theme.css on purpose: theme.css dresses the logged-in
   application, where density and scan-ability matter. These pages are read by
   a visitor who has never seen the product, so they are wider, quieter and
   more generous with space. Nothing here is loaded inside the app.
   --------------------------------------------------------------------------- */

body.public-page {
    background: #fff;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: #1e293b;
}

/* ----------------------------------------------------------------- nav ---- */
.lp-nav {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid #e5e7eb;
}
.lp-brand-name { font-weight: 800; letter-spacing: -.01em; font-size: .95rem; }
.lp-brand-sub { font-size: .74rem; }
.lp-nav-link {
    color: #475569;
    font-weight: 500;
    font-size: .93rem;
    text-decoration: none;
    padding: .35rem .1rem;
    border-bottom: 2px solid transparent;
}
.lp-nav-link:hover { color: var(--brand-primary); }
.lp-nav-link.is-active { color: var(--brand-primary); border-bottom-color: var(--brand-primary); }

/* --------------------------------------------------------------- hero ---- */
.lp-hero {
    background:
        radial-gradient(1000px 520px at 88% -12%, rgba(13, 148, 136, .30), transparent 62%),
        radial-gradient(700px 420px at 5% 110%, rgba(99, 102, 241, .35), transparent 60%),
        linear-gradient(135deg, var(--brand-primary-dark), var(--brand-primary));
    color: #fff;
    padding: 5rem 0 6rem;
    position: relative;
    overflow: hidden;
}
.lp-hero::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: -1px; height: 60px;
    background: #fff;
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.lp-hero h1 { font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.lp-hero-inner { position: relative; z-index: 1; }

/* A shorter banner for the inner pages, so they feel part of the same site
   without repeating the full-height home hero. */
.lp-page-head {
    background: linear-gradient(135deg, var(--brand-primary-dark), var(--brand-primary));
    color: #fff;
    padding: 3.25rem 0 3.5rem;
}
.lp-page-head h1 { font-weight: 800; letter-spacing: -.02em; }
.lp-page-head p { color: rgba(255, 255, 255, .82); max-width: 44rem; }

.lp-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .25);
    padding: .35rem .85rem;
    border-radius: 999px;
    font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.lp-cta { padding: .7rem 1.6rem; font-weight: 600; border-radius: 10px; }

/* ------------------------------------------------------------ sections --- */
.lp-section { padding: 4.5rem 0; }
.lp-section-alt { background: var(--surface); }
.lp-section-title { font-weight: 700; letter-spacing: -.02em; }
.lp-section-lead { color: #64748b; max-width: 44rem; margin-inline: auto; }
.lp-kicker {
    font-size: .78rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--brand-accent);
}

/* -------------------------------------------------------------- cards ---- */
.lp-feature {
    background: #fff;
    border: 1px solid #e8ecf1;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    height: 100%;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.lp-feature:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-3px);
    border-color: #dbe3ec;
}
.lp-feature-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
    margin-bottom: .9rem;
}
.lp-points { list-style: none; padding: 0; margin: .85rem 0 0; }
.lp-points li {
    position: relative;
    padding-left: 1.35rem;
    margin-bottom: .4rem;
    font-size: .875rem;
    color: #475569;
}
.lp-points li::before {
    content: '\F26E';                 /* bi-check2 */
    font-family: 'bootstrap-icons';
    position: absolute; left: 0; top: 0;
    color: var(--cat-2);
    font-size: .95rem;
}

/* ------------------------------------------------------------ products --- */
.lp-product {
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 18px;
    padding: 1.75rem;
    height: 100%;
    display: flex; flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease;
}
.lp-product:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-4px); }
.lp-product::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: var(--lp-accent, var(--brand-primary));
}
.lp-product-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}
.lp-product h5 { font-weight: 700; margin-bottom: .15rem; }
.lp-product-tagline { color: #64748b; font-size: .85rem; margin-bottom: .85rem; }
.lp-product-foot { margin-top: auto; padding-top: 1.15rem; }
.lp-soon {
    display: inline-flex; align-items: center; gap: .4rem;
    background: #f1f5f9; color: #64748b;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    padding: .6rem 1rem;
    font-size: .85rem; font-weight: 600;
}

/* ---------------------------------------------------------------- steps --- */
.lp-step { position: relative; padding-left: 3.25rem; }
.lp-step-num {
    position: absolute; left: 0; top: 0;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--brand-primary);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700;
}

/* ----------------------------------------------------------------- misc --- */
.lp-stat { text-align: center; }
.lp-stat-num { font-size: 2rem; font-weight: 800; color: var(--brand-primary); line-height: 1.1; }
.lp-stat-label { font-size: .82rem; color: #64748b; }

.lp-cta-band {
    background: linear-gradient(135deg, var(--brand-primary-dark), var(--brand-primary));
    color: #fff;
    border-radius: 20px;
    padding: 3rem 2rem;
    text-align: center;
}

.lp-accordion .accordion-button { font-weight: 600; }
.lp-accordion .accordion-button:not(.collapsed) {
    background: var(--cat-7-soft);
    color: var(--cat-7);
    box-shadow: none;
}
.lp-accordion .accordion-item { border-radius: 12px !important; margin-bottom: .6rem; overflow: hidden; }

.lp-contact-item {
    display: flex; gap: .9rem; align-items: flex-start;
    padding: 1rem 0;
    border-bottom: 1px solid #eef2f7;
}
.lp-contact-item:last-child { border-bottom: 0; }

/* --------------------------------------------------------------- footer --- */
.lp-foot { background: #0f172a; color: #94a3b8; }
.lp-foot a { color: #cbd5e1; text-decoration: none; }
.lp-foot a:hover { color: #fff; }
.lp-foot h6 { color: #fff; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }

@media (max-width: 767.98px) {
    .lp-hero { padding: 3.5rem 0 4.5rem; }
    .lp-section { padding: 3rem 0; }
}