/* ============================================================
   Missing Section Styles for FY Bedding Homepage
   USP / Process / Section Header / Social Proof / Featured
   Mason & Fifth v4 Design System — Warm Neutrals
   ============================================================ */

/* ═══════════ USP / Stats Section ═══════════ */
.usp-section {
  padding: 100px 80px;
  background: #F4F1EA;
}
.usp-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.usp-header {
  text-align: center;
  margin-bottom: 56px;
}
.usp-desc {
  font-size: 15px;
  line-height: 1.7;
  color: #7D4A29;
  max-width: 620px;
  margin: 12px auto 0;
}
.usp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-bottom: 48px;
}
.usp-stat {
  text-align: center;
  padding: 32px 16px;
  background: #FDFCFA;
  border-radius: 16px;
  border: 1px solid #E8E0D6;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.usp-stat:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(61,42,28,0.08);
}
.usp-stat__num {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 400;
  color: #59240C;
  line-height: 1;
  margin-bottom: 8px;
}
.usp-stat__num .counter {
  display: inline;
}
.usp-stat__label {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #9D6238;
  letter-spacing: 0.02em;
}
.usp-cta {
  text-align: center;
}

/* ═══════════ Section Header (shared between sections) ═══════════ */
.section-header {
  text-align: center;
  margin-bottom: 40px;
}
.section-header p,
.section-header .t-body {
  color: #6B5E53;
  max-width: 600px;
  margin: 8px auto 0;
  font-size: 15px;
  line-height: 1.65;
}

/* ═══════════ Featured Products Section ═══════════ */
.featured-section {
  max-width: 1320px;
  margin: 0 auto;
  padding: 60px 48px;
}

/* ═══════════ Process / Timeline Section ═══════════ */
.process-section {
  max-width: 1320px;
  margin: 0 auto;
  padding: 60px 48px;
}
.process-timeline {
  display: flex;
  gap: 32px;
  justify-content: center;
  flex-wrap: wrap;
}
.process-step {
  flex: 1;
  min-width: 200px;
  text-align: center;
  padding: 32px 20px;
  border-radius: 14px;
  background: #FAF8F5;
  border: 1px solid #E8E0D6;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.process-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(61,42,28,0.06);
}
.process-step__icon {
  font-size: 40px;
  margin-bottom: 12px;
  line-height: 1;
}
.process-step__title {
  font-size: 16px;
  font-weight: 600;
  color: #3D2A1C;
  margin: 0 0 6px;
}
.process-step__desc {
  font-size: 13px;
  color: #6B5E53;
  margin: 0;
  line-height: 1.5;
}

/* ═══════════ Social Proof Section ═══════════ */
.social-proof-section {
  max-width: 1320px;
  margin: 0 auto;
  padding: 60px 48px;
}
.proof-card {
  flex: 1;
  min-width: 240px;
  max-width: 360px;
  background: #fff;
  border: 1px solid #E8E0D6;
  border-radius: 12px;
  padding: 28px 24px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.proof-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(61,42,28,0.08);
}
.proof-card__icon {
  font-size: 48px;
  line-height: 1;
  margin-bottom: 8px;
}
.proof-card__number {
  font-weight: 700;
  font-size: 20px;
  color: #3D2A1C;
  margin-bottom: 4px;
}
.proof-card__desc {
  color: #6B5E53;
  font-size: 14px;
  line-height: 1.5;
}

/* ═══════════ Responsive ═══════════ */
@media (max-width: 1024px) {
  .usp-section { padding: 60px 32px; }
  .usp-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .process-section { padding: 48px 32px; }
  .process-timeline { gap: 20px; }
  .social-proof-section { padding: 48px 32px; }
  .featured-section { padding: 48px 32px; }
}

@media (max-width: 640px) {
  .usp-section { padding: 48px 20px; }
  .usp-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .usp-stat { padding: 24px 12px; }
  .usp-stat__num { font-size: clamp(28px, 8vw, 40px); }
  .process-section { padding: 40px 20px; }
  .process-step { min-width: 140px; padding: 24px 16px; }
  .social-proof-section { padding: 40px 20px; }
  .featured-section { padding: 40px 20px; }
  .section-header { margin-bottom: 28px; }
}

@media (max-width: 480px) {
  .usp-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .process-timeline { flex-direction: column; align-items: stretch; }
  .process-step { max-width: 100%; }
}