/* Shared How It Works redesign for Home and About pages */
.home .how-it-works,
.about .how-it-works {
  --hiw-accent: var(--primary-color, #c08a6a);
  --hiw-accent-deep: var(--primary-dark, #8b6048);
  --hiw-accent-soft: rgba(192, 138, 106, 0.14);
  --hiw-ink: var(--text-color, #302824);
  --hiw-muted: var(--text-light, #6f655f);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(3.75rem, 5vw, 4.75rem) clamp(1rem, 4vw, 3rem);
  background:
    radial-gradient(circle at 8% 12%, rgba(192, 138, 106, 0.14), transparent 25rem),
    radial-gradient(circle at 92% 88%, rgba(142, 111, 190, 0.10), transparent 23rem),
    linear-gradient(145deg, #fffdf9 0%, #f8f2ea 100%);
}

.home .how-it-works {
  border-top: 1px solid rgba(192, 138, 106, 0.14);
  border-bottom: 1px solid rgba(192, 138, 106, 0.14);
  border-radius: 0;
}

.about .how-it-works {
  margin-bottom: 2.5rem;
  border: 1px solid rgba(192, 138, 106, 0.18);
  border-radius: 30px;
  box-shadow: 0 24px 70px rgba(70, 51, 41, 0.08);
}

.home .how-it-works::before,
.about .how-it-works::before,
.home .how-it-works::after,
.about .how-it-works::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 18rem;
  height: 18rem;
  border: 1px solid rgba(192, 138, 106, 0.12);
  border-radius: 50%;
  pointer-events: none;
}

.home .how-it-works::before,
.about .how-it-works::before {
  top: -10rem;
  left: -8rem;
  box-shadow: 0 0 0 2.5rem rgba(192, 138, 106, 0.035);
}

.home .how-it-works::after,
.about .how-it-works::after {
  right: -9rem;
  bottom: -11rem;
  box-shadow: 0 0 0 3rem rgba(142, 111, 190, 0.025);
}

.home .how-it-works .section-header,
.about .how-it-works .section-header {
  max-width: 680px;
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}

.home .how-it-works .section-header::before,
.about .how-it-works .section-header::before {
  content: 'OUR SIMPLE PROCESS';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.85rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid rgba(192, 138, 106, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  color: var(--hiw-accent-deep);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.home .how-it-works .section-header h2,
.about .how-it-works .section-header h2 {
  margin: 0 0 0.8rem;
  color: var(--hiw-ink) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: clamp(2.05rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.home .how-it-works .section-header h2::after,
.about .how-it-works .section-header h2::after {
  content: '';
  display: block;
  width: 58px;
  height: 3px;
  margin: 0.8rem auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--hiw-accent), #8e6fbe);
}

.home .how-it-works .section-header p,
.about .how-it-works .section-header p {
  max-width: 560px;
  margin: 0 auto;
  color: var(--hiw-muted);
  font-size: clamp(0.98rem, 1.5vw, 1.1rem);
  line-height: 1.7;
}

.home .how-it-works .hiw-timeline,
.about .how-it-works .hiw-timeline {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: stretch !important;
  justify-content: center;
  gap: clamp(0.9rem, 1.8vw, 1.25rem) !important;
  width: 100%;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.home .how-it-works .hiw-card,
.about .how-it-works .hiw-card {
  --hiw-icon: none;
  position: relative;
  display: block !important;
  flex: 1 1 230px !important;
  max-width: 270px;
  min-width: 0;
  align-self: stretch;
  text-align: left !important;
  opacity: 0;
  transform: translateY(26px) !important;
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--hiw-delay, 0s);
}

.home .how-it-works .hiw-card.hiw-card--visible,
.about .how-it-works .hiw-card.hiw-card--visible {
  opacity: 1;
  transform: translateY(0) !important;
}

.home .how-it-works .hiw-track,
.about .how-it-works .hiw-track {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 3;
  display: block !important;
  width: auto !important;
  height: auto !important;
}

.home .how-it-works .hiw-dot,
.about .how-it-works .hiw-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 54px;
  height: 30px !important;
  padding: 0 0.7rem;
  border: 1px solid rgba(192, 138, 106, 0.24);
  border-radius: 999px;
  background: rgba(255, 250, 245, 0.94) !important;
  color: var(--hiw-accent-deep) !important;
  box-shadow: none !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em;
}

.home .how-it-works .hiw-dot::before,
.about .how-it-works .hiw-dot::before {
  content: 'STEP';
  margin-right: 0.22rem;
}

.home .how-it-works .hiw-card--visible .hiw-dot::after,
.about .how-it-works .hiw-card--visible .hiw-dot::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

.home .how-it-works .hiw-connector,
.about .how-it-works .hiw-connector {
  display: none !important;
}

.home .how-it-works .hiw-card-body,
.about .how-it-works .hiw-card-body {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  height: 100%;
  min-height: 220px;
  margin: 0 !important;
  padding: 3.95rem 1.3rem 1.3rem !important;
  overflow: hidden;
  border: 1px solid rgba(192, 138, 106, 0.15) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 12px 32px rgba(70, 51, 41, 0.07) !important;
  backdrop-filter: blur(12px);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.home .how-it-works .hiw-card-body::before,
.about .how-it-works .hiw-card-body::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  display: block !important;
  width: auto !important;
  height: 4px !important;
  border: 0 !important;
  background: linear-gradient(90deg, var(--hiw-accent), #8e6fbe) !important;
}

.home .how-it-works .hiw-card-body::after,
.about .how-it-works .hiw-card-body::after {
  content: '';
  position: absolute;
  top: -3.8rem;
  right: -3.6rem;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background: radial-gradient(circle, var(--hiw-accent-soft), transparent 70%);
  pointer-events: none;
}

.home .how-it-works .hiw-card:hover .hiw-card-body,
.about .how-it-works .hiw-card:hover .hiw-card-body {
  transform: translateY(-6px);
  border-color: rgba(192, 138, 106, 0.3) !important;
  box-shadow: 0 20px 44px rgba(70, 51, 41, 0.12) !important;
}

.home .how-it-works .hiw-icon-wrap,
.about .how-it-works .hiw-icon-wrap {
  display: grid !important;
  place-items: center;
  width: 54px !important;
  height: 54px !important;
  margin: 0 0 1rem !important;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid rgba(192, 138, 106, 0.18);
  border-radius: 16px !important;
  background: linear-gradient(145deg, #fff7ee 0%, #f4e4d4 100%) !important;
  color: transparent !important;
  font-size: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: transform 0.3s ease, background 0.3s ease;
}

.home .how-it-works .hiw-card:hover .hiw-icon-wrap,
.about .how-it-works .hiw-card:hover .hiw-icon-wrap {
  transform: translateY(-2px) rotate(-2deg);
}

.home .how-it-works .hiw-icon-wrap::before,
.about .how-it-works .hiw-icon-wrap::before {
  content: '';
  display: block;
  width: 27px;
  height: 27px;
  background-color: var(--hiw-accent-deep);
  -webkit-mask-image: var(--hiw-icon);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: var(--hiw-icon);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.home .how-it-works .hiw-card:nth-child(1),
.about .how-it-works .hiw-card:nth-child(1) {
  --hiw-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%224%22%20width%3D%2214%22%20height%3D%2217%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M9%204.5V3h6v1.5%22%2F%3E%3Cpath%20d%3D%22M9%209h6M9%2013h6M9%2017h4%22%2F%3E%3C%2Fsvg%3E");
}

.home .how-it-works .hiw-card:nth-child(2),
.about .how-it-works .hiw-card:nth-child(2) {
  --hiw-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2011.5a8.4%208.4%200%200%201-9%208.5%209.6%209.6%200%200%201-4-.9L3%2021l1.7-4.2A8.2%208.2%200%200%201%203%2011.5C3%206.8%207%203%2012%203s9%203.8%209%208.5Z%22%2F%3E%3Cpath%20d%3D%22M8%2011.5h.01M12%2011.5h.01M16%2011.5h.01%22%2F%3E%3C%2Fsvg%3E");
}

.home .how-it-works .hiw-card:nth-child(3),
.about .how-it-works .hiw-card:nth-child(3) {
  --hiw-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3%2010h18M7%2015h4%22%2F%3E%3C%2Fsvg%3E");
}

.home .how-it-works .hiw-card:nth-child(4),
.about .how-it-works .hiw-card:nth-child(4) {
  --hiw-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m4%2020%204.5-1%2010.8-10.8a2%202%200%200%200-2.8-2.8L5.7%2016.2%204%2020Z%22%2F%3E%3Cpath%20d%3D%22m14.8%207.1%202.1%202.1M4%2020h5%22%2F%3E%3C%2Fsvg%3E");
}

.home .how-it-works .hiw-card:nth-child(5),
.about .how-it-works .hiw-card:nth-child(5) {
  --hiw-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22m8%2012%202.5%202.5L16%209%22%2F%3E%3C%2Fsvg%3E");
}

.home .how-it-works .hiw-card:nth-child(6),
.about .how-it-works .hiw-card:nth-child(6) {
  --hiw-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%207.5V6a2%202%200%200%201%202-2h12%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%227%22%20width%3D%2218%22%20height%3D%2213%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M16%2012h5v4h-5a2%202%200%200%201%200-4Z%22%2F%3E%3C%2Fsvg%3E");
}

.home .how-it-works .hiw-card:nth-child(7),
.about .how-it-works .hiw-card:nth-child(7) {
  --hiw-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%225%22%20r%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2212%22%20r%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2219%22%20r%3D%222.5%22%2F%3E%3Cpath%20d%3D%22m8.2%2010.8%207.6-4.6M8.2%2013.2l7.6%204.6%22%2F%3E%3C%2Fsvg%3E");
}

.home .how-it-works .hiw-text,
.about .how-it-works .hiw-text {
  width: 100%;
  min-width: 0;
  flex: 1;
}

.home .how-it-works .hiw-text h4,
.about .how-it-works .hiw-text h4 {
  margin: 0 0 0.55rem !important;
  color: var(--hiw-ink) !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.015em;
}

.home .how-it-works .hiw-text p,
.about .how-it-works .hiw-text p {
  margin: 0 !important;
  color: var(--hiw-muted) !important;
  font-size: 0.88rem !important;
  line-height: 1.65 !important;
}

@media (max-width: 760px) {
  .home .how-it-works,
  .about .how-it-works {
    padding: 3.5rem 1rem;
  }

  .about .how-it-works {
    border-radius: 24px;
  }

  .home .how-it-works .hiw-card,
  .about .how-it-works .hiw-card {
    flex-basis: min(100%, 330px) !important;
    max-width: 360px;
  }

  .home .how-it-works .hiw-card-body,
  .about .how-it-works .hiw-card-body {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home .how-it-works .hiw-card,
  .about .how-it-works .hiw-card,
  .home .how-it-works .hiw-card-body,
  .about .how-it-works .hiw-card-body,
  .home .how-it-works .hiw-icon-wrap,
  .about .how-it-works .hiw-icon-wrap {
    transition: none !important;
  }
}