/* Overrides to make hero side images push toward edges as width shrinks */

/* Base: keep original look but ensure responsiveness and no filters */
.section-1 .decoration-1,
.section-1 .decoration-2 {
  pointer-events: none;
  filter: none;
  opacity: 1;
  z-index: 1;
  width: clamp(160px, 14vw, 260px);
}

/* Push closer to the screen edges to avoid covering hero text */
.section-1 .decoration-1 {
  left: clamp(8px, 1.5vw, 32px);
}

.section-1 .decoration-2 {
  right: clamp(8px, 1.5vw, 32px);
}

/* Tablet tuning: keep them a bit tighter but still away from text */
@media (max-width: 1200px) {
  .section-1 .decoration-1,
  .section-1 .decoration-2 {
    width: clamp(160px, 24vw, 260px);
  }
}

/* Mobile: we keep them hidden per your existing rules; no change needed here */

/* Section 2: normalize vertical spacing between heading and sticky card stack */
.section-2 .section-2-heading {
  /* Counteract the negative margin-top on .section-card so actual visual gap matches other sections */
  margin-bottom: 128px;
}

@media (max-width: 768px) {
  .section-2 .section-2-heading {
    margin-bottom: 87px;
  }
}

/* Section 2: reduce top spacing and tighten gap between heading and cards */
.section-2 {
  padding-top: 72px;
  /* keep 72px from top as requested */
  gap: 0;
  /* no space between heading and cards */
}

/* Edge-aware placement: as gutter shrinks, push images outward so they never overlap text */
@media (min-width: 1200px) {
  /* Desktop gutter scales with viewport */
  .section-1 {
    --hero-gutter: clamp(24px, 6vw, 120px);
  }

  .section-1 .section-inner {
    padding-left: var(--hero-gutter);
    padding-right: var(--hero-gutter);
  }

  /* Size and place images; offset tied to gutter so smaller gutter => closer to edge */
  .section-1 .decoration-1,
  .section-1 .decoration-2 {
    width: clamp(200px, 14vw, 320px);
    height: auto;
  }

  .section-1 .decoration-1 {
    left: clamp(8px, calc(var(--hero-gutter) * 0.6), 96px);
    top: 18%;
  }

  .section-1 .decoration-2 {
    right: clamp(8px, calc(var(--hero-gutter) * 0.6), 96px);
    top: 18%;
  }
}

/* Tablet: maintain clear text area; push images out as gutter reduces */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .section-1 {
    --hero-gutter: clamp(16px, 5vw, 80px);
  }

  .section-1 .section-inner {
    padding-left: var(--hero-gutter);
    padding-right: var(--hero-gutter);
  }

  .section-1 .decoration-1,
  .section-1 .decoration-2 {
    width: clamp(160px, 18vw, 260px);
    height: auto;
  }

  .section-1 .decoration-1 {
    left: clamp(6px, calc(var(--hero-gutter) * 0.6), 72px);
    top: 14%;
  }

  .section-1 .decoration-2 {
    right: clamp(6px, calc(var(--hero-gutter) * 0.6), 72px);
    top: 14%;
  }
}

/* Hide hero side images on tablets as well */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .section-1 .decoration-1,
  .section-1 .decoration-2 {
    display: none !important;
  }
}

/* Tablet tuning for Section 4 (How it Works) */
@media (min-width: 768px) and (max-width: 1199.98px) {
  /* Make both columns equal height by stretching flex items */
  .section-4 .how-it-work {
    max-height: none !important;
    align-items: stretch;
    gap: 24px;
    flex-direction: row-reverse !important;
    justify-content: space-between;
  }

  /* Left (accordions) and right (image) column widths */
  .section-4 .section-5-inner-1 {
    display: flex;
    width: 52% !important;
    max-width: none;
    margin: 0;
  }

  .section-4 .section-5-inner-2 {
    width: 46% !important;
    max-width: none;
  }

  /* Ensure the image fills the column height exactly */
  .section-4 #faq-image {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    object-fit: contain;
    border-radius: 16px;
    background: transparent;
  }

  .section-4 .section-5-inner-2 details {
    padding: 18px;
  }

  .section-4 .section-5-inner-2 details summary .faq-question {
    font-size: 19px;
    white-space: normal;
  }
}

/* Just in case: force row-reverse for md+ to override any earlier mobile column rule */
@media (min-width: 768px) {
  .section-4 .how-it-work {
    flex-direction: row-reverse !important;
  }
}

/* Tablet: add horizontal padding so sections don't touch screen edges */
@media (min-width: 768px) and (max-width: 1199.98px) {
  :root {
    --tablet-section-x: clamp(16px, 4vw, 48px);
  }

  /* Apply to all primary sections */
  .section-2,
  .section-3,
  .section-4,
  .section-5,
  .section-6 {
    padding-left: var(--tablet-section-x) !important;
    padding-right: var(--tablet-section-x) !important;
  }

  /* Keep inner layouts unchanged; only the outer sections get breathing room */
  .section-4 .how-it-work,
  .section-4 .section-4-inner-title {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Tablet fix: Section 6 heading and image should not overlap and should size nicely */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .section-6 {
    align-items: center;
    gap: 24px;
  }

  /* Let the left panel grow by content; remove fixed height and clipping */
  .section-6 .section-6-inner {
    height: auto !important;
    overflow: visible !important;
    max-width: none;
    flex: 1 1 56% !important;
  }

  .section-6 .section-6-heading .heading-title {
    max-width: none !important;
  }

  /* Size the right illustration column predictably */
  .section-6 .section-inner-2-img {
    flex: 1 1 40% !important;
    min-width: 320px;
    display: flex;
    justify-content: center;
  }

  .section-6 .section-inner-2-img img {
    width: 100%;
    max-width: 520px;
    height: auto;
  }

  /* Tame floating background badges so they don't intrude into text */
  .section-6 .influencers-floting-icon-2 {
    top: -6%;
    right: 0;
    width: 200px;
    height: 200px;
  }

  .section-6 .influencers-floting-icon-1 {
    bottom: -10%;
    right: 0;
    width: 200px;
    height: 200px;
  }
}