/* Home: one centered landing-page rail from the joy section through the footer. */
.index-ten {
  --home-rail-gutter: 0px;
  --home-rail-width: 1200px;
  --home-content-gutter: 56px;
  --home-content-width: 1120px;
  --home-section-space: clamp(84px, 7vw, 96px);
  --home-layout-gap: clamp(38px, 4vw, 48px);
}

/* A consistent, responsive vertical rhythm for the complete homepage. */
.index-ten .section:not(.outcome-section),
.index-ten .value-strip {
  padding-top: var(--home-section-space);
  padding-bottom: var(--home-section-space);
}

.index-ten .customer-proof {
  padding-top: clamp(52px, 5vw, 60px);
  padding-bottom: clamp(56px, 5.5vw, 66px);
}

.index-ten .problem-layout,
.index-ten .collab-grid,
.index-ten .solution-grid,
.index-ten .buddy-grid,
.index-ten .steps-grid,
.index-ten .security-grid {
  margin-top: var(--home-layout-gap);
}

.index-ten .os-scene {
  margin-top: clamp(46px, 5vw, 56px);
}

.index-ten .value-strip h2 {
  margin-bottom: clamp(30px, 3vw, 36px);
}

.index-ten .section-actions {
  margin-top: clamp(32px, 3.5vw, 40px);
}

.index-ten .faq-grid {
  margin-top: clamp(32px, 3.5vw, 40px);
}

.index-ten .outcome-section {
  padding-top: clamp(72px, 7vw, 96px);
  padding-bottom: clamp(24px, 3vw, 36px);
}

.index-ten .home-lower-rail {
  width: min(calc(100% - var(--home-rail-gutter)), var(--home-rail-width));
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  box-sizing: border-box;
}

.index-ten .home-lower-rail {
  background: transparent;
}

.index-ten .home-lower-rail > .roi-experience,
.index-ten .home-lower-rail > .pricing-v2-home,
.index-ten .home-lower-rail > #fragen,
.index-ten .home-lower-rail > #abschluss {
  width: 100%;
  max-width: none;
  margin: 0;
}

.index-ten .roi-experience {
  padding: 0;
  scroll-margin-top: 88px;
  background: #f5f6f8;
}

.index-ten .roi-intro {
  padding: clamp(28px, 3.5vw, 42px) 0 10px;
  background: transparent;
  text-align: center;
}

.index-ten .roi-intro .wrap,
.index-ten .roi-embed-section,
.index-ten .pricing-v2-home .pricing-v2-wrap,
.index-ten #fragen > .wrap,
.index-ten #abschluss > .wrap {
  width: min(calc(100% - var(--home-content-gutter)), var(--home-content-width));
  max-width: var(--home-content-width);
  margin-right: auto;
  margin-left: auto;
}

.index-ten .roi-intro .eyebrow {
  display: flex;
  width: max-content;
  margin-right: 0;
  margin-left: 0;
  text-align: left;
}

.index-ten .roi-intro h2,
.index-ten .roi-intro .section-intro {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.index-ten .roi-embed-section {
  overflow: hidden;
  border: 0;
  background: #f5f6f8;
}

.index-ten .roi-frame {
  display: block;
  width: 100%;
  min-height: 600px;
  border: 0;
  background: transparent;
}

.index-ten .pricing-v2-home {
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, #fffaf2 0%, #fff6e8 100%);
  padding-top: 0;
  box-shadow: none;
}

.index-ten #fragen {
  background:
    radial-gradient(circle at 18% 0%, rgba(242, 146, 3, .16), transparent 30%),
    #263b49;
  color: #fff;
  padding: clamp(64px, 6vw, 80px) 0;
}

.index-ten #fragen > .wrap > h2 {
  color: #fff;
}

.index-ten #fragen > .wrap > .section-intro {
  color: rgba(255, 255, 255, .76);
}

.index-ten #fragen .faq-item {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .07);
  color: #fff;
}

.index-ten #fragen .faq-item summary {
  color: #fff;
}

.index-ten #fragen .faq-item p {
  color: rgba(255, 255, 255, .76);
}

.index-ten #abschluss {
  background: #fff;
  padding: clamp(58px, 5.5vw, 74px) 0;
}

.index-ten > footer {
  width: 100%;
  max-width: none;
  margin: 0;
  background: #f8f0e5;
  padding: 48px clamp(20px, 3vw, 42px) 20px;
}

.index-ten > footer .footer-contents {
  width: 100%;
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  color: #111418;
  gap: 22px;
}

@media (max-width: 760px) {
  .index-ten {
    --home-rail-gutter: 0px;
    --home-content-gutter: 28px;
    --home-section-space: 68px;
    --home-layout-gap: 32px;
  }

  .index-ten .customer-proof {
    padding-top: 44px;
    padding-bottom: 50px;
  }

  .index-ten .os-scene {
    margin-top: 36px;
  }

  .index-ten .section-actions,
  .index-ten .faq-grid {
    margin-top: 30px;
  }

  .index-ten .outcome-section {
    padding-top: 72px;
    padding-bottom: 24px;
  }

  .index-ten .roi-experience {
    margin-right: auto;
    margin-left: auto;
  }

  .index-ten .roi-intro {
    padding: 28px 0 8px;
  }

  .index-ten .roi-embed-section {
    margin-bottom: 0;
  }

  .index-ten .pricing-v2-home {
    margin-right: auto;
    margin-left: auto;
    border-radius: 0;
    padding-top: 0;
  }

  .index-ten #fragen {
    padding: 62px 0;
  }

  .index-ten #abschluss {
    padding: 56px 0;
  }

}