/* ============================================================
   landing-page.css — Components for landing & conversion pages
   (Phase 12: 15 landing pages)

   Loaded alongside design-system.css.
   Pages may also load product-page.css, solution-page.css,
   or pricing-page.css for shared components.

   Existing components NOT duplicated here:
   - ffo-split / ffo-split--reverse    (design-system.css)
   - ffo-grid / ffo-card               (design-system.css)
   - ffo-checklist                     (design-system.css)
   - ffo-video-wrapper / ffo-play-btn  (design-system.css)
   - ffo-faq                           (design-system.css)
   - ffo-testimonial                   (design-system.css)
   - ffo-btn variants                  (design-system.css)
   - ffo-section / ffo-container       (design-system.css)
   - ffo-product-hero                  (product-page.css)
   - ffo-edu-hero                      (educational-page.css)
   - ffo-steps / ffo-step              (product-page.css)
   - ffo-numbered-steps                (product-page.css)
   - ffo-stats-row / ffo-stat          (product-page.css)
   - ffo-cta-box                       (product-page.css)
   - ffo-logo-showcase                 (product-page.css)
   - ffo-pathways / ffo-pathway        (product-page.css)
   - ffo-tax-comparison / ffo-tax-table(solution-page.css)
   - ffo-benefit-card                  (solution-page.css)
   - ffo-cross-sell                    (solution-page.css)
   - ffo-callout                       (solution-page.css)
   - ffo-pricing-card                  (pricing-page.css)
   - ffo-pricing-table                 (pricing-page.css)
   ============================================================ */


/* ================================================================
   1. Landing Hero
   Centered or split hero optimized for conversion landing pages.
   Larger subtitle, prominent CTA area, optional trust badges.
   ================================================================ */

.ffo-landing-hero {
  padding-top: 200px;
  padding-bottom: 80px;
  position: relative;
  z-index: 0;
}

.ffo-landing-hero .ffo-split {
  align-items: center;
}

.ffo-landing-hero__subtitle {
  font-size: 18px;
  font-weight: 500;
  color: var(--ffo-neutral-400);
  line-height: 1.6;
  margin-top: 20px;
  max-width: 560px;
}

.ffo-landing-hero__highlight {
  font-size: 15px;
  font-weight: 600;
  color: var(--ffo-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}

.ffo-landing-hero__cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 32px;
}

.ffo-landing-hero__image {
  border-radius: var(--ffo-radius-lg);
}

/* Centered variant */
.ffo-landing-hero--centered {
  text-align: center;
}

.ffo-landing-hero--centered .ffo-landing-hero__subtitle {
  margin-inline: auto;
}

.ffo-landing-hero--centered .ffo-landing-hero__cta {
  justify-content: center;
}


/* ================================================================
   2. Lead Gen / Download Section
   Form-beside-content layout for whitepaper downloads,
   guide downloads, and lead capture pages.
   ================================================================ */

.ffo-landing-lead {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.ffo-landing-lead__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ffo-landing-lead__benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ffo-landing-lead__benefits li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ffo-dark);
}

.ffo-landing-lead__benefits li img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.ffo-landing-lead__form {
  background: var(--ffo-white);
  border: 2px solid var(--ffo-primary-border-48);
  border-radius: var(--ffo-radius-md);
  padding: 40px 36px;
}

.ffo-landing-lead__form h3 {
  margin-bottom: 24px;
  text-align: center;
}

.ffo-landing-lead__image {
  border-radius: var(--ffo-radius-lg);
  width: 100%;
}


/* ================================================================
   3. Booking Embed Container
   Wrapper for HubSpot meetings embed iframes.
   Provides consistent sizing, background, and spacing.
   ================================================================ */

.ffo-landing-booking {
  max-width: 800px;
  margin-inline: auto;
  text-align: center;
}

.ffo-landing-booking__intro {
  font-size: 18px;
  font-weight: 500;
  color: var(--ffo-neutral-400);
  line-height: 1.6;
  margin-top: 16px;
  margin-bottom: 40px;
  max-width: 600px;
  margin-inline: auto;
}

.ffo-landing-booking__embed {
  background: var(--ffo-white);
  border: 1px solid var(--ffo-neutral-200);
  border-radius: var(--ffo-radius-md);
  padding: 24px;
  min-height: 600px;
  overflow: hidden;
}

