.pt-method-ecosystem { padding: 90px 24px; border-bottom: 1px solid var(--pt-line); background: linear-gradient(180deg, #0b0f18, #05070c); }
.pt-method-ecosystem__steps { width: 100%; max-width: var(--pt-max); margin: 40px auto; display: flex; flex-wrap: nowrap; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 24px 12px 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-x; }
.pt-method-ecosystem__steps::-webkit-scrollbar { display: none; }
.pt-method-ecosystem__step { flex: 0 0 clamp(260px, 74vw, 340px); min-height: 178px; text-align: center; border: 1px solid var(--pt-red); border-radius: 3px; padding: 22px 18px; scroll-snap-align: start; }
.pt-method-ecosystem__step span { display: block; width: 54px; height: 54px; border: 1px solid var(--pt-red-2); border-radius: 50%; margin: 0 auto 12px; background: radial-gradient(circle, var(--pt-red), transparent 55%); }
.pt-method-ecosystem__step p { color: var(--pt-muted); font-size: .9rem; line-height: 1.5; }
.pt-method-ecosystem__tiles { width: 100%; max-width: var(--pt-max); margin: 0 auto; display: flex; flex-wrap: nowrap; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 24px 12px 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-x; }
.pt-method-ecosystem__tiles::-webkit-scrollbar { display: none; }
.pt-ecosystem-tile { flex: 0 0 clamp(260px, 74vw, 340px); min-height: 150px; border: 1px solid var(--pt-line); border-radius: 3px; padding: 18px; background: rgba(255,255,255,.035); scroll-snap-align: start; }
.pt-ecosystem-tile strong { font-family: var(--pt-serif); font-size: 1.25rem; }
.pt-ecosystem-tile p { color: var(--pt-muted); font-size: .9rem; line-height: 1.5; }
@media (max-width: 1180px) {
  .pt-method-ecosystem__steps,
  .pt-method-ecosystem__tiles {
    grid-template-columns: 1fr 1fr;
  }

  .pt-method-ecosystem__tiles {
    width: 100%;
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 24px 12px 0;
    scrollbar-width: none;
  }

  .pt-method-ecosystem__tiles::-webkit-scrollbar {
    display: none;
  }

  .pt-ecosystem-tile {
    flex: 0 0 clamp(260px, 74vw, 340px);
    scroll-snap-align: start;
  }

  .pt-method-ecosystem__steps {
    width: 100%;
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 36px auto;
    padding: 0 24px 12px 0;
    scrollbar-width: none;
  }

  .pt-method-ecosystem__steps::-webkit-scrollbar {
    display: none;
  }

  .pt-method-ecosystem__step {
    flex: 0 0 clamp(260px, 74vw, 340px);
    min-height: 178px;
    scroll-snap-align: start;
    border: 1px solid var(--pt-red);
    border-radius: 3px;
    padding: 22px 18px;
  }
}
@media (max-width: 560px) {
  .pt-method-ecosystem__steps {
    width: 100%;
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 36px auto;
    padding: 0 24px 12px 0;
    scrollbar-width: none;
  }

  .pt-method-ecosystem__steps::-webkit-scrollbar {
    display: none;
  }

  .pt-method-ecosystem__step {
    flex: 0 0 clamp(260px, 74vw, 340px);
    min-height: 178px;
    scroll-snap-align: start;
    border: 1px solid var(--pt-red);
    border-radius: 3px;
    padding: 22px 18px;
  }

  .pt-method-ecosystem__tiles {
    width: 100%;
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 24px 12px 0;
    scrollbar-width: none;
  }

  .pt-method-ecosystem__tiles::-webkit-scrollbar {
    display: none;
  }

  .pt-ecosystem-tile {
    flex: 0 0 clamp(260px, 74vw, 340px);
    scroll-snap-align: start;
  }
}