/* ============================================================
   Success Section — WhatsApp screenshots scrapbook + form
   ============================================================ */

.success-section {
  width: 100%;
  background: var(--gt-cream);
  padding: 80px 64px;
  font-family: var(--font-sans);
  direction: rtl;
  position: relative;
  overflow: visible;
}

.success-inner {
  max-width: 1240px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.success-blob--a {
  width: 480px; height: 480px;
  background: var(--gt-pink-soft);
  top: 160px; right: -260px;
  opacity: 0.45;
}
.success-blob--b {
  width: 380px; height: 380px;
  background: var(--gt-pink);
  bottom: 280px; left: -220px;
  opacity: 0.2;
}

.success-head {
  text-align: center;
  max-width: 880px;
  margin: 0 auto 64px;
}
.success-headline {
  font-size: 48px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--gt-ink);
  margin: 0;
  text-wrap: balance;
}
.success-headline em { font-style: normal; color: var(--gt-burgundy); }
.success-subhead {
  font-size: 24px;
  font-weight: 500;
  color: var(--gt-body);
  margin: 18px 0 0;
  text-wrap: pretty;
}

/* Scrapbook grid — desktop: 4 cols, staggered */
.wa-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  row-gap: 56px;
  margin-bottom: 64px;
  align-items: start;
}
.wa-cell {
  transition: transform 320ms var(--ease-warm);
  will-change: transform;
}
.wa-cell:hover { z-index: 5; transform: rotate(0deg) translateY(-6px) !important; }

/* Each cell gets its own height/rotation/offset to feel scrapbook-like */
.wa-cell--1 { height: 520px; transform: rotate(-2.4deg); margin-top: 32px; }
.wa-cell--2 { height: 580px; transform: rotate(1.6deg); margin-top: 0; }
.wa-cell--3 { height: 500px; transform: rotate(-1.0deg); margin-top: 44px; }
.wa-cell--4 { height: 560px; transform: rotate(2.2deg); margin-top: 12px; }
.wa-cell--5 { height: 540px; transform: rotate(1.8deg); margin-top: 24px; }
.wa-cell--6 { height: 500px; transform: rotate(-2.0deg); margin-top: 48px; }
.wa-cell--7 { height: 580px; transform: rotate(1.2deg); margin-top: 0; }
.wa-cell--8 { height: 520px; transform: rotate(-1.6deg); margin-top: 36px; }

.wa-shot {
  width: 100%;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 22px 48px rgba(110, 28, 64, 0.18),
    0 4px 10px rgba(110, 28, 64, 0.08);
  border: 1px solid rgba(255,255,255,0.9);
  background: #e5ddd5;
}
.wa-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.success-closer {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 40px;
}
.success-closer-inner {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 20px 28px;
  border-top: 1px solid var(--gt-line);
  border-bottom: 1px solid var(--gt-line);
}
.success-closer p {
  font-size: 24px;
  font-weight: 600;
  color: var(--gt-burgundy-ink);
  margin: 0;
  line-height: 1.4;
  text-wrap: balance;
}
.success-closer em { font-style: normal; color: var(--gt-burgundy); }

.success-form-wrap {
  max-width: 520px;
  margin: 0 auto;
}

/* Mobile horizontal scroll */
@media (max-width: 768px) {
  .success-section { padding: 48px 0; }
  .success-head { padding: 0 20px; margin-bottom: 24px; }
  .success-headline { font-size: 30px; }
  .success-subhead { font-size: 20px; margin-top: 12px; }

  .wa-grid {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    row-gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 12px 20px 20px;
    margin-bottom: 24px;
    -webkit-overflow-scrolling: touch;
    direction: ltr; /* Force consistent scrollLeft=0 at left across all browsers */
  }
  .wa-cell,
  .wa-cell--1, .wa-cell--2, .wa-cell--3, .wa-cell--4,
  .wa-cell--5, .wa-cell--6, .wa-cell--7, .wa-cell--8 {
    flex: 0 0 auto;
    width: 220px;
    height: 440px;
    margin-top: 0;
    transform: none;
    scroll-snap-align: start;
  }
  .wa-cell:hover { transform: none !important; }

  .scroll-hint {
    text-align: center;
    font-size: 13px;
    color: var(--gt-body);
    opacity: 0.7;
    margin-bottom: 28px;
    padding: 0 20px;
  }

  .success-closer { padding: 0 20px; }
  .success-closer-inner { display: block; padding: 16px; }
  .success-closer p { font-size: 22px; }

  .success-form-wrap { padding: 0 20px; }
}
@media (min-width: 769px) {
  .scroll-hint { display: none; }
}