/* ============================================================
   "YOUR NEXT STEP" — reusable guided customer journey component
   ============================================================
   Self-contained: every colour/spacing value falls back through
   the --advisor-* variables (Advisor-family pages), then the
   site-wide --gold/--ink/--cream variables (standard pages), then
   a hardcoded default -- so this file can be dropped onto any page
   without also needing to match its variable naming convention. */

.next-step {
  --nstep-bg: var(--advisor-bg, var(--cream, #f7f4ef));
  --nstep-surface: var(--advisor-surface, #ffffff);
  --nstep-ink: var(--advisor-ink, var(--ink, #0f1316));
  --nstep-ink-soft: var(--advisor-ink-soft, var(--ink-soft, #4a4f55));
  --nstep-muted: var(--advisor-muted, var(--ink-soft, #6b625a));
  --nstep-line: var(--advisor-line, var(--line, #e7e6e2));
  --nstep-gold: var(--advisor-gold, var(--gold, #96692f));
  --nstep-gold-dark: var(--advisor-gold-dark, var(--gold-dark, #8d6638));
  --nstep-shadow: var(--advisor-shadow, 0 16px 40px rgba(15, 19, 22, 0.06));

  padding: 64px 0;
  background: var(--nstep-bg);
  font-family: 'Montserrat', sans-serif;
}

.next-step__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.next-step__head {
  max-width: 640px;
  margin: 0 auto 40px;
  text-align: center;
}

.next-step__title {
  margin: 0 0 12px;
  font-size: clamp(24px, 3.4vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--nstep-ink);
}

.next-step__intro {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--nstep-ink-soft);
}

.next-step__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 640px) {
  .next-step__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .next-step__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.next-step__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 26px 22px;
  background: var(--nstep-surface);
  border: 1px solid var(--nstep-line);
  border-radius: 18px;
  box-shadow: var(--nstep-shadow);
}

.next-step__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(150, 105, 47, 0.09);
  color: var(--nstep-gold-dark);
  flex-shrink: 0;
}

.next-step__card-icon svg { width: 20px; height: 20px; }

.next-step__card-title {
  margin: 4px 0 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--nstep-ink);
}

.next-step__card-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--nstep-ink-soft);
  flex: 1;
}

.next-step__card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  gap: 6px;
  margin-top: 6px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--nstep-gold);
  background: var(--nstep-gold);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.next-step__card-btn,
.next-step__card-btn:link,
.next-step__card-btn:visited {
  color: #fff;
}

.next-step__card-btn:hover,
.next-step__card-btn:focus-visible {
  background: #c9955a;
  border-color: #c9955a;
  color: #fff;
}

.next-step__card-btn:focus-visible {
  outline: 2px solid var(--nstep-gold-dark);
  outline-offset: 2px;
}

/* ── Secondary feedback strip ── */
.next-step__feedback {
  margin: 40px auto 0;
  max-width: 560px;
  text-align: center;
}

.next-step__feedback-title {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--nstep-muted);
}

.next-step__feedback-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.next-step__feedback-btn {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--nstep-line);
  background: var(--nstep-surface);
  color: var(--nstep-ink-soft);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.next-step__feedback-btn:hover,
.next-step__feedback-btn:focus-visible {
  border-color: var(--nstep-gold);
  color: var(--nstep-gold-dark);
}

.next-step__feedback-btn:focus-visible {
  outline: 2px solid var(--nstep-gold-dark);
  outline-offset: 2px;
}

.next-step__feedback-btn[aria-pressed="true"] {
  border-color: var(--nstep-gold);
  background: rgba(150, 105, 47, 0.08);
  color: var(--nstep-gold-dark);
}

.next-step__feedback-response {
  margin-top: 14px;
  font-size: 13px;
  color: var(--nstep-ink-soft);
}

.next-step__feedback-response[hidden] { display: none; }

.next-step__feedback-followup {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.next-step__feedback-followup[hidden] { display: none; }

.next-step__feedback-followup a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--nstep-gold);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.next-step__feedback-followup a:hover,
.next-step__feedback-followup a:focus-visible {
  background: var(--nstep-gold-dark);
}

@media (max-width: 480px) {
  .next-step { padding: 48px 0; }
  .next-step__head { margin-bottom: 28px; }
  .next-step__card { padding: 22px 18px; }
}