/*
 * bs-handmade-pledge-page.css — BlackSpace /handmade-pledge/
 * Enqueued via bs-page-nav-assets.php on /handmade-pledge/ only.
 * Iteration 1: full page build, all six sections, all responsive breakpoints.
 *
 * Every property uses !important — Elementor Pro generates high-specificity
 * post CSS via the post ID (27747) and would otherwise win.
 *
 * BACKGROUND-COLOR CASCADE WORKAROUND:
 *   On this build, some Elementor / WoodMart stylesheet (CORS-blocked from
 *   inspection) sets `background-color: transparent !important` with a
 *   selector specificity higher than (1,0,0,0) — verified that even inline
 *   `style="background-color: X !important"` cannot win. The workaround is
 *   to deliver solid background colors via `background-image:` as a single-
 *   colour `linear-gradient(C, C)` layer, which is accepted by the cascade.
 *   Pseudo-elements (::before / ::after) and HTML-widget-output markup are
 *   not subject to this issue and can use plain `background-color`.
 *
 * HEADING TAG AGNOSTIC:
 *   All heading selectors target `.elementor-heading-title` without tag
 *   specificity (no `h2.` / `h3.` prefix). Jessie may pick any tag in
 *   Elementor's HTML Tag dropdown without breaking the styling.
 *
 * Colors:
 *   #b0743e bronze      | #1e1919 deep-brown    | #252020 deep-brown-2
 *   #c8925e bronze-300  | #efd9c0 bronze-100    | #f7eee5 bronze-050
 *   #8c5d31 bronze-700  | #5a3b1e bronze-900    | #1f8a4c success-green
 *   #474747 graphite    | #e6e6e6 silver-mist
 *   #1a1a1a neutral-900 | #2e2e2e neutral-700   | #fafafa neutral-025
 *
 * "Sign the pledge" CTA in Section 6 routes to:
 *   https://myblackspace.co/dashboard/handmade-pledge/
 */


/* ══════════════════════════════════════════════════════════
   PAGE WRAPPER — replicate the mockup's .page-wrap behavior
   on top of WoodMart's .wd-content-layout.
   ══════════════════════════════════════════════════════════ */

body.page-id-27747 {
  background-color: #fafafa !important;
}

body.page-id-27747 .wd-content-layout {
  background-color: #fafafa !important;
  max-width: 1440px !important;
  padding-top: 24px !important;
  padding-right: 20px !important;
  padding-bottom: 0 !important;
  padding-left: 20px !important;
}

/* Sections 2–6 pull back to full wrapper width — the hero stays
   contained inside the 20px side padding, creating the visible
   page-bg around the contained hero card. */
.bs-pledge-meaning,
.bs-pledge-commit,
.bs-pledge-mechanism,
.bs-pledge-doc-section,
.bs-pledge-sign-cta {
  margin-left: -20px !important;
  margin-right: -20px !important;
  width: calc(100% + 40px) !important;
  max-width: calc(100% + 40px) !important;
}


/* ══════════════════════════════════════════════════════════
   SHARED UTILITIES
   ══════════════════════════════════════════════════════════ */

