/* Breakthrough announcement engine — base chrome. Campaign body_css layers on top. */ .bbdoc-root { position: fixed; z-index: 2147483000; } .bbdoc-overlay { position: fixed; inset: 0; background: rgba(15, 20, 32, 0.62); opacity: 0; transition: opacity .3s ease; } .bbdoc-root.bbdoc-visible .bbdoc-overlay { opacity: 1; } .bbdoc-close { position: absolute; top: 8px; right: 8px; z-index: 5; width: 32px; height: 32px; line-height: 32px; text-align: center; font-size: 26px; font-weight: 700; color: #8b93a3; background: transparent; border: 0; cursor: pointer; border-radius: 50%; transition: background .15s, color .15s; } .bbdoc-close:hover { background: var(--bbdoc-close-hbg, rgba(0,0,0,.07)); color: var(--bbdoc-close-hcolor, #1c2433); } .bbdoc-box { position: relative; background: #fff; box-sizing: border-box; box-shadow: 0 18px 60px rgba(8, 15, 30, .35); font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; } .bbdoc-body { padding: 0; } /* simple/admin popups (no per-row backgrounds) still get comfortable padding. Scoped to announcements (.bbdoc-root) — document surfaces (.bbdoc-doc: sales/upsell/content) render full-width with no first/last inset. */ .bbdoc-root .bbdoc-body > .bbdoc-text:first-child, .bbdoc-root .bbdoc-body > form { padding-left: 26px; padding-right: 26px; } /* ── builder layout (rows/columns/text/image faithfully ported from OM) ── */ .bbdoc-row { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 0; } /* OM top-aligns column content (alignItems:flex-start, no justifyContent) */ .bbdoc-col { flex: 1 1 0; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-start; } /* figures in a column shrink-wrap to the image: drop the UA
margin (40px sides, 1em top/bottom) so a side-by-side image col is exactly the image's box. */ .bbdoc-col .bbdoc-figure { margin: 0; } .bbdoc-text { } /* inline styles from OM rawHTML carry the typography */ /* OM resets element margins to 0 — line spacing comes from inline line-height and per-block margins, NOT

margins. Keep ours out of the way (else the code box reads bottom-heavy and paragraphs over-space). */ .bbdoc-body .bbdoc-text p, .bbdoc-body .bbdoc-text h1, .bbdoc-body .bbdoc-text h2, .bbdoc-body .bbdoc-text h3, .bbdoc-body .bbdoc-text h4 { margin: 0; } .bbdoc-text ul { margin: .5em 0; padding-left: 22px; text-align: left; } .bbdoc-text li { margin: .3em 0; } /* Headings: pin to a real Oswald weight (Oswald tops out at 700 — UA

bold plus a nested resolves to "bolder"=900, which Oswald lacks, so the browser faux-bolds it and renders inconsistently). / inside a heading inherit so they don't push past 700. A per-block weight still overrides. */ .bbdoc-text h1, .bbdoc-text h2, .bbdoc-text h3, .bbdoc-text h4 { font-family: var(--bb-font-heading); font-weight: 700; } .bbdoc-text h1 { font-size: var(--bb-size-h1); } .bbdoc-text h2 { font-size: var(--bb-size-h2); } .bbdoc-text h3 { font-size: var(--bb-size-h3); } .bbdoc-text h4 { font-size: var(--bb-size-h4); } .bbdoc-text h1 b, .bbdoc-text h1 strong, .bbdoc-text h2 b, .bbdoc-text h2 strong, .bbdoc-text h3 b, .bbdoc-text h3 strong, .bbdoc-text h4 b, .bbdoc-text h4 strong { font-weight: inherit; } /* Default paragraph rhythm for long-form doc surfaces (upsell/sales/content); announcements (.bbdoc-root, short) keep tight spacing. A per-block mb overrides. */ .bbdoc-doc .bbdoc-text { margin-bottom: .85em; } .bbdoc-doc .bbdoc-text:last-child { margin-bottom: 0; } .bbdoc-img { max-width: 100%; height: auto; display: block; margin: 0 auto; } .bbdoc-button { display: inline-block; } /* evergreen countdown timer — the blue pill (cell) wraps number + label */ .bbdoc-countdown { display: flex; gap: 0; justify-content: center; align-items: center; } .bbdoc-cd-cell { line-height: 1.05; } /* inline style adds the blue pill + inline-block */ .bbdoc-cd-num { display: block; line-height: 1; } .bbdoc-cd-unit { display: block; font-style: normal; margin-top: 2px; } /* section-bg campaigns: rows paint their own background, so no body padding (no frame) */ .bbdoc-fullbleed .bbdoc-body { padding: 0 !important; } /* teaser/toggle slide: a small clickable bar that auto-expands to the slide */ .bbdoc-teaser { position: fixed; right: 18px; bottom: 18px; display: none; cursor: pointer; text-align: center; line-height: 1.2; z-index: 1; max-width: calc(100vw - 24px); } .bbdoc-has-teaser .bbdoc-teaser { display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; } .bbdoc-teaser-plus { margin-left: 10px; font-weight: 700; line-height: 1; opacity: .95; } .bbdoc-has-teaser .bbdoc-box { display: none; } @media (max-width: 600px) { .bbdoc-teaser { right: 0; left: 0; bottom: 0; } } /* collapsed "close" slide: show only the first heading as a clickable tab */ .bbdoc-collapsed .bbdoc-box { cursor: pointer; } .bbdoc-collapsed .bbdoc-body, .bbdoc-collapsed .bbdoc-row { padding: 0 !important; } .bbdoc-collapsed .bbdoc-col { padding: 12px 18px !important; } .bbdoc-collapsed .bbdoc-col > *:not(:first-child) { display: none !important; } /* honeypot fields (OM's hidden anti-spam inputs) must stay in the form & submit, but never be visible — pin them off-screen regardless of inherited input styles */ .bbdoc-body .honeycontainer, .bbdoc-body input.filpot, .bbdoc-body input.emtpot { position: absolute !important; left: -9999px !important; top: auto !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; opacity: 0 !important; border: 0 !important; } .bbdoc-body form { margin: 12px 0 0; } @media (max-width: 600px) { .bbdoc-row { flex-direction: column; } .bbdoc-col { flex: 1 1 100% !important; max-width: 100% !important; } } /* ── centered announcement ── */ .bbdoc-type-center, .bbdoc-type-fullscreen { inset: 0; display: flex; align-items: center; justify-content: center; } .bbdoc-type-center .bbdoc-box { width: 560px; max-width: calc(100vw - 28px); max-height: calc(100vh - 28px); overflow: auto; border-radius: 12px; transform: translateY(14px) scale(.98); opacity: 0; transition: transform .3s ease, opacity .3s ease; } .bbdoc-type-center.bbdoc-visible .bbdoc-box { transform: none; opacity: 1; } /* ── fullscreen ── */ .bbdoc-type-fullscreen .bbdoc-overlay { background: rgba(15, 20, 32, .96); } .bbdoc-type-fullscreen .bbdoc-box { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: auto; opacity: 0; transition: opacity .3s ease; } .bbdoc-type-fullscreen.bbdoc-visible .bbdoc-box { opacity: 1; } /* ── slide-in (bottom-right) ── */ .bbdoc-type-slide { right: 18px; bottom: 18px; left: auto; top: auto; max-width: calc(100vw - 24px); } .bbdoc-type-slide .bbdoc-box { width: 360px; max-width: calc(100vw - 24px); border-radius: 12px; transform: translateY(120%); transition: transform .4s cubic-bezier(.2,.8,.2,1); } .bbdoc-type-slide.bbdoc-visible .bbdoc-box { transform: none; } .bbdoc-type-slide .bbdoc-body { padding: 26px 22px 22px; } /* ── floating bar (top) ── */ .bbdoc-type-floating { left: 0; right: 0; top: 0; bottom: auto; } .bbdoc-type-floating .bbdoc-box { width: 100%; border-radius: 0; box-shadow: 0 4px 18px rgba(8,15,30,.2); transform: translateY(-100%); transition: transform .35s ease; } .bbdoc-type-floating.bbdoc-visible .bbdoc-box { transform: none; } .bbdoc-type-floating .bbdoc-body { padding: 12px 54px 12px 22px; text-align: center; } .bbdoc-type-floating .bbdoc-close { top: 50%; transform: translateY(-50%); } /* ── default body typography (overridable by campaign body_css) ── */ .bbdoc-body h2 { margin: 0 0 10px; font-size: 26px; line-height: 1.2; color: #14213d; } .bbdoc-body p { margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: #44506a; } .bbdoc-body form { margin: 0; } /* Form-control styling lives in the .bbdoc-field / .bbdoc-button component classes below (single source of truth). OM-class inputs keep their own style-2018wf.css rules. */ .bbdoc-body .bbdoc-fineprint { font-size: 12px; color: #8b93a3; margin: 10px 0 0; text-align: center; } /* page scroll-lock for modal types */ body.bbdoc-open-center, body.bbdoc-open-fullscreen { overflow: hidden; } @media (max-width: 600px) { .bbdoc-type-center .bbdoc-box { width: calc(100vw - 20px); } .bbdoc-type-slide { right: 0; left: 0; bottom: 0; } /* !important so the full-width bottom sheet beats the inline box.style.width the engine sets from settings.width (e.g. the 300px hoops slide). */ .bbdoc-type-slide .bbdoc-box { width: 100% !important; border-radius: 12px 12px 0 0; } /* mobile popup body padding — announcements only; document surfaces (.bbdoc-doc) fill the page column with no extra inset, matching the legacy letters. */ .bbdoc-root .bbdoc-body { padding: 30px 20px 22px; } } /* ── OM form-control styles (copied from style-2018wf.css, scoped) so popups are self-contained and the admin editor preview styles identically ── */ /* OM forms assume border-box. Force it so a host page without the box-sizing reset can't make the width:100% + padding inputs overflow the popup (the live content pages lacked the reset the admin backend has). */ .bbdoc-box input, .bbdoc-box select, .bbdoc-box button, .bbdoc-box textarea { box-sizing: border-box !important; } .bbdoc-body input.omtextinput { color: #666878 !important; font-size: 20px !important; font-weight: 700 !important; font-family: Lato !important; background: #f9fbff !important; border-style: solid !important; border-color: rgba(60, 91, 151, 0.28) !important; border-top-width: 2px !important; border-right-width: 2px !important; border-bottom-width: 2px !important; border-left-width: 2px !important; border-top-left-radius: 5px !important; border-top-right-radius: 5px !important; border-bottom-right-radius: 5px !important; border-bottom-left-radius: 5px !important; display: block !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 10px !important; margin-left: 0px !important; padding-top: 0px !important; padding-right: 20px !important; padding-bottom: 0px !important; padding-left: 20px !important; max-width: 100% !important; width: 100% !important; height: auto !important; line-height: normal !important; } .bbdoc-body input.omsubmitbutton { background: #0ac208 !important; border-bottom-left-radius: 5px !important; border-bottom-right-radius: 5px !important; border-bottom-width: 0px !important; border-color: rgba(0,0,0,.35) !important; border-left-width: 0px !important; border-right-width: 0px !important; border-style: none !important; border-top-left-radius: 5px !important; border-top-right-radius: 5px !important; border-top-width: 0px !important; box-shadow: 0px 0px 0px 0px #ffffff !important; color: #ffffff !important; font-family: Lato !important; font-size: 23px !important; font-weight: 800 !important; -webkit-letter-spacing: 0 !important; -moz-letter-spacing: 0 !important; -ms-letter-spacing: 0 !important; letter-spacing: 0 !important; line-height: 1 !important; margin-bottom: 0px !important; margin-left: 0px !important; margin-right: 0px !important; margin-top: 0px !important; max-width: 100% !important; padding-bottom: 20px !important; padding-left: 12px !important; padding-right: 12px !important; padding-top: 20px !important; text-transform: none !important; -webkit-text-decoration: none !important; text-decoration: none !important; width: 100% !important; cursor: pointer; } .bbdoc-body input.omsubmitbutton:hover { background: #05f602 !important; box-shadow: 0px 0px 0px 0px #ffffff !important; color: #ffffff !important; font-family: Lato !important; font-size: 20px !important; font-weight: 800 !important; -webkit-letter-spacing: 0 !important; -moz-letter-spacing: 0 !important; -ms-letter-spacing: 0 !important; letter-spacing: 0 !important; line-height: 1 !important; text-transform: none !important; -webkit-text-decoration: none !important; text-decoration: none !important; border-bottom-left-radius: 5px !important; border-bottom-right-radius: 5px !important; border-bottom-width: 0px !important; border-color: rgba(0,0,0,.35) !important; border-left-width: 0px !important; border-right-width: 0px !important; border-style: none !important; border-top-left-radius: 5px !important; border-top-right-radius: 5px !important; border-top-width: 0px !important; } .bbdoc-body select.omselect { color: #666878 !important; font-size: 20px !important; font-weight: 700 !important; font-family: Lato !important; background: #f9fbff !important; border-style: solid !important; border-color: rgba(60, 91, 151, 0.28) !important; border-top-width: 2px !important; border-right-width: 2px !important; border-bottom-width: 2px !important; border-left-width: 2px !important; border-top-left-radius: 5px !important; border-top-right-radius: 5px !important; border-bottom-right-radius: 5px !important; border-bottom-left-radius: 5px !important; display: block !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 10px !important; margin-left: 0px !important; padding-top: 0px !important; padding-right: 20px !important; padding-bottom: 0px !important; padding-left: 20px !important; max-width: 100% !important; width: 100% !important; } /* mostly copied from omtextinut styles */ /* for ongagemonster exit-intent popups, the textinput and select both have omtextinput and omomselect classes too, but omexitsubmitbutton is by itself and mostly copies btnsubmit*/ .bbdoc-body input.omexittextinput { display: inline-block !important; margin-left:3% !important; width: 60% !important } .bbdoc-body select.omexitselect { display: inline-block !important; width: 36% !important; } .bbdoc-body input.omexitsubmitbutton { margin-top: 5px; border: 0; border-radius: 2px; box-sizing: border-box; background: #f3871b; font: 400 20px oswald; color: #ffffff; display: inline-block; width: 100%; height: 54px; padding: 6px 2px 6px 2px; vertical-align: top; text-align: center; } .bbdoc-body input.omexitsubmitbutton:hover { } @media only screen and (max-width: 891px){ .bbdoc-body select.omexitselect { width: 100% !important; } .bbdoc-body input.omexittextinput { margin-left: 0px !important; width: 100% !important; } } /* ── legacy store CTA: .btnsubmit / bbsel custom-select / addtocart format box (copied from style-2018wf.css + store/storeheader.css, scoped under .bbdoc-body) so the `addtocartdvds` component renders identically inside the doc surface — the tokens.css `all:revert` reset strips the global rules, so we re-add them here. */ .bbdoc-body .btnsubmit { border: 0; border-radius: 2px; box-sizing: border-box; background: #f3871b url('/2018wf/overall/navrightwhite.webp') no-repeat center right 22%; font: 400 16px oswald; color: #ffffff; display: inline-block; width: 170px; height: 36px; padding: 6px 15px 6px 2px; vertical-align: top; text-align: center; cursor: pointer; } .bbdoc-body .btn-noarrow { background-image: none; padding-right: 2px; } .bbdoc-body .addtocartcontainer2 { text-align: center; margin-top: 10px; margin-bottom: 10px; } .bbdoc-body .addtocartformat2 { display: inline-block; width: 100%; max-width: 350px; margin: 0 0 10px 0; } .bbdoc-body .addtocartbutton2 { display: inline-block; width: 100%; max-width: 350px; margin: 0; } .bbdoc-body .addtocartbutton2-underneath { display: inline-block; width: 100%; max-width: 400px; margin-top: 4px; font-size: 14px; font-style: italic; } .bbdoc-body .bbsel_container { display: inline-block; height: 36px; width: 100%; position: relative; text-align: left; } .bbdoc-body .bbsel_optionscontainer { overflow: hidden; width: 100%; height: 0px; z-index: 10000; background-color: white; padding: 0; box-sizing: border-box; border-radius: 0 0 2px 2px; margin-top: -1px; } .bbdoc-body .bbsel_opened .bbsel_optionscontainer { position: absolute; height: 235px; width: 100%; } .bbdoc-body .bbsel_container:not(.bbsel_opened) .bbsel_optionscontainer { display: none; } .bbdoc-body .bbsel_option, .bbdoc-body a.bbsel_option:visited { display: block; padding: 3px 10px; box-sizing: border-box; width: calc(100% - 20px); cursor: pointer; vertical-align: middle; text-decoration: none; user-select: none; font: 300 14px lato; color: #656a78; } .bbdoc-body .bbsel_option:hover, .bbdoc-body a.bbsel_option:hover, .bbdoc-body .bbsel_option:focus { background-color: #d8e0ef; color: #656a78; text-decoration: none; outline: none; } .bbdoc-body .bbsel_opened .bbsel_selected, .bbdoc-body .bbsel_opened a.bbsel_selected { color: #f3871b; } .bbdoc-body .bbsel_header, .bbdoc-body .bbsel_header:hover { display: block; width: 100%; box-sizing: border-box; border-radius: 2px; padding: 8.6px 10px; cursor: pointer; user-select: none; font: 300 14px lato; color: #656a78; background: white url('/2018wf/overall/menu/navigatedown.webp') no-repeat right 9px center; } .bbdoc-body .bbsel_opened .bbsel_header { background-image: url('/2018wf/overall/menu/navigateup.webp'); border-radius: 2px 2px 0 0; } .bbdoc-body .bbsel_border .bbsel_header { border: 1px solid #656a78; } .bbdoc-body .bbsel_border.bbsel_opened .bbsel_header { border-bottom: none; padding-bottom: 9.6px; } .bbdoc-body .bbsel_border.bbsel_opened .bbsel_optionscontainer { border: 1px solid #656a78; border-top: none; } .bbdoc-body .bbsel_noscroll { display: flex; flex-direction: column; width: 100%; } .bbdoc-body .bbsel_noscroll .bbsel_option { width: 100%; } .bbdoc-body .bbsel_container:not(.bbsel_opened) .bbsel_noscroll { height: 0px !important; } @media only screen and (max-width: 891px){ .bbdoc-body .bbsel_container { height: 48px; } .bbdoc-body .bbsel_option, .bbdoc-body a.bbsel_option:visited { padding: 6px 10px; font-size: 16px; } .bbdoc-body .bbsel_header, .bbdoc-body .bbsel_header:hover { padding: 13.6px 10px; font-size: 16px; } .bbdoc-body .bbsel_border.bbsel_opened .bbsel_header { padding-bottom: 15.6px; } .bbdoc-body .addtocartbutton2, .bbdoc-body .addtocartformat2, .bbdoc-body .addtocartbutton2-underneath { max-width: 100%; } } /* ── block-document components (body_doc renderer) ────────────────────────── These load AFTER tokens.css's isolation reset, so they win on cascade order. All values come from CSS custom properties defined in tokens.css. */ .bbdoc-section { box-sizing: border-box; } .bbdoc-nostack { flex-direction: row \!important; } /* opt out of mobile stacking */ .bbdoc-spacer { width: 100%; } .bbdoc-field { display: block; width: 100%; box-sizing: border-box; margin: 0 0 var(--bb-space-sm); padding: 7px 14px; font-family: var(--bb-font-body); font-size: var(--bb-size-body); color: var(--bb-color-ink); background: #f9fbff; border: 2px solid rgba(60, 91, 151, .28); border-radius: var(--bb-radius-sm); } .bbdoc-button { font-family: var(--bb-font-heading); cursor: pointer; border: 0; text-decoration: none; padding: 16px 24px; border-radius: var(--bb-radius-sm); font-size: var(--bb-size-body); line-height: 1.1; text-align: center; transition: filter .15s; } .bbdoc-button-primary { background: var(--bb-color-primary); color: #fff; } .bbdoc-button-secondary { background: transparent; color: var(--bb-color-primary); border: 2px solid var(--bb-color-primary); } .bbdoc-button:hover { filter: brightness(.93); } button.bbdoc-button { width: 100%; } /* form submit spans the form like the OM buttons did */ /* link buttons (): the site's global a:hover/a:visited rules leak into the popup (their pseudo-class specificity beats the .bbdoc-body * reset), adding an underline on hover and a link color. Pin button text styling across all states. Variant colors only set the default — inline custom colors still win. */ .bbdoc-body a.bbdoc-button:link, .bbdoc-body a.bbdoc-button:visited, .bbdoc-body a.bbdoc-button:hover, .bbdoc-body a.bbdoc-button:active, .bbdoc-body a.bbdoc-button:focus { text-decoration: none; } .bbdoc-body a.bbdoc-button-primary:link, .bbdoc-body a.bbdoc-button-primary:visited, .bbdoc-body a.bbdoc-button-primary:hover, .bbdoc-body a.bbdoc-button-primary:active { color: #fff; } .bbdoc-body a.bbdoc-button-secondary:link, .bbdoc-body a.bbdoc-button-secondary:visited, .bbdoc-body a.bbdoc-button-secondary:hover, .bbdoc-body a.bbdoc-button-secondary:active { color: var(--bb-color-primary); } /* list component (body_doc) — markers drawn via ::before so the reset can't strip them */ .bbdoc-list { list-style: none; margin: .4em 0; padding: 0; } .bbdoc-list li { position: relative; padding-left: 1.4em; margin: .35em 0; text-align: left; } .bbdoc-list-none li { padding-left: 0; } .bbdoc-list-number { list-style: decimal; padding-left: 1.8em; } .bbdoc-list-number li { position: static; padding-left: 0; } .bbdoc-list-bullet li::before { content: "\2022"; position: absolute; left: .35em; } .bbdoc-list-dash li::before { content: "\2013"; position: absolute; left: .2em; } .bbdoc-list-check li::before { content: "\2713"; position: absolute; left: 0; color: var(--bb-color-primary); font-weight: 700; } /* document surfaces (sales/upsell): native disc bullets matching the legacy /pr/

  • lists — real markers, ~40px indent, 16px item spacing. */ .bbdoc-doc.bbdoc-sales .bbdoc-list-bullet, .bbdoc-doc.bbdoc-upsell .bbdoc-list-bullet { list-style: disc; padding-left: 45px; margin: 16px 0; } .bbdoc-doc.bbdoc-sales .bbdoc-list-bullet li, .bbdoc-doc.bbdoc-upsell .bbdoc-list-bullet li { position: static; padding-left: 0; margin: 16px 0; } .bbdoc-doc.bbdoc-sales .bbdoc-list-bullet li::before, .bbdoc-doc.bbdoc-upsell .bbdoc-list-bullet li::before { content: none; } /* marker styling (real ::marker only — decimal/disc): color/weight set via inherited custom props from the list component (the only way to style just the marker). */ .bbdoc-list > li::marker { color: var(--bbmk-color, currentColor); font-weight: var(--bbmk-weight, inherit); } /* a nested sub-list must not inherit the parent list's marker color/weight (legacy ::marker rules targeted a specific class, never the nested

      ). */ .bbdoc-list .bbdoc-list { --bbmk-color: initial; --bbmk-weight: initial; } /* document surfaces: nested-list bullet variants (circle/square) matching the legacy browser-default markers for
        nested inside
          . */ .bbdoc-list-circle li::before { content: none; } .bbdoc-list-square li::before { content: none; } .bbdoc-doc.bbdoc-sales .bbdoc-list-circle, .bbdoc-doc.bbdoc-upsell .bbdoc-list-circle { list-style: circle; padding-left: 45px; margin: 16px 0; } .bbdoc-doc.bbdoc-sales .bbdoc-list-circle li, .bbdoc-doc.bbdoc-upsell .bbdoc-list-circle li { position: static; padding-left: 0; margin: 16px 0; } .bbdoc-doc.bbdoc-sales .bbdoc-list-square, .bbdoc-doc.bbdoc-upsell .bbdoc-list-square { list-style: square; padding-left: 45px; margin: 16px 0; } .bbdoc-doc.bbdoc-sales .bbdoc-list-square li, .bbdoc-doc.bbdoc-upsell .bbdoc-list-square li { position: static; padding-left: 0; margin: 16px 0; } /* document surfaces: native decimal numbering matching the legacy

          1. lists */ .bbdoc-doc.bbdoc-sales .bbdoc-list-number, .bbdoc-doc.bbdoc-upsell .bbdoc-list-number { list-style: decimal; padding-left: 45px; margin: 16px 0; } .bbdoc-doc.bbdoc-sales .bbdoc-list-number li, .bbdoc-doc.bbdoc-upsell .bbdoc-list-number li { position: static; padding-left: 0; margin: 16px 0; } /* document surfaces: orange-arrow lists (legacy .org-arrows): no list marker, each li padded 30px for an absolutely-positioned orange \279E arrow glyph. */ .bbdoc-list-arrow { list-style: none; padding-left: 0; } .bbdoc-list-arrow li { position: relative; padding-left: 30px; } .bbdoc-list-arrow li::before { content: "\279E"; color: orange; position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-size: 30px; } .bbdoc-doc.bbdoc-sales .bbdoc-list-arrow, .bbdoc-doc.bbdoc-upsell .bbdoc-list-arrow { padding-left: 0; margin: 16px 0; } .bbdoc-doc.bbdoc-sales .bbdoc-list-arrow li, .bbdoc-doc.bbdoc-upsell .bbdoc-list-arrow li { position: relative; padding-left: 30px; margin: 16px 0; } /* document surfaces: marker-less lists (legacy full-width

            • blocks) — no indent so the item content spans the full column like the source. */ .bbdoc-doc.bbdoc-sales .bbdoc-list-none, .bbdoc-doc.bbdoc-upsell .bbdoc-list-none { padding-left: 0; margin: 16px 0; } .bbdoc-doc.bbdoc-sales .bbdoc-list-none li, .bbdoc-doc.bbdoc-upsell .bbdoc-list-none li { position: static; padding-left: 0; margin: 16px 0; } /* document surfaces: CTA buttons match the legacy site .btnlink (slim orange) */ .bbdoc-doc.bbdoc-sales .bbdoc-button, .bbdoc-doc.bbdoc-upsell .bbdoc-button { font: 400 16px Oswald, "Helvetica Neue", Arial, sans-serif; padding: 7px 15px 9px; border-radius: 2px; letter-spacing: normal; box-shadow: none; height: 36px; line-height: normal; box-sizing: border-box; } .bbdoc-doc.bbdoc-sales .bbdoc-button:hover, .bbdoc-doc.bbdoc-upsell .bbdoc-button:hover { transform: none; box-shadow: none; } /* NB: images carry NO blanket bottom spacing. The legacy letters spaced images inconsistently (some had a trailing
              , some none), so a flat 19px over-spaced the ones that didn't. The conversion adds an explicit spacer block after an image only where the original had a gap (measure-gaps drives it, in both directions). */ /* ── polish for the new (body_doc) popups (.bbdoc-doc); legacy is untouched ── */ .bbdoc-box.bbdoc-doc { border-radius: 18px \!important; box-shadow: 0 22px 68px rgba(8, 15, 30, .42) \!important; } /* refined inputs: subtle, consistent, with a clear focus ring */ .bbdoc-field { transition: border-color .15s, box-shadow .15s, background .15s; } .bbdoc-field:focus { outline: none; border-color: var(--bb-color-blue); background: #fff; box-shadow: 0 0 0 3px rgba(33, 114, 190, .16); } /* CTA button: bolder, larger type so it reads as a call-to-action (was 17px/400) */ .bbdoc-button { transition: filter .15s, transform .12s, box-shadow .15s; font-weight: 700; font-size: 19px; letter-spacing: .01em; text-align: center; } .bbdoc-button-primary { box-shadow: 0 5px 16px rgba(243, 135, 27, .38); } .bbdoc-button:hover { transform: translateY(-1px); } .bbdoc-button-primary:hover { box-shadow: 0 9px 24px rgba(243, 135, 27, .5); } .bbdoc-button-secondary { box-shadow: none; } /* a touch more air in lists + form */ .bbdoc-list li { margin: .5em 0; } /* air above a form only when it follows other content — not when it's the first/only item in its container (that's the section's own padding's job) */ .bbdoc-body form:not(:first-child) { margin-top: 14px; } /* same for the countdown's 12px outer margin: only between blocks, not at edges */ .bbdoc-countdown:not(:first-child) { margin-top: 12px; } .bbdoc-countdown:not(:last-child) { margin-bottom: 12px; } /* Yes/No two-step opt-in */ .bbdoc-ts-q { margin-bottom: 14px; } .bbdoc-ts-yes { display: inline-block; } .bbdoc-ts-no { display: block; margin-top: 12px; font-size: 13px; color: var(--bb-color-gray); text-decoration: underline; cursor: pointer; background: none; } .bbdoc-ts-no:hover { color: var(--bb-color-ink); }