.ffo-landing-booking__embed iframe {
  width: 100%;
  min-height: 560px;
  border: none;
}


/* ================================================================
   4. Disclaimer / Footnotes
   Legal disclaimers and footnotes at page bottom.
   Used on broker pages and regulatory pages.
   ================================================================ */

.ffo-landing-disclaimer {
  font-size: 13px;
  font-weight: 400;
  color: var(--ffo-neutral-400);
  line-height: 1.7;
  max-width: 900px;
  margin-inline: auto;
}

.ffo-landing-disclaimer p {
  margin-bottom: 12px;
}

.ffo-landing-disclaimer p:last-child {
  margin-bottom: 0;
}

.ffo-landing-disclaimer a {
  color: var(--ffo-primary);
  text-decoration: underline;
}

.ffo-landing-disclaimer a:hover {
  color: var(--ffo-dark);
}

.ffo-landing-disclaimer--bordered {
  border-top: 1px solid var(--ffo-neutral-200);
  padding-top: 32px;
  margin-top: 48px;
}


/* ================================================================
   5. Platform Showcase
   Side-by-side or tabbed display of platform screenshots
   (browser, desktop app, mobile). Used on broker landing pages.
   ================================================================ */

.ffo-landing-platforms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.ffo-landing-platform {
  text-align: center;
}

.ffo-landing-platform__image {
  width: 100%;
  border-radius: var(--ffo-radius-md);
  border: 1px solid var(--ffo-neutral-200);
  margin-bottom: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ffo-landing-platform__image:hover {
  transform: translateY(-4px);
  box-shadow: var(--ffo-shadow-hover);
}

.ffo-landing-platform__title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

.ffo-landing-platform__desc {
  font-size: 15px;
  font-weight: 500;
  color: var(--ffo-neutral-400);
  line-height: 1.5;
}


/* ================================================================
   6. Process Flow Diagram
   Vertical flow with entity blocks connected by arrows.
   Used for WEPA process (4 entities with descriptions).
   ================================================================ */

.ffo-landing-flow {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 800px;
  margin-inline: auto;
}

.ffo-landing-flow__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  background: var(--ffo-white);
  border: 1.5px solid var(--ffo-primary-border-48);
  border-radius: var(--ffo-radius-md);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ffo-landing-flow__item:hover {
  border-color: var(--ffo-primary);
  box-shadow: var(--ffo-shadow-card);
}

.ffo-landing-flow__icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: var(--ffo-primary-light-12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ffo-landing-flow__icon img {
  width: 22px;
  height: 22px;
}

.ffo-landing-flow__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ffo-dark);
  margin-bottom: 4px;
}

.ffo-landing-flow__desc {
  font-size: 14px;
  font-weight: 500;
  color: var(--ffo-neutral-400);
  line-height: 1.5;
}


/* ================================================================
   7. Dual-Path Steps
   Two parallel onboarding tracks shown side by side.
   E.g. "gegründet mit FELSFO" vs "selbst gegründet".
   ================================================================ */

.ffo-landing-dual-paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.ffo-landing-dual-path {
  background: var(--ffo-white);
  border: 2px solid var(--ffo-primary-border-48);
  border-radius: var(--ffo-radius-md);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
}

.ffo-landing-dual-path__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--ffo-neutral-200);
}

.ffo-landing-dual-path__title {
  font-size: 18px;
  font-weight: 700;
}

.ffo-landing-dual-path__steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex-grow: 1;
}

.ffo-landing-dual-path__step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.ffo-landing-dual-path__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  background: var(--ffo-primary-light-12);
  color: var(--ffo-primary);
  font-size: 16px;
  font-weight: 700;
}

.ffo-landing-dual-path__step-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  opacity: 0.7;
}

.ffo-landing-dual-path__step-text {
  font-size: 15px;
  font-weight: 500;
  color: var(--ffo-neutral-400);
  line-height: 1.5;
  padding-top: 6px;
}

.ffo-landing-dual-path__cta {
  margin-top: 28px;
}

.ffo-landing-dual-path__cta .ffo-btn {
  width: 100%;
  justify-content: center;
}


/* ================================================================
   8. Investment Terms / Conditions
   Compact list of fund terms or investment conditions.
   Used on VC/PE landing pages.
   ================================================================ */

