.bkbg-aff-wrap { width: 100%; box-sizing: border-box; } .bkbg-aff-inner { margin: 0 auto; box-sizing: border-box; } .bkbg-aff-eyebrow { font-family: var(--bkbg-aff-eyebrow-font-family, inherit); font-weight: var(--bkbg-aff-eyebrow-font-weight, 600); font-style: var(--bkbg-aff-eyebrow-font-style, normal); text-transform: var(--bkbg-aff-eyebrow-text-transform, uppercase); text-decoration: var(--bkbg-aff-eyebrow-text-decoration, none); font-size: var(--bkbg-aff-eyebrow-font-size-d, var(--bkbg-aff-eyebrow-font-size, var(--bkbg-aff-eyebrow-sz, 13px))); line-height: var(--bkbg-aff-eyebrow-line-height-d, var(--bkbg-aff-eyebrow-line-height, normal)); letter-spacing: var(--bkbg-aff-eyebrow-letter-spacing-d, var(--bkbg-aff-eyebrow-letter-spacing, 0.1em)); word-spacing: var(--bkbg-aff-eyebrow-word-spacing-d, var(--bkbg-aff-eyebrow-word-spacing, normal)); margin: 0 0 8px; } .bkbg-aff-heading { font-family: var(--bkbg-aff-heading-font-family, inherit); font-weight: var(--bkbg-aff-heading-font-weight, 700); font-style: var(--bkbg-aff-heading-font-style, normal); text-transform: var(--bkbg-aff-heading-text-transform, none); text-decoration: var(--bkbg-aff-heading-text-decoration, none); font-size: var(--bkbg-aff-heading-font-size-d, var(--bkbg-aff-heading-font-size, var(--bkbg-aff-heading-sz, 38px))); line-height: var(--bkbg-aff-heading-line-height-d, var(--bkbg-aff-heading-line-height, normal)); letter-spacing: var(--bkbg-aff-heading-letter-spacing-d, var(--bkbg-aff-heading-letter-spacing, normal)); word-spacing: var(--bkbg-aff-heading-word-spacing-d, var(--bkbg-aff-heading-word-spacing, normal)); margin: 0 0 16px; } .bkbg-aff-sub { font-family: var(--bkbg-aff-subtext-font-family, inherit); font-weight: var(--bkbg-aff-subtext-font-weight, normal); font-style: var(--bkbg-aff-subtext-font-style, normal); text-transform: var(--bkbg-aff-subtext-text-transform, none); text-decoration: var(--bkbg-aff-subtext-text-decoration, none); font-size: var(--bkbg-aff-subtext-font-size-d, var(--bkbg-aff-subtext-font-size, var(--bkbg-aff-subtext-sz, 18px))); line-height: var(--bkbg-aff-subtext-line-height-d, var(--bkbg-aff-subtext-line-height, 1.6)); letter-spacing: var(--bkbg-aff-subtext-letter-spacing-d, var(--bkbg-aff-subtext-letter-spacing, normal)); word-spacing: var(--bkbg-aff-subtext-word-spacing-d, var(--bkbg-aff-subtext-word-spacing, normal)); margin: 0 auto; max-width: 620px; } .bkbg-aff-text-block { text-align: center; margin-bottom: 32px; } .bkbg-aff-commission { text-align: center; margin-bottom: 40px; } .bkbg-aff-commission-badge { display: inline-block; border-radius: 16px; padding: 28px 56px; } .bkbg-aff-commission-value { font-size: 72px; font-weight: 800; line-height: 1; } .bkbg-aff-commission-label { font-size: 18px; font-weight: 600; margin-top: 6px; } .bkbg-aff-commission-note { font-size: 13px; opacity: 0.8; margin-top: 4px; } .bkbg-aff-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 40px; } @media (max-width: 768px) { .bkbg-aff-steps { grid-template-columns: 1fr; } } .bkbg-aff-step-card { border-radius: 12px; padding: 28px 24px; text-align: center; } .bkbg-aff-step-icon { font-size: 44px; margin-bottom: 14px; } .bkbg-aff-step-title { font-size: 18px; font-weight: 700; margin-bottom: 10px; } .bkbg-aff-step-desc { font-size: 15px; line-height: 1.6; } .bkbg-aff-benefits { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 36px; } .bkbg-aff-benefit { display: flex; align-items: center; gap: 8px; font-size: 15px; } .bkbg-aff-benefit-check { font-style: normal; font-weight: 700; } .bkbg-aff-stats { display: flex; justify-content: center; gap: 48px; margin-bottom: 40px; flex-wrap: wrap; } .bkbg-aff-stat { text-align: center; } .bkbg-aff-stat-num { font-size: 36px; font-weight: 800; line-height: 1.1; } .bkbg-aff-stat-label { font-size: 14px; margin-top: 4px; } .bkbg-aff-ctas { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; } .bkbg-aff-cta-primary { display: inline-block; padding: 14px 36px; border-radius: 8px; font-weight: 700; font-size: 16px; text-decoration: none; transition: opacity 0.2s; } .bkbg-aff-cta-primary:hover { opacity: 0.9; } .bkbg-aff-cta-secondary { display: inline-block; padding: 14px 36px; border-radius: 8px; font-weight: 600; font-size: 16px; text-decoration: none; border-width: 2px; border-style: solid; transition: opacity 0.2s; } .bkbg-aff-cta-secondary:hover { opacity: 0.85; } /* ── Responsive typography ── */ @media (max-width: 1024px) { .bkbg-aff-eyebrow { font-size: var(--bkbg-aff-eyebrow-font-size-t, var(--bkbg-aff-eyebrow-font-size-d, var(--bkbg-aff-eyebrow-font-size, var(--bkbg-aff-eyebrow-sz, 13px)))); line-height: var(--bkbg-aff-eyebrow-line-height-t, var(--bkbg-aff-eyebrow-line-height-d, var(--bkbg-aff-eyebrow-line-height, normal))); letter-spacing: var(--bkbg-aff-eyebrow-letter-spacing-t, var(--bkbg-aff-eyebrow-letter-spacing-d, var(--bkbg-aff-eyebrow-letter-spacing, 0.1em))); word-spacing: var(--bkbg-aff-eyebrow-word-spacing-t, var(--bkbg-aff-eyebrow-word-spacing-d, var(--bkbg-aff-eyebrow-word-spacing, normal))); } .bkbg-aff-heading { font-size: var(--bkbg-aff-heading-font-size-t, var(--bkbg-aff-heading-font-size-d, var(--bkbg-aff-heading-font-size, var(--bkbg-aff-heading-sz, 38px)))); line-height: var(--bkbg-aff-heading-line-height-t, var(--bkbg-aff-heading-line-height-d, var(--bkbg-aff-heading-line-height, normal))); letter-spacing: var(--bkbg-aff-heading-letter-spacing-t, var(--bkbg-aff-heading-letter-spacing-d, var(--bkbg-aff-heading-letter-spacing, normal))); word-spacing: var(--bkbg-aff-heading-word-spacing-t, var(--bkbg-aff-heading-word-spacing-d, var(--bkbg-aff-heading-word-spacing, normal))); } .bkbg-aff-sub { font-size: var(--bkbg-aff-subtext-font-size-t, var(--bkbg-aff-subtext-font-size-d, var(--bkbg-aff-subtext-font-size, var(--bkbg-aff-subtext-sz, 18px)))); line-height: var(--bkbg-aff-subtext-line-height-t, var(--bkbg-aff-subtext-line-height-d, var(--bkbg-aff-subtext-line-height, 1.6))); letter-spacing: var(--bkbg-aff-subtext-letter-spacing-t, var(--bkbg-aff-subtext-letter-spacing-d, var(--bkbg-aff-subtext-letter-spacing, normal))); word-spacing: var(--bkbg-aff-subtext-word-spacing-t, var(--bkbg-aff-subtext-word-spacing-d, var(--bkbg-aff-subtext-word-spacing, normal))); } } @media (max-width: 767px) { .bkbg-aff-eyebrow { font-size: var(--bkbg-aff-eyebrow-font-size-m, var(--bkbg-aff-eyebrow-font-size-t, var(--bkbg-aff-eyebrow-font-size-d, var(--bkbg-aff-eyebrow-font-size, var(--bkbg-aff-eyebrow-sz, 13px))))); line-height: var(--bkbg-aff-eyebrow-line-height-m, var(--bkbg-aff-eyebrow-line-height-t, var(--bkbg-aff-eyebrow-line-height-d, var(--bkbg-aff-eyebrow-line-height, normal)))); letter-spacing: var(--bkbg-aff-eyebrow-letter-spacing-m, var(--bkbg-aff-eyebrow-letter-spacing-t, var(--bkbg-aff-eyebrow-letter-spacing-d, var(--bkbg-aff-eyebrow-letter-spacing, 0.1em)))); word-spacing: var(--bkbg-aff-eyebrow-word-spacing-m, var(--bkbg-aff-eyebrow-word-spacing-t, var(--bkbg-aff-eyebrow-word-spacing-d, var(--bkbg-aff-eyebrow-word-spacing, normal)))); } .bkbg-aff-heading { font-size: var(--bkbg-aff-heading-font-size-m, var(--bkbg-aff-heading-font-size-t, var(--bkbg-aff-heading-font-size-d, var(--bkbg-aff-heading-font-size, var(--bkbg-aff-heading-sz, 38px))))); line-height: var(--bkbg-aff-heading-line-height-m, var(--bkbg-aff-heading-line-height-t, var(--bkbg-aff-heading-line-height-d, var(--bkbg-aff-heading-line-height, normal)))); letter-spacing: var(--bkbg-aff-heading-letter-spacing-m, var(--bkbg-aff-heading-letter-spacing-t, var(--bkbg-aff-heading-letter-spacing-d, var(--bkbg-aff-heading-letter-spacing, normal)))); word-spacing: var(--bkbg-aff-heading-word-spacing-m, var(--bkbg-aff-heading-word-spacing-t, var(--bkbg-aff-heading-word-spacing-d, var(--bkbg-aff-heading-word-spacing, normal)))); } .bkbg-aff-sub { font-size: var(--bkbg-aff-subtext-font-size-m, var(--bkbg-aff-subtext-font-size-t, var(--bkbg-aff-subtext-font-size-d, var(--bkbg-aff-subtext-font-size, var(--bkbg-aff-subtext-sz, 18px))))); line-height: var(--bkbg-aff-subtext-line-height-m, var(--bkbg-aff-subtext-line-height-t, var(--bkbg-aff-subtext-line-height-d, var(--bkbg-aff-subtext-line-height, 1.6)))); letter-spacing: var(--bkbg-aff-subtext-letter-spacing-m, var(--bkbg-aff-subtext-letter-spacing-t, var(--bkbg-aff-subtext-letter-spacing-d, var(--bkbg-aff-subtext-letter-spacing, normal)))); word-spacing: var(--bkbg-aff-subtext-word-spacing-m, var(--bkbg-aff-subtext-word-spacing-t, var(--bkbg-aff-subtext-word-spacing-d, var(--bkbg-aff-subtext-word-spacing, normal)))); } }