.funnel-guide {
  display: grid;
  gap: var(--sp-4);
  min-width: 0;
  margin-block-start: var(--sp-8);
  padding: var(--sp-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--fg);
  text-align: start;
}
.funnel-guide :is(h3, h4, p) { margin: 0; }
.funnel-guide h3 { font-size: var(--text-2xl); font-weight: var(--weight-semibold); }
.funnel-guide h4 { font-size: var(--text-xl); font-weight: var(--weight-semibold); }
.funnel-guide p { font-size: var(--text-lg); line-height: var(--leading-relaxed); }
.funnel-guide .funnel-guide__note { font-size: var(--text-base); color: var(--fg-secondary); }
.funnel-guide__content, .funnel-guide__form { display: grid; gap: var(--sp-4); min-width: 0; }
.funnel-guide__form label { font-size: var(--text-lg); font-weight: var(--weight-medium); }
.funnel-guide__form select { width: 100%; max-width: 100%; min-width: 0; }
.funnel-guide__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.funnel-guide .ds-button { max-width: 100%; min-height: var(--control-lg); white-space: normal; line-height: var(--leading-normal); padding-block: var(--sp-2); }
.funnel-guide > .ds-button { justify-self: start; }

/* Above the process grid's one-column breakpoint, keep the optional guide in
   the content column so the sticky heading cannot scroll over it. */
@media (min-width: 1200px) {
  .marketing-process > .funnel-guide { grid-column: 2; }
}
