/* Gift landings: override per-page negative margins — clean responsive layout */

html:has(.u-section-1),
html:has(.u-section-1) body {
  overflow-x: clip;
}

.u-section-1 .u-sheet-1::after,
.u-section-3 .u-sheet-1::after,
.u-section-7 .u-sheet-1::after {
  display: none !important;
  content: none !important;
}

/* ----- Hero ----- */
.u-section-1 {
  padding: 32px 0 48px !important;
}

.u-section-1 .u-sheet-1 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) min(228px, 34vw) !important;
  grid-template-areas:
    "heroTitle heroVideo"
    "heroSubtitle heroVideo"
    "heroCta heroVideo" !important;
  column-gap: 36px !important;
  row-gap: 16px !important;
  align-items: start !important;
  min-height: unset !important;
  width: 100% !important;
  max-width: min(1140px, 100%) !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
}

.u-section-1 .u-sheet-1 > * {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.u-section-1 .u-video-1 {
  grid-area: heroVideo !important;
  width: 100% !important;
  max-width: 228px !important;
  height: 398px !important;
  margin: 0 !important;
  justify-self: end !important;
  align-self: center !important;
  box-shadow: 0 0 22px rgba(128, 128, 128, 0.45) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.u-section-1 .u-text-1 {
  grid-area: heroTitle !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  font-size: clamp(1.5rem, 3.2vw, 3rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  hyphens: auto !important;
}

.u-section-1 .u-text-2 {
  grid-area: heroSubtitle !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: min(52ch, 100%) !important;
  font-size: clamp(0.875rem, 1.4vw, 1rem) !important;
  line-height: 1.55 !important;
  color: rgba(255, 255, 255, 0.78) !important;
  text-align: left !important;
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
}

.u-section-1 .u-btn-1,
.u-section-1 a.btn--wide {
  grid-area: heroCta !important;
  margin: 12px 0 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-self: start !important;
  align-self: start !important;
  width: auto !important;
  max-width: 100% !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
}

/* ----- Reactions / viral videos ----- */
.u-section-3 {
  padding: 48px 0 !important;
}

.u-section-3 .u-sheet-1 {
  display: grid !important;
  width: 100% !important;
  max-width: min(1140px, 100%) !important;
  box-sizing: border-box !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-areas:
    "viralTitle viralTitle"
    "viralV1 viralV2"
    "viralCopy viralCopy"
    "viralV3 viralV4"
    "viralCta viralCta" !important;
  gap: 20px 28px !important;
  align-items: center !important;
  justify-items: center !important;
  min-height: unset !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

.u-section-3 .u-sheet-1 > * {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.u-section-3 .u-text-1 {
  grid-area: viralTitle !important;
  margin: 0 0 4px !important;
  width: auto !important;
  font-size: clamp(1.5rem, 3vw, 2.5rem) !important;
  font-weight: 700 !important;
  text-align: center !important;
}

.u-section-3 .u-video-1 { grid-area: viralV1 !important; margin: 0 !important; }
.u-section-3 .u-video-2 { grid-area: viralV2 !important; margin: 0 !important; }
.u-section-3 .u-text-2 {
  grid-area: viralCopy !important;
  margin: 8px 0 !important;
  width: auto !important;
  max-width: 680px !important;
  font-size: clamp(0.9rem, 1.8vw, 1.125rem) !important;
  line-height: 1.6 !important;
  text-align: center !important;
  justify-self: center !important;
}
.u-section-3 .u-video-3 { grid-area: viralV3 !important; margin: 0 !important; }
.u-section-3 .u-video-4 { grid-area: viralV4 !important; margin: 0 !important; }

.u-section-3 .u-video-1,
.u-section-3 .u-video-2,
.u-section-3 .u-video-3,
.u-section-3 .u-video-4 {
  width: 100% !important;
  max-width: 200px !important;
  height: 355px !important;
}

.u-section-3 .u-btn-1,
.u-section-3 a.btn--wide,
.u-section-3 a.btn--primary.btn--neon {
  grid-area: viralCta !important;
  margin: 12px auto 0 !important;
  width: auto !important;
  max-width: 100% !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
}

/* ----- Bottom CTA block ----- */
.u-section-7 {
  padding: 48px 0 !important;
}

.u-section-7 .u-sheet-1 {
  display: grid !important;
  width: 100% !important;
  max-width: min(1140px, 100%) !important;
  box-sizing: border-box !important;
  grid-template-columns: minmax(0, 1fr) min(300px, 36vw) !important;
  grid-template-areas:
    "ctaTitle ctaImage"
    "ctaBody ctaImage" !important;
  gap: 20px 40px !important;
  align-items: center !important;
  min-height: unset !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

.u-section-7 .u-sheet-1 > * {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.u-section-7 .u-text-1 {
  grid-area: ctaTitle !important;
  margin: 0 !important;
  width: auto !important;
  font-size: clamp(1.35rem, 2.5vw, 1.875rem) !important;
  font-weight: 700 !important;
  text-align: left !important;
}

.u-section-7 .u-text-2 {
  grid-area: ctaBody !important;
  margin: 0 !important;
  width: auto !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.78) !important;
}

.u-section-7 .u-image-1 {
  grid-area: ctaImage !important;
  margin: 0 !important;
  justify-self: center !important;
  width: 100% !important;
  max-width: 280px !important;
  height: auto !important;
  border-radius: 38px !important;
}

/* ----- Tablet / mobile ----- */
@media (max-width: 991px) {
  .u-section-1 .u-sheet-1 {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "heroTitle"
      "heroSubtitle"
      "heroVideo"
      "heroCta" !important;
    row-gap: 20px !important;
  }

  .u-section-1 .u-text-1,
  .u-section-1 .u-text-2 {
    text-align: center !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .u-section-1 .u-video-1 {
    justify-self: center !important;
    height: min(380px, 62vw) !important;
    max-width: 215px !important;
  }

  .u-section-1 .u-btn-1,
  .u-section-1 a.btn--wide {
    justify-self: center !important;
    margin: 8px auto 0 !important;
  }

  .u-section-3 .u-btn-1,
  .u-section-3 a.btn--wide,
  .u-section-3 a.btn--primary.btn--neon {
    margin: 8px auto 0 !important;
  }

  .u-section-3 .u-sheet-1 {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "viralTitle"
      "viralV1"
      "viralV2"
      "viralCopy"
      "viralV3"
      "viralV4"
      "viralCta" !important;
    gap: 18px !important;
  }

  .u-section-7 .u-sheet-1 {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "ctaTitle"
      "ctaImage"
      "ctaBody" !important;
    text-align: center !important;
  }

  .u-section-7 .u-text-1 {
    text-align: center !important;
  }
}

/* Match original nicepage mobile typography (per-page Gift-*.css @575px) */
@media (max-width: 575px) {
  .u-section-1 .u-sheet-1,
  .u-section-3 .u-sheet-1,
  .u-section-7 .u-sheet-1 {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .u-section-1 .u-text-1 {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
  }

  .u-section-1 .u-text-2 {
    font-size: 0.75rem !important;
    line-height: 1.5 !important;
    max-width: 100% !important;
  }

  .u-section-1 .u-video-1 {
    max-width: 200px !important;
    height: min(340px, 88vw) !important;
  }

  .u-section-3 .u-text-1 {
    font-size: 1.5rem !important;
    max-width: 280px !important;
  }

  .u-section-3 .u-text-2 {
    font-size: 0.875rem !important;
    max-width: 340px !important;
  }

  .u-section-7 .u-text-1 {
    font-size: 1.5rem !important;
    max-width: 340px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .u-section-7 .u-text-2 {
    font-size: 0.875rem !important;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  .u-section-1 .u-text-1 {
    font-size: 2.25rem !important;
  }

  .u-section-1 .u-text-2 {
    font-size: 0.875rem !important;
    max-width: 360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}