.bkbg-lwl-wrap { width: 100%; box-sizing: border-box; } .bkbg-lwl-inner { margin: 0 auto; box-sizing: border-box; } .bkbg-lwl-inner.layout-centered { text-align: center; } .bkbg-lwl-badge { display: inline-block; border-radius: 24px; padding: 7px 18px; font-size: 14px; font-weight: 600; margin-bottom: 20px; } .bkbg-lwl-heading { font-family: var(--bkbg-lwl-h-font-family, inherit); font-weight: var(--bkbg-lwl-h-font-weight, 800); font-style: var(--bkbg-lwl-h-font-style, normal); text-decoration: var(--bkbg-lwl-h-text-decoration, none); text-transform: var(--bkbg-lwl-h-text-transform, none); font-size: var(--bkbg-lwl-h-font-size-d, clamp(28px,6vw,52px)); line-height: var(--bkbg-lwl-h-line-height-d, var(--bkbg-lwl-h-line-height, 1.15)); letter-spacing: var(--bkbg-lwl-h-letter-spacing-d, var(--bkbg-lwl-h-letter-spacing, 0px)); word-spacing: var(--bkbg-lwl-h-word-spacing-d, var(--bkbg-lwl-h-word-spacing, 0px)); margin: 0 0 16px; } .bkbg-lwl-inner h2.bkbg-lwl-heading, .bkbg-lwl-editor h2.bkbg-lwl-heading { font-family: var(--bkbg-lwl-h-font-family, inherit); font-weight: var(--bkbg-lwl-h-font-weight, 800); font-style: var(--bkbg-lwl-h-font-style, normal); text-decoration: var(--bkbg-lwl-h-text-decoration, none); text-transform: var(--bkbg-lwl-h-text-transform, none); font-size: var(--bkbg-lwl-h-font-size-d, clamp(28px,6vw,52px)); line-height: var(--bkbg-lwl-h-line-height-d, var(--bkbg-lwl-h-line-height, 1.15)); letter-spacing: var(--bkbg-lwl-h-letter-spacing-d, var(--bkbg-lwl-h-letter-spacing, 0px)); word-spacing: var(--bkbg-lwl-h-word-spacing-d, var(--bkbg-lwl-h-word-spacing, 0px)); } .bkbg-lwl-sub { font-family: var(--bkbg-lwl-st-font-family, inherit); font-weight: var(--bkbg-lwl-st-font-weight, 400); font-style: var(--bkbg-lwl-st-font-style, normal); text-decoration: var(--bkbg-lwl-st-text-decoration, none); text-transform: var(--bkbg-lwl-st-text-transform, none); font-size: var(--bkbg-lwl-st-font-size-d, 18px); line-height: var(--bkbg-lwl-st-line-height-d, var(--bkbg-lwl-st-line-height, 1.65)); letter-spacing: var(--bkbg-lwl-st-letter-spacing-d, var(--bkbg-lwl-st-letter-spacing, 0px)); word-spacing: var(--bkbg-lwl-st-word-spacing-d, var(--bkbg-lwl-st-word-spacing, 0px)); max-width: 560px; margin: 0 auto 32px; } .bkbg-lwl-inner.layout-split .bkbg-lwl-sub { margin-left: 0; } /* Countdown */ .bkbg-lwl-countdown { display: flex; justify-content: center; gap: 12px; margin-bottom: 36px; flex-wrap: wrap; } .bkbg-lwl-inner.layout-split .bkbg-lwl-countdown { justify-content: flex-start; } .bkbg-lwl-unit { border-radius: 12px; padding: 16px 20px; min-width: 80px; text-align: center; } .bkbg-lwl-num { font-size: 36px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } .bkbg-lwl-label { font-size: 11px; letter-spacing: 0.1em; margin-top: 5px; } /* Form */ .bkbg-lwl-form-wrap { display: flex; max-width: 500px; margin: 0 auto 28px; border-radius: 10px; overflow: hidden; border-width: 1px; border-style: solid; } .bkbg-lwl-inner.layout-split .bkbg-lwl-form-wrap { margin-left: 0; } .bkbg-lwl-input { flex: 1; border: none; padding: 14px 18px; font-size: 15px; outline: none; min-width: 0; } .bkbg-lwl-submit { font-family: var(--bkbg-lwl-bt-font-family, inherit); font-weight: var(--bkbg-lwl-bt-font-weight, 700); font-style: var(--bkbg-lwl-bt-font-style, normal); text-decoration: var(--bkbg-lwl-bt-text-decoration, none); text-transform: var(--bkbg-lwl-bt-text-transform, none); font-size: var(--bkbg-lwl-bt-font-size-d, 15px); line-height: var(--bkbg-lwl-bt-line-height-d, var(--bkbg-lwl-bt-line-height, 1.4)); letter-spacing: var(--bkbg-lwl-bt-letter-spacing-d, var(--bkbg-lwl-bt-letter-spacing, 0px)); word-spacing: var(--bkbg-lwl-bt-word-spacing-d, var(--bkbg-lwl-bt-word-spacing, 0px)); border: none; padding: 14px 22px; cursor: pointer; white-space: nowrap; transition: opacity 0.2s; } .bkbg-lwl-submit:hover { opacity: 0.9; } .bkbg-lwl-success { display: none; padding: 16px; border-radius: 10px; font-size: 15px; font-weight: 600; max-width: 500px; margin: 0 auto 28px; } /* Benefits */ .bkbg-lwl-benefits { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; } .bkbg-lwl-inner.layout-split .bkbg-lwl-benefits { justify-content: flex-start; } .bkbg-lwl-benefit { font-size: 14px; display: flex; align-items: center; gap: 7px; } .bkbg-lwl-social-proof { font-size: 14px; margin: 0; } /* Typography – responsive */ @media (max-width: 1024px) { .bkbg-lwl-inner .bkbg-lwl-heading { font-size: var(--bkbg-lwl-h-font-size-t, var(--bkbg-lwl-h-font-size-d, clamp(28px,6vw,52px))); line-height: var(--bkbg-lwl-h-line-height-t, var(--bkbg-lwl-h-line-height-d, 1.15));letter-spacing:var(--bkbg-lwl-h-letter-spacing-t, var(--bkbg-lwl-h-letter-spacing-d, var(--bkbg-lwl-h-letter-spacing, 0px)));word-spacing:var(--bkbg-lwl-h-word-spacing-t, var(--bkbg-lwl-h-word-spacing-d, var(--bkbg-lwl-h-word-spacing, 0px)))} .bkbg-lwl-inner .bkbg-lwl-sub { font-size: var(--bkbg-lwl-st-font-size-t, var(--bkbg-lwl-st-font-size-d, 18px)); line-height: var(--bkbg-lwl-st-line-height-t, var(--bkbg-lwl-st-line-height-d, 1.65));letter-spacing:var(--bkbg-lwl-st-letter-spacing-t, var(--bkbg-lwl-st-letter-spacing-d, var(--bkbg-lwl-st-letter-spacing, 0px)));word-spacing:var(--bkbg-lwl-st-word-spacing-t, var(--bkbg-lwl-st-word-spacing-d, var(--bkbg-lwl-st-word-spacing, 0px)))} .bkbg-lwl-inner .bkbg-lwl-submit { font-size: var(--bkbg-lwl-bt-font-size-t, var(--bkbg-lwl-bt-font-size-d, 15px)); line-height: var(--bkbg-lwl-bt-line-height-t, var(--bkbg-lwl-bt-line-height-d, 1.4));letter-spacing:var(--bkbg-lwl-bt-letter-spacing-t, var(--bkbg-lwl-bt-letter-spacing-d, var(--bkbg-lwl-bt-letter-spacing, 0px)));word-spacing:var(--bkbg-lwl-bt-word-spacing-t, var(--bkbg-lwl-bt-word-spacing-d, var(--bkbg-lwl-bt-word-spacing, 0px)))} } @media (max-width: 767px) { .bkbg-lwl-inner .bkbg-lwl-heading { font-size: var(--bkbg-lwl-h-font-size-m, var(--bkbg-lwl-h-font-size-t, var(--bkbg-lwl-h-font-size-d, clamp(28px,6vw,52px)))); line-height: var(--bkbg-lwl-h-line-height-m, var(--bkbg-lwl-h-line-height-t, var(--bkbg-lwl-h-line-height-d, 1.15)));letter-spacing:var(--bkbg-lwl-h-letter-spacing-m, var(--bkbg-lwl-h-letter-spacing-t, var(--bkbg-lwl-h-letter-spacing-d, var(--bkbg-lwl-h-letter-spacing, 0px))));word-spacing:var(--bkbg-lwl-h-word-spacing-m, var(--bkbg-lwl-h-word-spacing-t, var(--bkbg-lwl-h-word-spacing-d, var(--bkbg-lwl-h-word-spacing, 0px))))} .bkbg-lwl-inner .bkbg-lwl-sub { font-size: var(--bkbg-lwl-st-font-size-m, var(--bkbg-lwl-st-font-size-t, var(--bkbg-lwl-st-font-size-d, 18px))); line-height: var(--bkbg-lwl-st-line-height-m, var(--bkbg-lwl-st-line-height-t, var(--bkbg-lwl-st-line-height-d, 1.65)));letter-spacing:var(--bkbg-lwl-st-letter-spacing-m, var(--bkbg-lwl-st-letter-spacing-t, var(--bkbg-lwl-st-letter-spacing-d, var(--bkbg-lwl-st-letter-spacing, 0px))));word-spacing:var(--bkbg-lwl-st-word-spacing-m, var(--bkbg-lwl-st-word-spacing-t, var(--bkbg-lwl-st-word-spacing-d, var(--bkbg-lwl-st-word-spacing, 0px))))} .bkbg-lwl-inner .bkbg-lwl-submit { font-size: var(--bkbg-lwl-bt-font-size-m, var(--bkbg-lwl-bt-font-size-t, var(--bkbg-lwl-bt-font-size-d, 15px))); line-height: var(--bkbg-lwl-bt-line-height-m, var(--bkbg-lwl-bt-line-height-t, var(--bkbg-lwl-bt-line-height-d, 1.4)));letter-spacing:var(--bkbg-lwl-bt-letter-spacing-m, var(--bkbg-lwl-bt-letter-spacing-t, var(--bkbg-lwl-bt-letter-spacing-d, var(--bkbg-lwl-bt-letter-spacing, 0px))));word-spacing:var(--bkbg-lwl-bt-word-spacing-m, var(--bkbg-lwl-bt-word-spacing-t, var(--bkbg-lwl-bt-word-spacing-d, var(--bkbg-lwl-bt-word-spacing, 0px))))} } /* Split layout */ .bkbg-lwl-split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } @media (max-width: 860px) { .bkbg-lwl-split-grid { grid-template-columns: 1fr; } .bkbg-lwl-inner.layout-split .bkbg-lwl-sub, .bkbg-lwl-inner.layout-split .bkbg-lwl-form-wrap, .bkbg-lwl-inner.layout-split .bkbg-lwl-benefits, .bkbg-lwl-inner.layout-split .bkbg-lwl-countdown { margin-left: auto; } .bkbg-lwl-inner.layout-split { text-align: center; } .bkbg-lwl-inner.layout-split .bkbg-lwl-benefits { justify-content: center; } }