.problem {
  background:white
}

.problem-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px
}

.icon-card {
  padding:27px 24px;
  border:1px solid var(--line);
  border-radius:22px;
  background:#fff;
  transition:.25s
}

.icon-card:hover {
  transform:translateY(-5px);
  box-shadow:var(--shadow-sm);
  border-color:#b9dae8
}

.icon {
  width:46px;
  height:46px;
  border-radius:15px;
  display:grid;
  place-items:center;
  background:var(--sky);
  color:#3478a4;
  margin-bottom:21px
}

.icon svg {
  width:23px;
  height:23px
}

.icon-card h3 {
  margin-bottom:9px
}

.icon-card p {
  margin:0;
  color:var(--muted);
  font-size:.92rem
}

.problem-note {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:32px;
  color:#617789;
  font-size:.9rem
}

.problem-note span {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--coral)
}

.how {
  background:linear-gradient(180deg,#f2faff 0%,#fbfdff 100%)
}

.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px
}

.step {
  position:relative;
  padding:36px 30px;
  background:white;
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  overflow:hidden
}

.step-num {
  font:800 4rem 'Manrope',sans-serif;
  position:absolute;
  right:20px;
  top:5px;
  color:#edf5f8;
  line-height:1
}

.step .icon {
  background:var(--aqua-pale);
  color:#2d8076
}

.step h3 {
  font-size:1.28rem;
  margin-bottom:10px
}

.step p {
  color:var(--muted);
  margin-bottom:0
}

.step-tag {
  display:inline-block;
  margin-top:22px;
  padding:6px 10px;
  border-radius:8px;
  background:#f4f8fb;
  color:#557084;
  font-size:.72rem;
  font-weight:700
}

.steps .step:not(:last-child)::after {
  content:'›';
  position:absolute;
  right:-22px;
  top:50%;
  z-index:2;
  color:#80b3c6;
  font-size:2rem
}

.preview {
  background:#fbfdff
}

.preview-grid {
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:72px;
  align-items:center
}

.preview-copy p {
  color:var(--muted);
  font-size:1.08rem
}

.safe-note {
  display:flex;
  gap:10px;
  margin-top:28px;
  padding:16px;
  border-radius:16px;
  background:var(--aqua-pale);
  color:#3f6a68;
  font-size:.84rem
}

.safe-note svg {
  flex:0 0 auto
}

.plan-shell {
  border-radius:30px;
  background:white;
  box-shadow:0 26px 70px rgba(20,61,88,.14);
  overflow:hidden;
  border:1px solid #e2edf3
}

.plan-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:25px 28px;
  background:var(--navy);
  color:white
}

.plan-head p {
  margin:3px 0 0;
  color:#b9cddd;
  font-size:.78rem
}

.sample-label {
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:99px;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase
}

.plan-body {
  padding:30px
}

.timeline {
  position:relative
}

.timeline::before {
  content:'';
  position:absolute;
  left:18px;
  top:14px;
  bottom:25px;
  width:2px;
  background:#dbe7ed
}

.timeline-item {
  display:grid;
  grid-template-columns:38px 110px 1fr;
  gap:14px;
  align-items:start;
  position:relative;
  padding-bottom:23px
}

.timeline-item:last-child {
  padding-bottom:0
}

.timeline-dot {
  width:37px;
  height:37px;
  border-radius:12px;
  background:#eef7fb;
  border:5px solid white;
  box-shadow:0 0 0 1px #dce9ef;
  display:grid;
  place-items:center;
  color:#3c85a9;
  z-index:1
}

.timeline-dot svg {
  width:15px
}

.timeline-time {
  font-size:.75rem;
  font-weight:700;
  color:#5c788a;
  padding-top:7px
}

.timeline-info {
  padding:10px 14px;
  margin-top:-3px;
  border-radius:13px;
  background:#f7fafc
}

.timeline-info strong {
  display:block;
  color:var(--navy);
  font-size:.87rem
}

.timeline-info span {
  font-size:.75rem;
  color:#708494
}

.timeline-item.active .timeline-dot {
  background:var(--aqua);
  color:var(--navy);
  box-shadow:0 0 0 1px var(--aqua),0 0 0 6px rgba(116,207,197,.18)
}

.timeline-item.active .timeline-info {
  background:var(--aqua-pale)
}

.audience {
  background:white
}

.audience-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px
}

.audience-card {
  text-align:center;
  padding:26px 14px 24px;
  border-radius:20px;
  background:#f6fafc;
  transition:.25s
}

.audience-card:nth-child(even) {
  background:#f2faf8
}

.audience-card:hover {
  transform:translateY(-4px);
  box-shadow:var(--shadow-sm)
}

.audience-icon {
  width:66px;
  height:66px;
  border-radius:50%;
  display:grid;
  place-items:center;
  margin:0 auto 17px;
  background:white;
  color:#37799e;
  box-shadow:0 7px 22px rgba(32,77,104,.09)
}

.audience-icon svg {
  width:28px
}

.audience-card h3 {
  font-size:.96rem;
  margin-bottom:7px
}

.audience-card p {
  margin:0;
  color:var(--muted);
  font-size:.78rem;
  line-height:1.5
}