/* ── PAGE HERO ── */
.payment-hero {
  background: var(--black);
  padding: 10rem 0 5rem;
  position: relative; overflow: hidden;
}
.payment-hero::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: var(--pink);
}
.payment-hero .eyebrow { color: var(--pink); }
.payment-hero h1 { color: var(--white); }
.payment-hero h1 em { font-style: italic; color: var(--pink); }
.payment-hero p { color: rgba(255,255,255,0.5); max-width: 520px; margin: 1rem auto 0; font-size: 0.9rem; line-height: 1.85; }

/* ── TRUST STRIP ── */
.trust-strip {
  background: var(--linen-pale);
  border-bottom: 1px solid var(--linen);
  padding: 1.25rem 2rem;
  display: flex; justify-content: center;
  gap: 3rem; flex-wrap: wrap;
}
.trust-item {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--grey);
}
.trust-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--pink); flex-shrink: 0;
}

/* ── CHERRY WIDGET SECTION ── */
.cherry-section {
  padding: 5rem 0 6rem;
  background: var(--white);
}

/* ── STEPS SECTION ── */
.steps-section {
  background: var(--linen-pale);
  padding: 6rem 0;
  border-top: 1px solid var(--linen);
}
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
.step-card {
  background: var(--white);
  border: 1px solid var(--linen);
  border-top: 3px solid var(--pink);
  padding: 2rem 1.5rem;
}
.step-num {
  font-family: var(--heading);
  font-size: 2.2rem; font-weight: 400;
  color: var(--pink); line-height: 1;
  margin-bottom: 0.75rem;
}
.step-card h5 {
  font-family: var(--body);
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.06em; color: var(--black);
  margin-bottom: 0.5rem;
}
.step-card p { font-size: 0.78rem; color: var(--grey); line-height: 1.7; }

@media (max-width: 860px) { .steps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .steps-grid { grid-template-columns: 1fr; } }

/* ── FAQ ── */
.payment-faq {
  background: var(--white);
  padding: 6rem 0;
}
.faq-item { border-bottom: 1px solid var(--linen); }
.faq-q {
  width: 100%; text-align: left; background: none; border: none;
  cursor: pointer; padding: 1.3rem 2.5rem 1.3rem 0;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--body); font-size: 0.88rem; font-weight: 600;
  color: var(--black); position: relative; transition: color 0.2s;
}
.faq-q:hover { color: var(--pink); }
.faq-icon {
  position: absolute; right: 0; font-size: 1.3rem;
  color: var(--pink); transition: transform 0.25s; flex-shrink: 0;
}
.faq-icon.open { transform: rotate(45deg); }
.faq-a { display: none; padding-bottom: 1.3rem; }

/* ── CHERRY WIDGET PADDING OVERRIDE ──
   Your site-wide "section { padding: 7rem 0; }" rule (style.css) is a
   sane default for GlamorChiQ's own content sections, but Cherry's
   widget renders its own <section> elements inside our #hero and
   #calculator containers. Being an unscoped tag selector, that global
   padding was also applying to Cherry's internal sections, stacking up
   into the large empty gaps between widget blocks. This resets padding
   to 0 specifically for sections Cherry renders, without touching the
   site-wide default anywhere else. */
#hero section, #calculator section {
  padding: 0;
}

/* ── REAL CLIENT REVIEWS (replaces Cherry's generic third-party testimonials) ── */
.gcq-reviews { background: var(--linen-pale); padding: 6rem 0; border-top: 1px solid var(--linen); }
.gcq-review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; }
@media (max-width: 860px) { .gcq-review-grid { grid-template-columns: 1fr; } }
.gcq-review-card { background: var(--white); border: 1px solid var(--linen); border-top: 3px solid var(--pink); padding: 2rem; position: relative; }
.gcq-review-stars { color: var(--pink); font-size: 0.85rem; letter-spacing: 0.15em; margin-bottom: 1rem; }
.gcq-review-text { font-family: var(--heading); font-style: italic; font-size: 0.95rem; color: var(--black); line-height: 1.7; margin-bottom: 1.2rem; }
.gcq-review-name { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pink); }
.gcq-review-location { font-size: 0.62rem; color: var(--grey); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 0.15rem; }
.faq-a p { font-size: 0.82rem; color: var(--grey); line-height: 1.85; }