/* Article-scoped styles for /journal/how-to-break-third-party-booking-dependency/.
   Everything else on the page is the Journal's own components.

   The five steps are h3 sections carrying several paragraphs each, so they
   can't be the Journal's key-takeaways list (one short line per item). They
   borrow that component's language instead — the same numbered "01" badge,
   sizes and weights as .bw-takeaways li::before in journal.css — on a light
   card, so a reader can scan the sequence without a new visual idiom.

   The h3 rule is here because journal.css gives scroll-margin-top to h2 only,
   and this article's contents navigation links to the steps. */

.bw-prose h3[id] { scroll-margin-top: 100px; }

.dep-steps { display: flex; flex-direction: column; gap: 22px; margin: 0 0 28px; }

.dep-step {
  background: var(--bw-white);
  border: 1px solid var(--bw-line);
  border-radius: var(--bw-r-md);
  padding: 28px 30px;
}
/* .bw-prose h3 (0,1,1) sets the margins and size; restated at (0,2,1). */
.bw-prose .dep-step h3 {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; align-items: center;
  margin: 0 0 14px;
}
.dep-step__n {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; border: 1.5px solid var(--bw-accent); color: var(--bw-accent);
  font-family: 'Karla', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .04em;
}
.bw-prose .dep-step > *:last-child { margin-bottom: 0; }

@media (max-width: 560px) {
  .dep-step { padding: 22px 20px; }
  .bw-prose .dep-step h3 { grid-template-columns: 38px minmax(0, 1fr); gap: 14px; }
  .dep-step__n { width: 38px; height: 38px; font-size: 13px; }
}

/* Closing CTA measure.
   The shared component caps .pgform__lede at 46ch so the copy keeps a reading
   measure beside the form column. In this article the card is stacked — the
   intro is the full width of the prose column — so 46ch left roughly a third
   of the dark panel empty to the right of every paragraph while the heading
   already spanned the full width. The id keeps this to this article's closing
   section: the component's own 46ch is untouched everywhere else, including
   the other articles that share article-claude.css. Still a measure, just a
   wider one, and it only binds above ~660px so phones are unaffected. */
#shift-direct-form .pgform__lede { max-width: 64ch; }