/* ----------------------------------------------------------------
   /guide/ — page-only rules. Shared layout, type, buttons, badges,
   clouds and the .guide-section / .form-field base classes all come
   from ../css/styles.css; this file only adds what that page needs
   and nothing already defined there.
   ---------------------------------------------------------------- */

/* Dark rounded text panel (same language as .offer-card--bundle) for
   the opt-in form card. */
.guide-panel {
  background: var(--bsl-ink);
  color: var(--bsl-ivory);
  border-radius: var(--bsl-radius);
  border: 2px solid rgba(255,247,235,.2);
  padding: 2rem;
}
.guide-panel h2 {
  font-family: var(--bsl-display);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: .5rem;
  color: var(--bsl-ivory);
}
.guide-panel > p { color: rgba(255,247,235,.75); margin-bottom: 1.25rem; }
.guide-panel .form-field label { color: var(--bsl-ivory); }
.guide-panel .consent-note {
  font-size: .75rem;
  color: rgba(255,247,235,.65);
  margin-top: .5rem;
  line-height: 1.5;
}
.guide-panel .consent-note a { color: var(--bsl-ivory); }
.guide-panel [data-lead-status] {
  font-size: .8rem;
  color: var(--bsl-ivory);
  margin-top: .75rem;
  min-height: 1.2em;
}

/* Supporting photo above the FAQ */
.guide-page-photo {
  border-radius: var(--bsl-radius);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 6px 14px rgba(16,35,68,.08);
}
.guide-page-photo img { display: block; width: 100%; height: auto; }

@media (max-width: 640px) {
  .guide-panel { padding: 1.5rem; }
}