.mobile-carousel { display: contents; }
.mobile-card-body { display: contents; }
.mobile-carousel-controls { display: none; }
.mobile-carousel:is(.is-mobile-carousel, .is-desktop-carousel) { display: block; min-width: 0; }
.mobile-carousel:is(.is-mobile-carousel, .is-desktop-carousel) > .mobile-carousel-track {
  position: relative;
  display: flex; align-items: stretch; gap: var(--carousel-gap, 14px);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-padding-inline: 0;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 4px 0 10px;
  border: 0; border-radius: 0; background: transparent;
}
.mobile-carousel-track::-webkit-scrollbar { display: none; }
.mobile-carousel:is(.is-mobile-carousel, .is-desktop-carousel) > .mobile-carousel-track > * {
  flex: 0 0 var(--mobile-card-width, 78%); min-width: 0;
  scroll-snap-align: center;
}
.mobile-carousel:is(.is-mobile-carousel, .is-desktop-carousel) .mobile-card-body {
  display: block; height: 100%;
  transform: scale(var(--carousel-scale, .84)); transform-origin: center top;
  transition: transform .16s ease-out;
}
.mobile-carousel-track:focus-visible { outline: 2px solid #537a60; outline-offset: 4px; }
.mobile-carousel:is(.is-mobile-carousel, .is-desktop-carousel) .mobile-carousel-controls {
  display: flex; align-items: center; gap: 10px; margin-top: 8px;
  color: #426650; font-family: 'League Spartan', Arial, sans-serif;
}
.mobile-carousel-hint { margin-right: auto; font-size: 14px; }
.mobile-carousel-count { min-width: 35px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; }
.mobile-carousel-controls button {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px;
  border: 1px solid #537a6059; border-radius: 50%; color: inherit; background: #fff9;
}
.mobile-carousel-controls button:disabled { opacity: .35; cursor: default; }
.mobile-carousel-controls button svg { width: 20px; height: 20px; }
.mobile-carousel-controls button:focus-visible { outline: 2px solid #537a60; outline-offset: 3px; }
@media (max-width: 760px) {
  .mobile-carousel.is-mobile-carousel { --mobile-card-width: 74%; --carousel-gap: 8px; }
  .mobile-carousel-track.concept-grid { margin-top: 0; }
  .mobile-carousel-track .concept-details { padding-top: 20px; }
  .mobile-carousel-track .concept-details h3 { font-size: clamp(22px, 5.5vw, 28px); }
  .mobile-carousel-track .concept-features li { font-size: 13px; }
  .mobile-carousel-track.pa-process-grid > li {
    display: block; padding: 0; border: 0; background: transparent;
  }
  .mobile-carousel-track.pa-process-grid .mobile-card-body {
    padding: 24px;
    border: 1px solid #537a6038; border-radius: 14px;
    background: linear-gradient(120deg, #f7faf7f5, #edf4eff5);
  }
  .mobile-carousel-track .pa-step-marker { margin: 0 0 26px; }
  .mobile-carousel-track .pa-step-copy h3 { font-size: clamp(22px, 5.4vw, 26px); }
  .mobile-carousel-track .pa-step-copy p { font-size: 16px; line-height: 1.5; }
  .mobile-carousel-track .dc-benefit { padding: 0; border: 0; background: transparent; box-shadow: none; }
  .mobile-carousel-track .dc-benefit .mobile-card-body {
    padding: 24px; border: 1px solid #537a6038; border-radius: 14px;
    background: linear-gradient(135deg, #f6f9f5f5, #eff5f1f5);
  }
  .mobile-carousel-track .dc-benefit h3 { font-size: 24px; }
  .mobile-carousel-track .dc-benefit p { font-size: 16px; line-height: 1.5; }
}
@media (min-width: 761px) {
  .mobile-carousel.is-desktop-carousel > .concept-grid {
    --mobile-card-width: 60%;
    --carousel-gap: clamp(20px, 2.5vw, 36px);
    margin-top: 0;
  }
  .mobile-carousel.is-desktop-carousel .mobile-carousel-controls { margin-top: 14px; }
}
@media (hover: hover) {
  .mobile-carousel-controls button:not(:disabled):hover { background: #edf5ef; border-color: #537a6080; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-carousel:is(.is-mobile-carousel, .is-desktop-carousel) .mobile-card-body { transition: none; }
}
