.section--ivory,
.journey-section,
.stories-section,
.members-section,
.plans-section,
.trust-section,
.final-cta-section { background: var(--wasla-ivory); }

.section-heading { margin-bottom: 38px; }
.section-heading--center { text-align: center; }
.section-heading--center .section__lead { margin-inline: auto; }
.section__title { color: var(--wasla-burgundy-900); font-weight: 700; }
.section__lead { color: var(--text-muted-light); }

/* Hero — exact approved image; text/CTA are baked into the approved artwork. */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--wasla-burgundy-950);
  aspect-ratio: 1672 / 941;
}
.hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero__cta-hotspot {
  position: absolute;
  left: 12.2%;
  top: 49.2%;
  width: 23.5%;
  height: 13.5%;
  border-radius: 22px;
}
.hero__cta-hotspot:focus-visible {
  outline: 3px solid #fff1cb;
  outline-offset: 4px;
}

/* Why */
.premium-cards { display: grid; gap: 20px; }
.premium-cards--four { grid-template-columns: repeat(4, 1fr); }
.premium-card { min-height: 270px; border-radius: 22px; padding: 30px 24px 26px; background: linear-gradient(150deg, #6c1424 0%, #470b16 68%, #350812 100%); color: var(--wasla-ivory); text-align: center; border: 1px solid rgba(201,154,75,.34); box-shadow: 0 18px 38px rgba(64,8,19,.17), inset 0 1px 0 rgba(255,255,255,.045); }
.premium-card h3 { margin: 14px 0 9px; font-size: 1.35rem; color: var(--wasla-ivory); }
.premium-card p { color: #f4e7dc; }
.premium-icon { width: 80px; height: 80px; margin-inline: auto; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--wasla-gold); color: var(--wasla-gold-soft); font-size: 2.4rem; line-height: 1; box-shadow: inset 0 0 0 6px rgba(201,154,75,.045); }

/* How */
.how-section { padding-top: 30px; }
.how-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; position: relative; }
.how-grid::before { content: ''; position: absolute; top: 58px; right: 10%; left: 10%; border-top: 2px dotted rgba(201,154,75,.7); z-index: 0; }
.how-step { position: relative; z-index: 1; text-align: center; padding: 0 18px; }
.how-step__number { position: absolute; top: -3px; right: calc(50% + 39px); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(#f3d493,#c99a4b); color: var(--wasla-burgundy-900); font-weight: 700; border: 1px solid #b8802f; }
.how-step__icon { width: 104px; height: 104px; margin: 0 auto 20px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 25%, #6f1727, #3a0914 70%); color: var(--wasla-gold-soft); border: 5px solid #e2c184; box-shadow: 0 10px 24px rgba(59,12,21,.18); font-size: 2.8rem; }
.how-step h3 { color: var(--wasla-burgundy-900); font-size: 1.2rem; margin-bottom: 6px; }
.how-step p { color: var(--text-muted-light); }

/* Journey */
.journey-section { padding-top: 48px; }
.journey-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 16px; }
.journey-card { position: relative; text-align: center; padding: 28px 18px 24px; border-radius: 20px; background: #fffaf5; border: 1px solid #e7d7c6; box-shadow: 0 12px 28px rgba(59,12,21,.07); }
.journey-card > span { position: absolute; top: 12px; left: 14px; color: #a56b21; background: #f4d99f; border: 1px solid #d6ac62; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; font-weight: 700; }
.journey-card__icon { color: var(--wasla-gold); font-size: 2.5rem; margin-bottom: 12px; }
.journey-card h3 { color: var(--wasla-burgundy-900); margin-bottom: 8px; font-size: 1.12rem; }
.journey-card p { color: var(--text-muted-light); font-size: .94rem; }

/* Stats */
.stats-section { padding-top: 18px; padding-bottom: 70px; background: var(--wasla-ivory); }
.stats-panel { background: linear-gradient(140deg,#671323,#400913 75%); color: var(--wasla-ivory); border: 1px solid rgba(201,154,75,.38); border-radius: 24px; padding: 28px 34px 30px; box-shadow: 0 18px 40px rgba(55,7,16,.16); }
.stats-panel h2 { text-align: center; margin-bottom: 24px; font-size: 1.9rem; color: var(--wasla-ivory); }
.stats-grid { display: grid; grid-template-columns: repeat(5,1fr); }
.stat { text-align: center; padding: 10px 16px; border-inline-start: 1px solid rgba(201,154,75,.34); }
.stat:last-child { border-inline-start: 0; }
.stat strong { display: block; color: var(--wasla-gold-soft); font-size: 2rem; }
.stat span { color: #f3e4d8; font-size: .92rem; }

/* Stories */
.story-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.story-card--photo { overflow: hidden; border-radius: 22px; background: white; border: 1px solid #e5d4c4; box-shadow: 0 16px 35px rgba(59,12,21,.10); }
.story-card--photo img { width: 100%; aspect-ratio: 1.66/1; object-fit: cover; display: block; }
.story-card__body { padding: 22px 22px 24px; }
.story-age { display: inline-flex; padding: 5px 11px; border-radius: 999px; background: var(--wasla-burgundy-800); color: var(--wasla-ivory); font-size: .8rem; margin-bottom: 12px; }
.story-card__body h3 { color: var(--wasla-burgundy-900); margin-bottom: 8px; }
.story-card__body p { color: var(--text-muted-light); }

/* Members */
.members-section { padding-top: 62px; }
.featured-members { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 16px; }
.profile-photo-card { position: relative; overflow: hidden; border-radius: 20px; min-height: 300px; background: var(--wasla-burgundy-900); box-shadow: 0 14px 28px rgba(59,12,21,.16); }
.profile-photo-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.profile-photo-card::after { content: ''; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(31,2,8,.88)); }
.profile-photo-card__overlay { position: absolute; z-index: 2; bottom: 0; right: 0; left: 0; padding: 30px 16px 16px; color: white; display: grid; gap: 2px; }
.profile-photo-card__overlay b { font-size: 1rem; }
.profile-photo-card__overlay span { font-size: .85rem; color: #f1ddd0; }
.latest-heading { text-align: center; margin: 48px 0 20px; }
.latest-heading h3 { color: var(--wasla-burgundy-900); font-size: 1.8rem; }
.latest-members { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 14px; }
.latest-card { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 16px; background: #fffaf5; border: 1px solid #e6d5c4; box-shadow: 0 8px 18px rgba(59,12,21,.07); }
.latest-card img { width: 72px; height: 72px; border-radius: 13px; object-fit: cover; flex: 0 0 auto; }
.latest-card div { min-width: 0; display: grid; }
.latest-card b { color: var(--wasla-burgundy-900); }
.latest-card span { color: var(--text-muted-light); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-note { margin-top: 16px; text-align: center; color: #8a6e70; font-size: .82rem; }

/* Plans */
.plans { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; max-width: 1040px; margin-inline: auto; }
.plan--burgundy { position: relative; display: flex; flex-direction: column; min-height: 470px; padding: 30px; border-radius: 22px; color: var(--wasla-ivory); background: linear-gradient(145deg,#6b1424,#3b0812 76%); border: 1px solid rgba(201,154,75,.42); box-shadow: 0 16px 35px rgba(59,12,21,.16); }
.plan--burgundy.plan--featured { transform: translateY(-10px); outline: 2px solid var(--wasla-gold); }
.plan__badge { position: absolute; top: -16px; right: 50%; transform: translateX(50%); background: linear-gradient(#dbb465,#b87e2e); color: #3b0c15; border-radius: 0 0 12px 12px; padding: 7px 18px; font-size: .82rem; font-weight: 700; }
.plan__icon { color: var(--wasla-gold-soft); font-size: 2.2rem; margin-bottom: 4px; }
.plan__name { color: var(--wasla-gold-soft); font-size: 1.35rem; font-weight: 700; }
.plan__price { font-size: 2.8rem; font-weight: 700; margin: 10px 0 14px; }
.plan__price small { font-size: .9rem; }
.plan--burgundy ul { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 10px; color: #f3e3d8; }
.plan--burgundy li::before { content: '✓'; color: var(--wasla-gold-soft); margin-left: 8px; }
.plan__cta { margin-top: auto; justify-content: center; }

/* Trust */
.trust-section { padding-top: 58px; }
.trust-cards { display: grid; grid-template-columns: repeat(5,1fr); gap: 16px; }
.trust-card { text-align: center; background: linear-gradient(145deg,#681323,#400913); color: var(--wasla-ivory); border-radius: 20px; padding: 24px 18px; border: 1px solid rgba(201,154,75,.35); box-shadow: 0 13px 28px rgba(59,12,21,.13); }
.trust-card > div { color: var(--wasla-gold-soft); font-size: 2.2rem; }
.trust-card h3 { margin: 8px 0 5px; color: var(--wasla-ivory); font-size: 1.05rem; }
.trust-card p { color: #eedfd5; font-size: .88rem; }

/* Final CTA */
.final-cta-section { padding-top: 40px; }
.final-cta-card { overflow: hidden; display: grid; grid-template-columns: 1.4fr .8fr; min-height: 310px; border-radius: 26px; background: linear-gradient(120deg,#681323,#390812 72%); color: var(--wasla-ivory); border: 1px solid rgba(201,154,75,.35); box-shadow: 0 18px 42px rgba(59,12,21,.18); }
.final-cta-card__copy { padding: 48px 52px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.final-cta-card__copy h2 { font-size: clamp(2rem,4vw,3.3rem); color: var(--wasla-ivory); margin-bottom: 8px; }
.final-cta-card__copy p { color: #ead8ce; margin-bottom: 22px; }
.final-cta-card__copy .btn { min-width: 220px; justify-content: center; }
.final-cta-card__copy small { margin-top: 12px; color: var(--wasla-gold-soft); }
.final-cta-card__image img { width: 100%; height: 100%; object-fit: cover; }

.footer-brand img { width: 155px; height: 86px; object-fit: contain; object-position: center; }

@media (max-width: 1100px) {
  .premium-cards--four, .how-grid { grid-template-columns: repeat(2,1fr); }
  .how-grid::before { display: none; }
  .journey-grid { grid-template-columns: repeat(3,1fr); }
  .trust-cards { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 900px) {
  /* The approved hero is one complete artwork (copy + CTA baked in).
     Never crop it on phones/tablets: preserve the full 1672:941 frame. */
  .hero { min-height: 0; height: auto; aspect-ratio: 1672 / 941; }
  .hero__image { width: 100%; height: 100%; object-fit: contain; object-position: center; }
  .hero__shade { background: none; }
  .hero__content { width: 100%; }
  .story-grid, .plans { grid-template-columns: 1fr; }
  .plan--burgundy.plan--featured { transform: none; }
  .stats-grid { grid-template-columns: repeat(2,1fr); gap: 10px; }
  .stat { border: 0; }
  .final-cta-card { grid-template-columns: 1fr; }
  .final-cta-card__image { max-height: 250px; }
}
@media (max-width: 680px) {
  .hero { min-height: 0; height: auto; aspect-ratio: 1672 / 941; }
  .hero__image { width: 100%; height: 100%; object-fit: contain; object-position: center; }
  .hero__shade { background: none; }
  .hero__inner { align-items: center; }
  .hero__content { width: 100%; padding: 0; }
  .premium-cards--four, .how-grid, .journey-grid { grid-template-columns: 1fr; }
  .featured-members, .latest-members {
    display: grid;
    grid-auto-flow: column;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    padding: 2px 2px 12px;
  }
  .featured-members { grid-template-columns: none; grid-auto-columns: minmax(210px, 72vw); }
  .latest-members { grid-template-columns: none; grid-auto-columns: minmax(235px, 78vw); }
  .profile-photo-card, .latest-card { scroll-snap-align: start; }
  .trust-cards { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stats-panel { padding-inline: 18px; }
  .final-cta-card__copy { padding: 36px 26px; align-items: stretch; text-align: center; }
  .final-cta-card__copy .btn { width: 100%; }
}
@media (max-width: 460px) {
  .trust-cards, .stats-grid { grid-template-columns: 1fr; }
}

/* v0.18.3 — explicit mobile full-site view and phone-fit guardrails. */
@media (max-width: 520px) {
  .site-header__inner { min-height: 60px; gap: 8px; }
  .site-header .brand--image img { width: 86px; height: 42px; }
  .site-header .header-actions .btn { min-height: 40px; padding-inline: 12px; font-size: .86rem; }
  .site-header .header-actions [data-guest-actions] { gap: 6px; }
}
@media (max-width: 360px) {
  .site-header .brand--image img { width: 78px; height: 38px; }
  .site-header .header-actions .btn { padding-inline: 9px; font-size: .8rem; }
}