.ffo-landing-terms {
  max-width: 800px;
  margin-inline: auto;
}

.ffo-landing-terms__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ffo-landing-terms__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--ffo-neutral-200);
}

.ffo-landing-terms__item:first-child {
  padding-top: 0;
}

.ffo-landing-terms__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ffo-landing-terms__bullet {
  width: 8px;
  height: 8px;
  min-width: 8px;
  border-radius: 50%;
  background: var(--ffo-primary);
  margin-top: 8px;
}

.ffo-landing-terms__text {
  font-size: 16px;
  font-weight: 500;
  color: var(--ffo-dark);
  line-height: 1.6;
}

.ffo-landing-terms__cta {
  margin-top: 32px;
  text-align: center;
}


/* ================================================================
   9. Feature Comparison Table
   Full-width Lite vs Standard (or multi-column) comparison.
   Used on pricing and admin-service pages.
   ================================================================ */

.ffo-landing-compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.ffo-landing-compare thead th {
  background: var(--ffo-dark);
  color: var(--ffo-white);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 16px 24px;
  text-align: left;
  position: sticky;
  top: 0;
  z-index: 2;
}

.ffo-landing-compare thead th:not(:first-child) {
  text-align: center;
  width: 160px;
}

.ffo-landing-compare tbody td {
  padding: 14px 24px;
  border-bottom: 1px solid var(--ffo-neutral-100);
  vertical-align: top;
  color: var(--ffo-dark);
}

.ffo-landing-compare tbody td:not(:first-child) {
  text-align: center;
  font-weight: 500;
}

.ffo-landing-compare tbody tr:last-child td {
  border-bottom: none;
}

/* Category row divider */
.ffo-landing-compare__category td {
  background: var(--ffo-primary-light-12);
  font-weight: 700;
  font-size: 14px;
  color: var(--ffo-primary);
  padding: 12px 24px;
  border-bottom: 1px solid var(--ffo-primary-border-48);
}

/* Highlight included items */
.ffo-landing-compare__included {
  color: var(--ffo-primary);
  font-weight: 600;
}

/* Price row at bottom */
.ffo-landing-compare__price-row td {
  background: var(--ffo-neutral-100);
  font-weight: 700;
  font-size: 18px;
  padding: 20px 24px;
  border-bottom: none;
}

.ffo-landing-compare__price-row td:first-child {
  font-size: 15px;
  font-weight: 600;
}

/* CTA row */
.ffo-landing-compare__cta-row td {
  padding: 24px;
  background: var(--ffo-neutral-100);
  border-bottom: none;
}


/* ================================================================
   10. Trust Bar
   Horizontal row of trust signals (stats, logos, badges).
   Compact single-line format for landing page credibility.
   ================================================================ */

.ffo-landing-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
  padding: 32px 0;
}

.ffo-landing-trust__item {
  text-align: center;
}

.ffo-landing-trust__value {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  line-height: 1;
  color: var(--ffo-primary);
}

.ffo-landing-trust__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ffo-neutral-400);
  margin-top: 6px;
}

/* Dark section variant */
.ffo-section--dark .ffo-landing-trust__value {
  color: var(--ffo-white);
}

.ffo-section--dark .ffo-landing-trust__label {
  color: rgba(255, 255, 255, 0.6);
}


/* ================================================================
   11. Partner Highlight
   Two-column layout with partner logo + description.
   Used for Interactive Brokers partnership on broker pages.
   ================================================================ */

.ffo-landing-partner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px;
  align-items: center;
  padding: 40px;
  background: var(--ffo-white);
  border: 2px solid var(--ffo-primary-border-48);
  border-radius: var(--ffo-radius-md);
}

.ffo-landing-partner__logo {
  width: 120px;
  height: auto;
  object-fit: contain;
}

.ffo-landing-partner__title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

.ffo-landing-partner__desc {
  font-size: 15px;
  font-weight: 500;
  color: var(--ffo-neutral-400);
  line-height: 1.6;
}


/* ================================================================
   12. Annual Tasks / Minimal Effort
   Numbered task cards showing yearly client responsibilities.
   Used on admin-service pages.
   ================================================================ */

.ffo-landing-tasks {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 800px;
  margin-inline: auto;
}

.ffo-landing-task {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 28px 32px;
  background: var(--ffo-white);
  border: 1.5px solid var(--ffo-primary-border-48);
  border-radius: var(--ffo-radius-md);
}

