/* Landing Pages module (block engine) — styling for lp-* blocks.
   Scoped under .lp-blocks (NOT .landing-page) so it never touches the shared
   header/footer, which are rendered outside .lp-blocks.
   Brand tokens: green #33c97e, dark #282a2d, light #f7f7f8, border #e8e8ed. */

.lp-blocks { color: #282a2d; }
/* Per-block spacing only. NEVER override the bare .container/.section here, or
   reused site elements (e.g. Faq/section) drift from how they look elsewhere. */
.lp-blocks .lp-comparison,
.lp-blocks .lp-problem-solution,
.lp-blocks .lp-stats,
.lp-blocks .lp-cta-band { padding: 56px 0; }

/* ---------- Hero ---------- */
.lp-blocks .lp-hero {
    text-align: center;
    padding: 72px 0 56px;
    background: linear-gradient(180deg, #f7f7f8 0%, #ffffff 100%);
}
/* Hero badge reuses the shared .step pill (from _get-started.scss, in main.css) —
   no bespoke badge style here. Only the hero spacing is set. */
.lp-blocks .lp-hero .lp-hero-badge { margin-bottom: 18px; }
.lp-blocks .lp-hero-title {
    font-size: 2.6rem;
    line-height: 1.15;
    font-weight: 700;
    max-width: 820px;
    margin: 0 auto 18px;
}
.lp-blocks .lp-hero-subtitle {
    font-size: 1.18rem;
    color: #5c5c66;
    max-width: 680px;
    margin: 0 auto 28px;
    line-height: 1.6;
}

/* ---------- Comparison table ---------- */
.lp-blocks .lp-comparison .container { max-width: 880px; }
.lp-blocks .lp-compare-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid #e8e8ed;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(40, 42, 45, .06);
}
.lp-blocks .lp-compare-table th,
.lp-blocks .lp-compare-table td {
    padding: 15px 20px;
    text-align: left;
    border-bottom: 1px solid #eef0f2;
    font-size: 1rem;
}
.lp-blocks .lp-compare-table thead th { font-weight: 700; background: #fafbfc; }
.lp-blocks .lp-compare-table tbody tr:last-child td { border-bottom: 0; }
.lp-blocks .lp-compare-us,
.lp-blocks .lp-compare-them { text-align: center; width: 150px; }
.lp-blocks .lp-compare-us { background: rgba(51, 201, 126, .06); }
.lp-blocks .lp-compare-table thead .lp-compare-us { color: #1f9d5f; }
.lp-blocks .lp-compare-table tbody .lp-compare-us { color: #1f9d5f; font-size: 1.15rem; font-weight: 700; }
.lp-blocks .lp-compare-table tbody .lp-compare-them { color: #b3b3bd; font-size: 1.1rem; }

/* ---------- Problem -> Solution (cards = shared ui/card) ---------- */
.lp-blocks .lp-problem-solution .lp-ps-grid {
    max-width: 940px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

/* ---------- Stats ---------- */
.lp-blocks .lp-stats { background: #f7f7f8; }
.lp-blocks .lp-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
    text-align: center;
}
.lp-blocks .lp-stat { padding: 16px; }
.lp-blocks .lp-stat-value {
    display: block;
    font-size: 2.6rem;
    font-weight: 800;
    color: #33c97e;
    line-height: 1.1;
}
.lp-blocks .lp-stat-label { display: block; color: #5c5c66; margin-top: 8px; line-height: 1.45; }

/* Feature rows reuse the shared ui/feature_row component (.get-started / .step /
   .advantages / .img-wrap from main.css) — no bespoke styling here.
   The block engine renders each feature as its OWN .get-started section, so a
   few LANDING-SCOPED tweaks normalise the stacked spacing into one ladder and
   tighten the (longer-than-a-step) bullets. /jak-zaczac is untouched. */
.lp-blocks .lp-feature-section { padding-top: 0; }
.lp-blocks .lp-feature-section .item { margin-bottom: 72px; }
/* Short feature copy (heading + bullets) beside a tall screenshot looks
   top-heavy with Materialize's float-based, top-aligned .row — centre them. */
.lp-blocks .lp-feature-section .row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.lp-blocks .lp-feature-section:last-of-type .item { margin-bottom: 24px; }
/* No intro <p> above the bullets here, so drop the -20px pull and the 33px
   step line-height that leaves longer bullets looking airy. */
.lp-blocks .lp-feature-section .advantages { margin-top: 0; }
.lp-blocks .lp-feature-section .advantages li { line-height: 1.55; margin-bottom: 8px; }
.lp-blocks .feature-row-link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: #1f9d5f;
    font-weight: 600;
}
.lp-blocks .feature-row-link:hover { color: #178a52; }

/* ---------- CTA band ---------- */
.lp-blocks .lp-cta-band { background: #282a2d; text-align: center; }
.lp-blocks .lp-cta-heading {
    color: #fff;
    font-size: 1.9rem;
    font-weight: 700;
    margin: 0 0 22px;
}

/* ---------- Compare hub (grid of shared ui/card links) ---------- */
.lp-blocks .lp-compare-hub { padding: 8px 0 64px; }
.lp-blocks .lp-compare-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 24px;
}
/* let each ui/card fill its cell (equal-height rows) */
.lp-blocks .lp-compare-grid > li { display: flex; }
.lp-blocks .lp-compare-grid .ui-card { width: 100%; }

/* ---------- FAQ (canonical Faq/section element) ----------
   The native toggle icon is position:absolute at the card's left edge and isn't
   reliably centred vertically — invisible on a white page, but it pokes out and
   hugs the top on a coloured section background. Scoped to the landing FAQ, lay
   the header out as a flex row [icon][question] so the + button is inset and
   vertically centred on ANY background, without touching the site-wide FAQ. */
.lp-blocks .lp-faq .custom-collapse .item { padding: 6px 24px; }
.lp-blocks .lp-faq .custom-collapse .item .collapsible-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    margin: 20px 0;
}
.lp-blocks .lp-faq .custom-collapse .item .collapsible-header::after {
    position: static;
    transform: none;
    order: -1;
    flex: 0 0 32px;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .lp-blocks .lp-hero-title { font-size: 2rem; }
    .lp-blocks .lp-hero-subtitle { font-size: 1.05rem; }
    .lp-blocks .lp-cta-heading { font-size: 1.5rem; }
    .lp-blocks .lp-compare-table th,
    .lp-blocks .lp-compare-table td { padding: 12px 12px; font-size: .92rem; }
    .lp-blocks .lp-compare-us,
    .lp-blocks .lp-compare-them { width: 64px; }
}