/* Lead magnet pages: /check-your-inbox (after the popup) and
   /find-your-first-revenue-leak (after the double opt-in). Both sit on the
   legal-page shell; this adds the guide's page stack, the steps and the
   button rows. */

.guide-head .btn { margin-top: 8px; }

/* Outlined button on the off-white ground (.btn--outline is the nav's
   white-on-dark variant, so it would vanish here). */
.guide-btn--line {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--obsidian);
  color: var(--obsidian);
}

/* ---- The guide, one PDF page per image ---- */
.guide-pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 56px 80px 72px;
  background: var(--off-white);
  box-shadow: inset 0 -2px 0 var(--obsidian);
}

.guide-pages img {
  display: block;
  width: 760px;
  height: auto;
  box-shadow: 0 18px 44px rgba(17, 17, 17, 0.16), 0 0 0 1px rgba(17, 17, 17, 0.08);
}

.guide-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* .legal-body a underlines and darkens every link; these are buttons */
.guide-actions .btn { text-decoration: none; }
.guide-actions .btn--primary { color: var(--white); }

/* ---- Thank-you page: three numbered steps ---- */
.bp-body ol.guide-steps { gap: 20px; }

.bp-body .guide-steps li {
  display: grid;
  grid-template-columns: 32px 1fr;
  row-gap: 4px;
}

.bp-body .guide-steps li::before {
  grid-row: span 2;
  font-weight: 700;
}

.guide-steps b { font-weight: 700; }
.guide-steps span { color: var(--muted); }

@media (max-width: 1023px) {
  .guide-pages { gap: 20px; padding: 32px 16px 48px; }
  .guide-pages img { width: 358px; }
  .guide-actions .btn { width: 100%; justify-content: center; }
}