.ffo-landing-task__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: var(--ffo-primary);
  color: var(--ffo-white);
  font-size: 20px;
  font-weight: 700;
}

.ffo-landing-task__title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 6px;
}

.ffo-landing-task__desc {
  font-size: 15px;
  font-weight: 500;
  color: var(--ffo-neutral-400);
  line-height: 1.5;
}

.ffo-landing-task__details {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ffo-landing-task__details li {
  font-size: 14px;
  font-weight: 500;
  color: var(--ffo-neutral-400);
  line-height: 1.4;
  padding-left: 16px;
  position: relative;
}

.ffo-landing-task__details li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ffo-primary-border-48);
}


/* ================================================================
   13. Use Case Cards
   Image-topped cards linking to use-case-specific pages.
   Used on admin-service "best solution for each purpose".
   ================================================================ */

.ffo-landing-use-cases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.ffo-landing-use-case {
  background: var(--ffo-white);
  border: 2px solid var(--ffo-primary-border-48);
  border-radius: var(--ffo-radius-md);
  overflow: hidden;
  text-decoration: none;
  color: var(--ffo-dark);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  display: flex;
  flex-direction: column;
}

.ffo-landing-use-case:hover {
  box-shadow: var(--ffo-shadow-hover);
  transform: translateY(-4px);
}

.ffo-landing-use-case__image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.ffo-landing-use-case__body {
  padding: 28px 24px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.ffo-landing-use-case__title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
}

.ffo-landing-use-case__desc {
  font-size: 15px;
  font-weight: 500;
  color: var(--ffo-neutral-400);
  line-height: 1.5;
  flex-grow: 1;
}

.ffo-landing-use-case__link {
  font-size: 15px;
  font-weight: 600;
  color: var(--ffo-primary);
  margin-top: 16px;
  text-decoration: none;
}

.ffo-landing-use-case:hover .ffo-landing-use-case__link {
  text-decoration: underline;
}


/* ================================================================
   14. Advantage List
   Bold heading + text pairs in a vertical list.
   Used for "Vorteile" / advantages on trading/aktien pages.
   ================================================================ */

.ffo-landing-advantages {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ffo-landing-advantage {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--ffo-neutral-200);
}

.ffo-landing-advantage:first-child {
  padding-top: 0;
}

.ffo-landing-advantage:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ffo-landing-advantage__icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  background: var(--ffo-primary-light-12);
  border-radius: var(--ffo-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ffo-landing-advantage__icon img {
  width: 24px;
  height: 24px;
}

.ffo-landing-advantage__title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 4px;
}

.ffo-landing-advantage__desc {
  font-size: 15px;
  font-weight: 500;
  color: var(--ffo-neutral-400);
  line-height: 1.5;
}


/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 991px) {
  .ffo-landing-lead {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .ffo-landing-dual-paths {
    grid-template-columns: 1fr;
  }

  .ffo-landing-platforms {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-inline: auto;
  }

  .ffo-landing-flow {
    grid-template-columns: 1fr;
  }

  .ffo-landing-use-cases {
    grid-template-columns: repeat(2, 1fr);
  }

  .ffo-landing-trust {
    gap: 32px;
  }

  .ffo-landing-partner {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 32px;
  }

  .ffo-landing-partner__logo {
    margin-inline: auto;
  }

  .ffo-landing-compare thead th:not(:first-child) {
    width: 120px;
  }
}

@media (max-width: 767px) {
  .ffo-landing-hero {
    padding-top: 160px;
    padding-bottom: 56px;
  }

  .ffo-landing-lead__form {
    padding: 28px 24px;
  }

  .ffo-landing-booking__embed {
    padding: 16px;
    min-height: 500px;
  }

  .ffo-landing-use-cases {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-inline: auto;
  }

  .ffo-landing-trust {
    gap: 24px;
  }

  .ffo-landing-task {
    flex-direction: column;
    padding: 24px;
  }

  .ffo-landing-partner {
    padding: 24px;
  }

  .ffo-landing-compare {
    font-size: 13px;
  }

  .ffo-landing-compare thead th,
  .ffo-landing-compare tbody td {
    padding: 10px 12px;
  }

  .ffo-landing-compare thead th:not(:first-child) {
    width: 90px;
  }
}