@import url("/legal.css");

.journey {
  width: min(1100px, calc(100% - 32px));
  margin: 55px auto 80px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.journey-step {
  position: relative;
  min-height: 330px;
  padding: 28px 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(62, 40, 76, .06);
}
.step-number { position: absolute; top: 15px; left: 18px; color: var(--purple); font-size: 38px; font-weight: 900; opacity: .22; }
.step-icon { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 24px; border-radius: 17px; color: var(--purple-dark); background: var(--purple-soft); font-size: 23px; }
.journey-step h2 { margin: 0 0 12px; font-size: 21px; }
.journey-step p { margin: 0 0 18px; color: var(--muted); line-height: 1.9; }
.journey-step a { color: var(--purple-dark); font-size: 13px; font-weight: 800; }

.choice-section { width: min(900px, calc(100% - 32px)); margin: 0 auto 80px; text-align: center; }
.choice-section h2 { margin: 10px 0 28px; font-size: clamp(30px, 4vw, 44px); }
.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; text-align: right; }
.choice-grid article { padding: 28px; border: 1px solid var(--line); border-radius: 22px; background: var(--purple-soft); }
.choice-grid h3 { margin: 0 0 8px; }
.choice-grid p { margin: 0; color: var(--muted); line-height: 1.9; }

.how-cta { width: min(1080px, calc(100% - 32px)); margin: 0 auto 90px; padding: 38px 44px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-radius: 28px; color: #fff; background: linear-gradient(135deg, var(--purple-dark), var(--purple)); }
.how-cta h2 { margin: 8px 0; font-size: clamp(30px, 4vw, 44px); }
.how-cta p { margin: 0; opacity: .88; }

@media (max-width: 900px) { .journey { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .journey, .choice-grid { grid-template-columns: 1fr; }
  .journey-step { min-height: 0; }
  .how-cta { padding: 28px 22px; align-items: stretch; flex-direction: column; }
}