.bs-section-label .elementor-widget-container {
  padding: 0 !important;
  margin: 0 !important;
}
.bs-section-label .elementor-widget-container p,
.bs-section-label .elementor-widget-container div {
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #b0743e !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}


/* ══════════════════════════════════════════════════════════
   SECTION 1 — HERO
   Contained dark card. Bronze glow + diagonal texture overlay.
   Amber gradient line at the bottom.
   DOM: .bs-pledge-hero > .e-con-inner > [4 widgets]
   ══════════════════════════════════════════════════════════ */

.bs-pledge-hero {
  border-radius: 10px !important;
  overflow: hidden !important;
  position: relative !important;
  /* NOTE: background-color is reset to transparent by an Elementor !important
     rule in a CORS-blocked stylesheet (verified — even inline style with
     !important loses). The solid color is layered into background-image as
     the bottom gradient layer, which IS accepted by the cascade. */
  background-image:
    radial-gradient(ellipse 70% 60% at 50% 38%, rgba(176,116,62,0.20) 0%, transparent 65%),
    repeating-linear-gradient(-45deg, transparent, transparent 44px,
      rgba(255,255,255,0.018) 44px, rgba(255,255,255,0.018) 45px),
    linear-gradient(#1e1919, #1e1919) !important;
  margin-top: 0 !important;
}

.bs-pledge-hero::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, #b0743e, transparent) !important;
  opacity: 0.45 !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

.bs-pledge-hero > .e-con-inner {
  padding: 84px 80px 80px !important;
  text-align: center !important;
  align-items: center !important;
}

/* ── Widget 1: Eyebrow ────────────────────────────────────── */
.bs-pledge-hero-eyebrow {
  width: auto !important;
  margin-bottom: 18px !important;
}
.bs-pledge-hero-eyebrow .elementor-widget-container { padding: 0 !important; margin: 0 !important; }
.bs-pledge-hero-eyebrow .elementor-widget-container p,
.bs-pledge-hero-eyebrow .elementor-widget-container div {
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #c8925e !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}

/* ── Widget 2: Badge SVG (HTML widget) ────────────────────────
   The badge artwork is authored on a 0 0 2400 2400 viewBox with a
   circular "HANDMADE PLEDGE / BLACKSPACE · EST 2020" text ring. At
   168px the ring text was illegible (~14x downscale). 240px restores
   legibility and sits proportionately in the hero. Space above (eyebrow
   margin-bottom) and below (badge margin-bottom) is matched at 18px. */
.bs-pledge-hero-badge {
  width: 240px !important;
  min-width: 240px !important;
  height: 240px !important;
  margin: 0 auto 18px !important;
  display: block !important;
  flex: 0 0 240px !important;
}
.bs-pledge-hero-badge .elementor-widget-container {
  width: 240px !important;
  height: 240px !important;
  padding: 0 !important;
  margin: 0 !important;
}
.bs-pledge-hero-badge svg {
  width: 240px !important;
  height: 240px !important;
  display: block !important;
}

/* ── Widget 3: H1 (Jessie added bs-hero-card-title — local rules win) ── */
.bs-pledge-hero .elementor-widget-heading,
.bs-pledge-hero .bs-hero-card-title {
  width: 100% !important;
  max-width: 780px !important;
  margin: 0 auto 22px !important;
}
.bs-pledge-hero .elementor-widget-heading .elementor-widget-container {
  padding: 0 !important;
  margin: 0 auto !important;
  max-width: 780px !important;
}
.bs-pledge-hero .elementor-heading-title {
  font-family: Verdana, Geneva, sans-serif !important;
  font-size: 3rem !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
  color: #ffffff !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}
.bs-pledge-hero-title-em {
  color: #c8925e !important;
  font-style: normal !important;
}

/* ── Widget 4: Definition paragraph ───────────────────────── */
.bs-pledge-hero-definition {
  width: 100% !important;
  max-width: 620px !important;
  margin: 0 auto !important;
}
.bs-pledge-hero-definition .elementor-widget-container {
  padding: 0 !important;
  margin: 0 auto !important;
}
.bs-pledge-hero-definition p,
.bs-pledge-hero-definition div {
  font-size: 1rem !important;
  line-height: 1.7 !important;
  color: rgba(255,255,255,0.72) !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
}
.bs-pledge-hero-definition em {
  font-style: normal !important;
  color: #c8925e !important;
  font-weight: 700 !important;
}


/* ══════════════════════════════════════════════════════════
   SECTION 2 — WHAT THIS BADGE MEANS
   White background. Left-aligned header. Three explainer rows
   separated by thin grey rules.
   DOM: .bs-pledge-meaning > .e-con-inner > [header + 3 rows]
   Each row: .bs-pledge-meaning-row > [col1: num | col2: title+body]
   ══════════════════════════════════════════════════════════ */

.bs-pledge-meaning {
  /* See hero note re: background-color cascade. Solid white via gradient layer. */
  background-image: linear-gradient(#ffffff, #ffffff) !important;
}
.bs-pledge-meaning > .e-con-inner {
  padding: 96px 40px !important;
  max-width: 1120px !important;
  margin: 0 auto !important;
}

/* ── Header block ─────────────────────────────────────────── */
.bs-pledge-meaning-header {
  max-width: 720px !important;
  margin: 0 0 56px !important;
  align-items: flex-start !important;
  text-align: left !important;
  padding: 0 !important;
}

/* Header H2 — neutralize any stray classes (e.g. bs-ci-results-heading) */
.bs-pledge-meaning-header .elementor-widget-heading {
  margin: 18px 0 16px !important;
  width: 100% !important;
}
.bs-pledge-meaning-header .elementor-widget-heading .elementor-widget-container {
  padding: 0 !important;
  margin: 0 !important;
}
.bs-pledge-meaning-header .elementor-heading-title {
  font-family: Verdana, Geneva, sans-serif !important;
  font-size: 1.875rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: #000000 !important;
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: 0 !important;
}

/* Header amber rule divider */
.bs-pledge-meaning-header .elementor-widget-divider .elementor-divider {
  text-align: left !important;
  padding: 0 !important;
}
.bs-pledge-meaning-header .elementor-widget-divider .elementor-divider-separator {
  width: 44px !important;
  border-top-width: 3px !important;
  border-top-color: #b0743e !important;
  border-top-style: solid !important;
  border-radius: 2px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Header lede paragraph (last text widget in header) */
.bs-pledge-meaning-header > .elementor-widget-text-editor:last-child .elementor-widget-container,
.bs-pledge-meaning-header > .elementor-widget:last-child.elementor-widget-text-editor .elementor-widget-container {
  padding: 0 !important;
}
.bs-pledge-meaning-header > .elementor-widget-text-editor:last-child p,
.bs-pledge-meaning-header > .elementor-widget:last-child.elementor-widget-text-editor p {
  font-size: 0.9375rem !important;
  line-height: 1.75 !important;
  color: #474747 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

/* Header section-label override — first widget in header should be left-aligned */
.bs-pledge-meaning-header .bs-section-label .elementor-widget-container p,
.bs-pledge-meaning-header .bs-section-label .elementor-widget-container div {
  text-align: left !important;
}

/* ── Explainer rows ───────────────────────────────────────── */
.bs-pledge-meaning-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 32px !important;
  padding: 32px 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
/* Row borders — Elementor or theme has a single-class rule that wins
   source order against .bs-pledge-meaning-row at (0,0,1,0). Prefix with
   body.page-id-27747 to bump specificity to (0,0,2,1) so we win clean.
   Every row gets a border-top (closes the top of the stack); the last
   row also gets border-bottom (closes the bottom). Don't use
   :first-of-type — the .bs-pledge-meaning-header div is the first <div>
   sibling, so :first-of-type matches it, not the first row. */
body.page-id-27747 .bs-pledge-meaning-row {
  border-top: 1px solid #e6e6e6 !important;
}
body.page-id-27747 .bs-pledge-meaning-row:last-of-type {
  border-bottom: 1px solid #e6e6e6 !important;
}

/* Row columns — first child is 60px number column, second is content */
.bs-pledge-meaning-row > .e-con:first-child {
  flex: 0 0 60px !important;
  width: 60px !important;
  min-width: 60px !important;
  padding: 0 !important;
  margin: 0 !important;
}
.bs-pledge-meaning-row > .e-con:nth-child(2) {
  flex: 1 1 auto !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
}

/* Number widget (01 / 02 / 03) */
.bs-pledge-meaning-num .elementor-widget-container {
  padding: 0 !important;
  margin: 0 !important;
}
.bs-pledge-meaning-num .elementor-widget-container p,
.bs-pledge-meaning-num .elementor-widget-container div {
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  color: #b0743e !important;
  padding-top: 3px !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* Row title (H3) */
.bs-pledge-meaning-row-title {
  margin: 0 !important;
  width: 100% !important;
}
.bs-pledge-meaning-row-title .elementor-widget-container {
  padding: 0 !important;
  margin: 0 !important;
}
.bs-pledge-meaning-row-title .elementor-heading-title {
  font-family: Verdana, Geneva, sans-serif !important;
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #1a1a1a !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  letter-spacing: 0 !important;
}

/* Row body paragraph */
.bs-pledge-meaning-row-body {
  margin: 0 !important;
  width: 100% !important;
}
.bs-pledge-meaning-row-body .elementor-widget-container {
  padding: 0 !important;
  margin: 0 !important;
}
.bs-pledge-meaning-row-body p,
.bs-pledge-meaning-row-body div {
  font-size: 0.875rem !important;
  line-height: 1.8 !important;
  color: #2e2e2e !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 680px !important;
}
.bs-pledge-meaning-row-body strong,
.bs-pledge-meaning-row-body b {
  color: #1a1a1a !important;
  font-weight: 700 !important;
}

/* Neutralize Microsoft Word paste pollution (TextRun, SCXW, NormalTextRun, etc.) */
.bs-pledge-meaning-row-body span,
.bs-pledge-meaning-row-body span span,
.bs-pledge-meaning-row-body span span span {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  background: transparent !important;
  background-color: transparent !important;
  text-decoration: none !important;
  border: none !important;
  text-shadow: none !important;
  font-style: inherit !important;
}
.bs-pledge-meaning-row-body span[data-contrast],
.bs-pledge-meaning-row-body span[lang],
.bs-pledge-meaning-row-body span[xml\:lang] {
  font-family: inherit !important;
}


/* ══════════════════════════════════════════════════════════
   SECTION 3 — WHAT SELLERS COMMIT TO
   Bronze 050 warm band. Centered header. Two parallel
   commitment cards + included/excluded comparison lists.
   ══════════════════════════════════════════════════════════ */

.bs-pledge-commit {
  background-image: linear-gradient(#f7eee5, #f7eee5) !important;
  border-top: 1px solid #efd9c0 !important;
  border-bottom: 1px solid #efd9c0 !important;
}
.bs-pledge-commit > .e-con-inner {
  padding: 96px 40px !important;
  max-width: 1120px !important;
  margin: 0 auto !important;
}

/* Section header — centered, max 720px */
.bs-pledge-commit > .e-con-inner > .e-con:first-child,
.bs-pledge-commit .bs-pledge-commit-header {
  max-width: 720px !important;
  margin: 0 auto 48px !important;
  align-items: center !important;
  text-align: center !important;
}
.bs-pledge-commit > .e-con-inner > .e-con:first-child .elementor-widget-heading {
  margin: 18px 0 16px !important;
  width: 100% !important;
}
.bs-pledge-commit > .e-con-inner > .e-con:first-child .elementor-heading-title {
  font-family: Verdana, Geneva, sans-serif !important;
  font-size: 1.875rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: #000000 !important;
  text-align: center !important;
  margin: 0 !important;
  letter-spacing: 0 !important;
}
.bs-pledge-commit > .e-con-inner > .e-con:first-child .elementor-divider-separator {
  width: 44px !important;
  border-top-width: 3px !important;
  border-top-color: #b0743e !important;
  border-radius: 2px !important;
  margin: 0 auto !important;
}
.bs-pledge-commit > .e-con-inner > .e-con:first-child .elementor-widget-text-editor:last-child p {
  font-size: 0.9375rem !important;
  line-height: 1.75 !important;
  color: #474747 !important;
  margin: 0 !important;
  text-align: center !important;
}

/* ── Two-part commitment cards ────────────────────────────── */
.bs-pledge-commit-parts {
  display: flex !important;
  flex-direction: row !important;
  gap: 18px !important;
  margin-bottom: 48px !important;
  align-items: stretch !important;
}
.bs-pledge-commit-parts > .e-con,
.bs-pledge-commit-part {
  flex: 1 1 0 !important;
  width: 100% !important;
}

.bs-pledge-commit-part {
  background-image: linear-gradient(#ffffff, #ffffff) !important;
  border: 1px solid #efd9c0 !important;
  border-radius: 10px !important;
  padding: 32px 30px !important;
  position: relative !important;
}

/* Big bronze-100 number top-right */
.bs-pledge-commit-part-num {
  position: absolute !important;
  top: 26px !important;
  right: 26px !important;
  width: auto !important;
  z-index: 1 !important;
}
.bs-pledge-commit-part-num .elementor-widget-container { padding: 0 !important; margin: 0 !important; }
.bs-pledge-commit-part-num .elementor-widget-container p,
.bs-pledge-commit-part-num .elementor-widget-container div {
  font-size: 2.25rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  color: #efd9c0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Card label (eyebrow) */
.bs-pledge-commit-part-label {
  margin-bottom: 10px !important;
}
.bs-pledge-commit-part-label .elementor-widget-container { padding: 0 !important; margin: 0 !important; }
.bs-pledge-commit-part-label .elementor-widget-container p,
.bs-pledge-commit-part-label .elementor-widget-container div {
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #8c5d31 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}

/* Card title */
.bs-pledge-commit-part-title {
  margin-bottom: 12px !important;
}
.bs-pledge-commit-part-title .elementor-widget-container { padding: 0 !important; margin: 0 !important; }
.bs-pledge-commit-part-title .elementor-heading-title {
  font-family: Verdana, Geneva, sans-serif !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #1a1a1a !important;
  margin: 0 !important;
  max-width: 280px !important;
  letter-spacing: 0 !important;
}

/* Card body */
.bs-pledge-commit-part-body .elementor-widget-container { padding: 0 !important; margin: 0 !important; }
.bs-pledge-commit-part-body p,
.bs-pledge-commit-part-body div {
  font-size: 0.875rem !important;
  line-height: 1.8 !important;
  color: #2e2e2e !important;
  margin: 0 !important;
  padding: 0 !important;
}
.bs-pledge-commit-part-body span,
.bs-pledge-commit-part-body span span {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  background: transparent !important;
}

/* ── Lists intro line ─────────────────────────────────────── */
.bs-pledge-commit-lists-intro {
  text-align: center !important;
  margin: 0 0 24px !important;
}
.bs-pledge-commit-lists-intro .elementor-widget-container { padding: 0 !important; margin: 0 !important; }
.bs-pledge-commit-lists-intro p,
.bs-pledge-commit-lists-intro div {
  font-size: 0.8125rem !important;
  letter-spacing: 0.04em !important;
  color: #474747 !important;
  text-align: center !important;
  margin: 0 !important;
}

/* ── Included / Excluded lists row ────────────────────────── */
.bs-pledge-commit-lists {
  display: flex !important;
  flex-direction: row !important;
  gap: 18px !important;
  align-items: stretch !important;
}
.bs-pledge-commit-lists > .e-con,
.bs-pledge-commit-lists > .elementor-widget-html {
  flex: 1 1 0 !important;
  width: 100% !important;
}

/* List card styling (markup inside HTML widget) */
.bs-pledge-commit-list {
  background-color: #ffffff !important;
  border: 1px solid #efd9c0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  height: 100% !important;
}
.bs-pledge-commit-list-head {
  padding: 18px 24px !important;
  border-bottom: 1px solid #efd9c0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.bs-pledge-commit-list--in .bs-pledge-commit-list-head { background-color: rgba(31,138,76,0.06) !important; }
.bs-pledge-commit-list--out .bs-pledge-commit-list-head { background-color: rgba(176,116,62,0.05) !important; }

.bs-pledge-commit-list-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.bs-pledge-commit-list--in .bs-pledge-commit-list-icon {
  background-color: rgba(31,138,76,0.12) !important;
  border: 1px solid rgba(31,138,76,0.3) !important;
}
.bs-pledge-commit-list--out .bs-pledge-commit-list-icon {
  background-color: rgba(176,116,62,0.13) !important;
  border: 1px solid rgba(176,116,62,0.3) !important;
}
.bs-pledge-commit-list-icon svg {
  width: 14px !important;
  height: 14px !important;
}

.bs-pledge-commit-list-title {
  font-family: Verdana, Geneva, sans-serif !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #1a1a1a !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

.bs-pledge-commit-list-items {
  list-style: none !important;
  padding: 12px 24px 22px !important;
  margin: 0 !important;
}
.bs-pledge-commit-list-items li {
  font-family: Verdana, Geneva, sans-serif !important;
  font-size: 0.8125rem !important;
  line-height: 1.6 !important;
  color: #2e2e2e !important;
  padding: 10px 0 !important;
  border-bottom: 1px dashed #efd9c0 !important;
  display: grid !important;
  grid-template-columns: 16px 1fr !important;
  gap: 10px !important;
  align-items: start !important;
  margin: 0 !important;
}
.bs-pledge-commit-list-items li:last-child { border-bottom: none !important; }
.bs-pledge-commit-list-items li::before {
  content: '' !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  margin-top: 9px !important;
}
.bs-pledge-commit-list--in .bs-pledge-commit-list-items li::before { background-color: #1f8a4c !important; }
.bs-pledge-commit-list--out .bs-pledge-commit-list-items li::before { background-color: #b0743e !important; }
.bs-pledge-commit-list-items strong {
  color: #1a1a1a !important;
  font-weight: 700 !important;
}


/* ══════════════════════════════════════════════════════════
   SECTION 4 — HOW IT WORKS
   Dark #252020 background. Top amber gradient line.
   Centered header + disclosure callout + 2×3 mechanism grid.
   ══════════════════════════════════════════════════════════ */

.bs-pledge-mechanism {
  background-image: linear-gradient(#252020, #252020) !important;
  position: relative !important;
}
.bs-pledge-mechanism::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(176,116,62,0.5), transparent) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.bs-pledge-mechanism > .e-con-inner {
  padding: 96px 40px !important;
  max-width: 1120px !important;
  margin: 0 auto !important;
}

/* Section header — centered, max 760px, mb 60px */
.bs-pledge-mechanism > .e-con-inner > .e-con:first-child {
  max-width: 760px !important;
  margin: 0 auto 60px !important;
  align-items: center !important;
  text-align: center !important;
}
.bs-pledge-mechanism > .e-con-inner > .e-con:first-child .elementor-widget-heading {
  margin: 0 0 18px !important;
  width: 100% !important;
}
.bs-pledge-mechanism > .e-con-inner > .e-con:first-child .elementor-heading-title {
  font-family: Verdana, Geneva, sans-serif !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  color: #ffffff !important;
  text-align: center !important;
  margin: 0 !important;
}
.bs-pledge-mechanism > .e-con-inner > .e-con:first-child h2 em {
  font-style: normal !important;
  color: #c8925e !important;
}

/* Mechanism label override (Bronze 300 on dark bg) */
.bs-pledge-mechanism-label {
  margin-bottom: 14px !important;
}
.bs-pledge-mechanism-label .elementor-widget-container p,
.bs-pledge-mechanism-label .elementor-widget-container div {
  color: #c8925e !important;
  text-align: center !important;
}

/* Lede */
.bs-pledge-mechanism-lede .elementor-widget-container { padding: 0 !important; margin: 0 !important; }
.bs-pledge-mechanism-lede p,
.bs-pledge-mechanism-lede div {
  font-size: 0.9375rem !important;
  line-height: 1.8 !important;
  color: rgba(255,255,255,0.7) !important;
  text-align: center !important;
  margin: 0 !important;
}
.bs-pledge-mechanism-lede strong { color: #ffffff !important; font-weight: 700 !important; }

/* ── Disclosure callout ───────────────────────────────────── */
.bs-pledge-mechanism-disclosure {
  background-image: linear-gradient(rgba(176,116,62,0.08), rgba(176,116,62,0.08)) !important;
  border: 1px solid rgba(176,116,62,0.25) !important;
  border-left: 3px solid #b0743e !important;
  border-radius: 10px !important;
  padding: 26px 30px !important;
  max-width: 760px !important;
  margin: 0 auto 64px !important;
}
.bs-pledge-mechanism-disclosure .elementor-widget-container { padding: 0 !important; margin: 0 !important; }
.bs-pledge-mechanism-disclosure-label {
  font-family: Verdana, Geneva, sans-serif !important;
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #c8925e !important;
  margin: 0 0 10px !important;
  line-height: 1.4 !important;
}
.bs-pledge-mechanism-disclosure-text {
  font-family: Verdana, Geneva, sans-serif !important;
  font-size: 0.875rem !important;
  line-height: 1.8 !important;
  color: rgba(255,255,255,0.86) !important;
  margin: 0 !important;
}
.bs-pledge-mechanism-disclosure-text strong {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* ── 2×3 Mechanism grid ───────────────────────────────────── */
.bs-pledge-mechanism-grid {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 18px !important;
  align-items: stretch !important;
}
.bs-pledge-mechanism-grid > .e-con,
.bs-pledge-mechanism-card {
  flex: 0 0 calc(50% - 9px) !important;
  width: calc(50% - 9px) !important;
  max-width: calc(50% - 9px) !important;
}

.bs-pledge-mechanism-card {
  background-image: linear-gradient(rgba(255,255,255,0.04), rgba(255,255,255,0.04)) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 10px !important;
  padding: 28px 28px 26px !important;
  transition: background-color 0.2s, border-color 0.2s !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}
.bs-pledge-mechanism-card:hover {
  background-image: linear-gradient(rgba(176,116,62,0.07), rgba(176,116,62,0.07)) !important;
  border-color: rgba(176,116,62,0.25) !important;
}

/* Icon container */
.bs-pledge-mechanism-card-icon {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  background-image: linear-gradient(rgba(176,116,62,0.13), rgba(176,116,62,0.13)) !important;
  border: 1px solid rgba(176,116,62,0.3) !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 0 18px !important;
  flex-shrink: 0 !important;
}
.bs-pledge-mechanism-card-icon .elementor-widget-container {
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.bs-pledge-mechanism-card-icon svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
}

/* Card title */
.bs-pledge-mechanism-card-title {
  margin: 0 0 10px !important;
  width: 100% !important;
}
.bs-pledge-mechanism-card-title .elementor-widget-container { padding: 0 !important; margin: 0 !important; }
.bs-pledge-mechanism-card-title .elementor-heading-title {
  font-family: Verdana, Geneva, sans-serif !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #ffffff !important;
  margin: 0 !important;
  letter-spacing: 0 !important;
}

/* Card body */
.bs-pledge-mechanism-card-body { width: 100% !important; }
.bs-pledge-mechanism-card-body .elementor-widget-container { padding: 0 !important; margin: 0 !important; }
.bs-pledge-mechanism-card-body p,
.bs-pledge-mechanism-card-body div {
  font-size: 0.84375rem !important;
  line-height: 1.75 !important;
  color: rgba(255,255,255,0.55) !important;
  margin: 0 !important;
}
.bs-pledge-mechanism-card-body strong {
  color: rgba(255,255,255,0.86) !important;
  font-weight: 700 !important;
}


/* ══════════════════════════════════════════════════════════
   SECTION 5 — THE FULL PLEDGE
   Neutral page bg. Centered header. White document card with
   bronze gradient top stripe. 4 numbered pledge points.
   ══════════════════════════════════════════════════════════ */

.bs-pledge-doc-section {
  background-image: linear-gradient(#fafafa, #fafafa) !important;
}
.bs-pledge-doc-section > .e-con-inner {
  padding: 96px 40px !important;
  max-width: 820px !important;
  margin: 0 auto !important;
}

/* Header */
.bs-pledge-doc-section > .e-con-inner > .e-con:first-child {
  align-items: center !important;
  text-align: center !important;
  margin: 0 0 40px !important;
}
.bs-pledge-doc-section > .e-con-inner > .e-con:first-child .elementor-widget-heading {
  margin: 18px 0 14px !important;
  width: 100% !important;
}
.bs-pledge-doc-section > .e-con-inner > .e-con:first-child .elementor-heading-title {
  font-family: Verdana, Geneva, sans-serif !important;
  font-size: 1.875rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: #000000 !important;
  text-align: center !important;
  margin: 0 !important;
}
.bs-pledge-doc-section > .e-con-inner > .e-con:first-child .elementor-divider-separator {
  width: 44px !important;
  border-top-width: 3px !important;
  border-top-color: #b0743e !important;
  border-radius: 2px !important;
  margin: 0 auto !important;
}

/* Version eyebrow */
.bs-pledge-doc-version {
  margin-bottom: 0 !important;
}
.bs-pledge-doc-version .elementor-widget-container { padding: 0 !important; margin: 0 !important; }
.bs-pledge-doc-version .elementor-widget-container p,
.bs-pledge-doc-version .elementor-widget-container div {
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #8c5d31 !important;
  text-align: center !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* ── Pledge document card ─────────────────────────────────── */
.bs-pledge-doc {
  background-image: linear-gradient(#ffffff, #ffffff) !important;
  border: 1px solid #e6e6e6 !important;
  border-radius: 10px !important;
  padding: 56px 60px 52px !important;
  position: relative !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.04) !important;
  overflow: hidden !important;
  align-items: stretch !important;
}
.bs-pledge-doc::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #c8925e, #b0743e, #c8925e) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Doc title */
.bs-pledge-doc-title {
  margin: 0 0 8px !important;
  width: 100% !important;
}
.bs-pledge-doc-title .elementor-widget-container { padding: 0 !important; margin: 0 !important; }
.bs-pledge-doc-title .elementor-heading-title {
  font-family: Verdana, Geneva, sans-serif !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #1a1a1a !important;
  text-align: center !important;
  letter-spacing: -0.005em !important;
  margin: 0 !important;
}
.bs-pledge-doc-em { color: #b0743e !important; }

/* Doc divider */
.bs-pledge-doc-divider {
  margin: 0 auto 28px !important;
  width: 100% !important;
}
.bs-pledge-doc-divider .elementor-widget-container { padding: 0 !important; margin: 0 !important; }
.bs-pledge-doc-divider .elementor-divider {
  text-align: center !important;
  padding: 0 !important;
}
.bs-pledge-doc-divider .elementor-divider-separator {
  width: 36px !important;
  border-top-width: 2px !important;
  border-top-color: #b0743e !important;
  border-radius: 2px !important;
  margin: 0 auto !important;
}

/* Affirm line */
.bs-pledge-doc-affirm {
  margin: 0 0 32px !important;
  width: 100% !important;
}
.bs-pledge-doc-affirm .elementor-widget-container { padding: 0 !important; margin: 0 !important; }
.bs-pledge-doc-affirm p,
.bs-pledge-doc-affirm div {
  font-size: 0.875rem !important;
  font-style: italic !important;
  color: #474747 !important;
  text-align: center !important;
  margin: 0 !important;
}

/* ── The 4 pledge points (HTML widget with <ol>) ──────────── */
.bs-pledge-doc-list-wrap .elementor-widget-container { padding: 0 !important; margin: 0 !important; }
.bs-pledge-doc-list {
  list-style: none !important;
  counter-reset: pledge !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.bs-pledge-doc-list li {
  counter-increment: pledge !important;
  display: grid !important;
  grid-template-columns: 36px 1fr !important;
  gap: 18px !important;
  align-items: start !important;
  padding-bottom: 22px !important;
  border-bottom: 1px dashed #efd9c0 !important;
  margin: 0 !important;
}
.bs-pledge-doc-list li:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}
.bs-pledge-doc-list li::before {
  content: counter(pledge) !important;
  width: 30px !important;
  height: 30px !important;
  background-color: #f7eee5 !important;
  border: 1px solid #efd9c0 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: Verdana, Geneva, sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  color: #b0743e !important;
  margin-top: 1px !important;
  flex-shrink: 0 !important;
}
.bs-pledge-doc-list p {
  font-family: Verdana, Geneva, sans-serif !important;
  font-size: 0.90625rem !important;
  line-height: 1.8 !important;
  color: #2e2e2e !important;
  margin: 0 !important;
  padding: 0 !important;
}
.bs-pledge-doc-list strong {
  color: #1a1a1a !important;
  font-weight: 700 !important;
}

/* ── Footnote below the card ──────────────────────────────── */
.bs-pledge-doc-footnote {
  margin-top: 32px !important;
  width: 100% !important;
}
.bs-pledge-doc-footnote .elementor-widget-container { padding: 0 !important; margin: 0 !important; }
.bs-pledge-doc-footnote p,
.bs-pledge-doc-footnote div {
  font-size: 0.75rem !important;
  line-height: 1.7 !important;
  color: #474747 !important;
  text-align: center !important;
  margin: 0 !important;
}


/* ══════════════════════════════════════════════════════════
   SECTION 6 — FOR SELLERS, HOW TO SIGN
   Bronze background with diagonal texture. Centered content.
   3-step grid + two pill buttons.
   ══════════════════════════════════════════════════════════ */

.bs-pledge-sign-cta {
  background-image: linear-gradient(#b0743e, #b0743e) !important;
  position: relative !important;
  overflow: hidden !important;
}
.bs-pledge-sign-cta::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: repeating-linear-gradient(-45deg, transparent, transparent 36px, rgba(0,0,0,0.04) 36px, rgba(0,0,0,0.04) 37px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.bs-pledge-sign-cta > .e-con-inner {
  padding: 96px 40px !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  text-align: center !important;
  align-items: center !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Label (white at 78%) */
.bs-pledge-sign-cta-label {
  margin-bottom: 16px !important;
}
.bs-pledge-sign-cta-label .elementor-widget-container p,
.bs-pledge-sign-cta-label .elementor-widget-container div {
  color: rgba(255,255,255,0.78) !important;
  text-align: center !important;
}

/* H2 */
.bs-pledge-sign-cta .elementor-widget-heading {
  width: 100% !important;
  margin-bottom: 18px !important;
}
.bs-pledge-sign-cta .elementor-heading-title {
  font-family: Verdana, Geneva, sans-serif !important;
  font-size: 1.875rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  color: #ffffff !important;
  text-align: center !important;
  margin: 0 !important;
}

/* Body */
.bs-pledge-sign-cta-body {
  margin-bottom: 36px !important;
  width: 100% !important;
}
.bs-pledge-sign-cta-body .elementor-widget-container { padding: 0 !important; margin: 0 !important; }
.bs-pledge-sign-cta-body p,
.bs-pledge-sign-cta-body div {
  font-size: 0.9375rem !important;
  line-height: 1.75 !important;
  color: rgba(255,255,255,0.88) !important;
  text-align: center !important;
  margin: 0 !important;
}

/* 3-step grid */
.bs-pledge-sign-cta-steps {
  display: flex !important;
  flex-direction: row !important;
  gap: 14px !important;
  margin-bottom: 40px !important;
  width: 100% !important;
  align-items: stretch !important;
}
.bs-pledge-sign-cta-steps > .e-con,
.bs-pledge-sign-cta-steps > .elementor-widget-html {
  flex: 1 1 0 !important;
  width: 100% !important;
}
/* Each step's outer .e-con-full wraps an HTML widget. The widget is
   flex: 0 1 auto by default — it sizes to its content, so shorter cards
   render shorter even though the outer container is flex-stretched.
   Force the HTML widget AND its widget-container to fill the column so
   the inner .bs-pledge-sign-cta-step's height: 100% has a parent to
   resolve against. Result: all 3 step cards render at equal height. */
.bs-pledge-sign-cta-steps > .e-con > .elementor-widget-html {
  flex: 1 1 auto !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
.bs-pledge-sign-cta-steps > .e-con > .elementor-widget-html > .elementor-widget-container {
  flex: 1 1 auto !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Step card markup (inside HTML widget) */
.bs-pledge-sign-cta-step {
  background-color: rgba(0,0,0,0.12) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 10px !important;
  padding: 20px 22px !important;
  height: 100% !important;
  text-align: left !important;
}
.bs-pledge-sign-cta-step-num {
  font-family: Verdana, Geneva, sans-serif !important;
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.7) !important;
  margin: 0 0 8px !important;
  line-height: 1.4 !important;
}
.bs-pledge-sign-cta-step-text {
  font-family: Verdana, Geneva, sans-serif !important;
  font-size: 0.8125rem !important;
  line-height: 1.6 !important;
  color: #ffffff !important;
  margin: 0 !important;
}
.bs-pledge-sign-cta-step-text strong { font-weight: 700 !important; }

/* Button row */
.bs-pledge-sign-cta-buttons {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 14px !important;
  width: 100% !important;
}
.bs-pledge-sign-cta-buttons .elementor-widget-button,
.bs-pledge-sign-cta-buttons > .elementor-button-wrapper { flex: 0 0 auto !important; }
.bs-pledge-sign-cta-buttons .elementor-button {
  border-radius: 50px !important;
  padding: 13px 30px !important;
  font-family: Verdana, Geneva, sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-width: 2px !important;
  border-style: solid !important;
  transition: background-color 0.18s, border-color 0.18s, color 0.18s !important;
}

/* Note below buttons */
.bs-pledge-sign-cta-note {
  margin-top: 18px !important;
  width: 100% !important;
}
.bs-pledge-sign-cta-note .elementor-widget-container { padding: 0 !important; margin: 0 !important; }
.bs-pledge-sign-cta-note p,
.bs-pledge-sign-cta-note div {
  font-size: 0.75rem !important;
  font-style: italic !important;
  color: rgba(255,255,255,0.72) !important;
  text-align: center !important;
  margin: 0 !important;
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE — 960px (tablet landscape)
   ══════════════════════════════════════════════════════════ */

@media (max-width: 960px) {
  /* Hero — slight padding reduction */
  .bs-pledge-hero > .e-con-inner { padding: 72px 48px 68px !important; }
  .bs-pledge-hero-badge,
  .bs-pledge-hero-badge .elementor-widget-container,
  .bs-pledge-hero-badge svg {
    width: 210px !important;
    height: 210px !important;
    min-width: 210px !important;
  }
  .bs-pledge-hero-badge { margin-bottom: 16px !important; flex-basis: 210px !important; }

  /* Section 3 — stack two-part cards and lists vertically */
  .bs-pledge-commit-parts,
  .bs-pledge-commit-lists {
    flex-direction: column !important;
    gap: 16px !important;
  }
  .bs-pledge-commit-parts > .e-con,
  .bs-pledge-commit-part,
  .bs-pledge-commit-lists > .e-con,
  .bs-pledge-commit-lists > .elementor-widget-html {
    flex: 1 1 auto !important;
    width: 100% !important;
  }

  /* Section 4 — mechanism grid single column */
  .bs-pledge-mechanism-grid > .e-con,
  .bs-pledge-mechanism-card {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Section 6 — step grid single column */
  .bs-pledge-sign-cta-steps {
    flex-direction: column !important;
  }
  .bs-pledge-sign-cta-steps > .e-con,
  .bs-pledge-sign-cta-steps > .elementor-widget-html {
    flex: 1 1 auto !important;
    width: 100% !important;
  }

  /* Pledge doc card padding reduction */
  .bs-pledge-doc { padding: 44px 40px !important; }
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE — 768px (tablet portrait)
   ══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .bs-pledge-hero > .e-con-inner { padding: 64px 40px 60px !important; }
  .bs-pledge-hero .elementor-heading-title { font-size: 2.25rem !important; }

  /* Section padding scale */
  .bs-pledge-meaning > .e-con-inner,
  .bs-pledge-commit > .e-con-inner,
  .bs-pledge-mechanism > .e-con-inner,
  .bs-pledge-doc-section > .e-con-inner,
  .bs-pledge-sign-cta > .e-con-inner {
    padding-top: 76px !important;
    padding-bottom: 76px !important;
  }
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE — 640px (large mobile)
   ══════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  /* Wrapper — tighter side padding */
  body.page-id-27747 .wd-content-layout {
    padding: 12px 12px 0 !important;
  }
  .bs-pledge-meaning,
  .bs-pledge-commit,
  .bs-pledge-mechanism,
  .bs-pledge-doc-section,
  .bs-pledge-sign-cta {
    margin-left: -12px !important;
    margin-right: -12px !important;
    width: calc(100% + 24px) !important;
    max-width: calc(100% + 24px) !important;
  }

  /* Hero — tighter, 8px radius */
  .bs-pledge-hero { border-radius: 8px !important; }
  .bs-pledge-hero > .e-con-inner { padding: 52px 24px 48px !important; }
  .bs-pledge-hero-eyebrow { margin-bottom: 14px !important; }
  .bs-pledge-hero-badge,
  .bs-pledge-hero-badge .elementor-widget-container,
  .bs-pledge-hero-badge svg {
    width: 180px !important;
    height: 180px !important;
    min-width: 180px !important;
  }
  .bs-pledge-hero-badge { margin-bottom: 14px !important; flex-basis: 180px !important; }

  /* Section padding (sides) */
  .bs-pledge-meaning > .e-con-inner,
  .bs-pledge-commit > .e-con-inner,
  .bs-pledge-mechanism > .e-con-inner,
  .bs-pledge-doc-section > .e-con-inner,
  .bs-pledge-sign-cta > .e-con-inner {
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  /* Section 2 — rows collapse to single column */
  .bs-pledge-meaning-row {
    flex-direction: column !important;
    gap: 6px !important;
    padding: 26px 0 !important;
  }
  .bs-pledge-meaning-row > .e-con:first-child {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Section 3 cards tighter */
  .bs-pledge-commit-part { padding: 28px 24px !important; }
  .bs-pledge-commit-part-num { font-size: 1.875rem !important; top: 22px !important; right: 22px !important; }
  .bs-pledge-commit-part-num .elementor-widget-container p,
  .bs-pledge-commit-part-num .elementor-widget-container div { font-size: 1.875rem !important; }
  .bs-pledge-commit-part-title .elementor-heading-title { font-size: 1rem !important; }

  /* Section 4 — disclosure tighter */
  .bs-pledge-mechanism-disclosure { padding: 22px 22px !important; }
  .bs-pledge-mechanism-card { padding: 24px 22px !important; }

  /* Section 5 — pledge doc card tighter */
  .bs-pledge-doc { padding: 36px 24px 32px !important; }
  .bs-pledge-doc-list li {
    grid-template-columns: 30px 1fr !important;
    gap: 14px !important;
    padding-bottom: 18px !important;
  }
  .bs-pledge-doc-list li::before {
    width: 26px !important;
    height: 26px !important;
    font-size: 0.75rem !important;
  }

  /* Section 6 — buttons stack */
  .bs-pledge-sign-cta-buttons {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .bs-pledge-sign-cta-buttons .elementor-widget-button,
  .bs-pledge-sign-cta-buttons > .elementor-button-wrapper { width: 100% !important; max-width: 300px !important; }
  .bs-pledge-sign-cta-buttons .elementor-button { width: 100% !important; justify-content: center !important; }
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE — 480px (small mobile)
   ══════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  body.page-id-27747 .wd-content-layout {
    padding: 10px 10px 0 !important;
  }
  .bs-pledge-meaning,
  .bs-pledge-commit,
  .bs-pledge-mechanism,
  .bs-pledge-doc-section,
  .bs-pledge-sign-cta {
    margin-left: -10px !important;
    margin-right: -10px !important;
    width: calc(100% + 20px) !important;
    max-width: calc(100% + 20px) !important;
  }

  .bs-pledge-hero { border-radius: 6px !important; }
  .bs-pledge-hero > .e-con-inner { padding: 44px 20px 40px !important; }
  .bs-pledge-hero .elementor-heading-title { font-size: 1.625rem !important; }
  .bs-pledge-hero-badge,
  .bs-pledge-hero-badge .elementor-widget-container,
  .bs-pledge-hero-badge svg {
    width: 150px !important;
    height: 150px !important;
    min-width: 150px !important;
  }
  .bs-pledge-hero-badge { flex-basis: 150px !important; }

  .bs-pledge-meaning > .e-con-inner,
  .bs-pledge-commit > .e-con-inner,
  .bs-pledge-mechanism > .e-con-inner,
  .bs-pledge-doc-section > .e-con-inner,
  .bs-pledge-sign-cta > .e-con-inner {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .bs-pledge-doc { padding: 28px 18px !important; }

  .bs-pledge-sign-cta-buttons .elementor-widget-button,
  .bs-pledge-sign-cta-buttons > .elementor-button-wrapper { max-width: 100% !important; }
}