/* =====================================================================================
   Bolster rebuild layer. Loads AFTER Webflow's shared stylesheet, which still owns the look.
   This file only adds: (1) the new header, with values measured from the live Webflow nav,
   and (2) responsive fixes. Do not restyle Webflow components here beyond what's needed to
   make them work at every width.
   ===================================================================================== */

/* ---------------- header (measured from www.bolsterbuilt.com nav, 2026-10-23) ---------------- */
.bbh{position:sticky;top:0;z-index:1000;background-color:rgba(255,255,255,.53);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);font-family:"Cera Pro",sans-serif}
.bbh{transition:background-color .35s ease}
.bbh__toggle,.bbh__link{transition:color .35s ease}
.bbh--dark{background-color:var(--bbh-dark-bg,#000)}
.bbh--dark.is-light{background-color:rgba(255,255,255,.53)}
.bbh--dark.is-light .bbh__toggle,.bbh--dark.is-light .bbh__link{color:#000}
.bbh__bar{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:74px;padding:0 25px}
.bbh__logo{display:block;line-height:0;flex:none}
.bbh__logo img{width:124px;height:auto;display:block}
.bbh__menu{position:absolute;left:calc(50% - 295px);top:0;bottom:0;display:flex;align-items:center}
.bbh__list{display:flex;align-items:center;margin:0;padding:0;list-style:none}
.bbh__toggle,.bbh__link{display:inline-flex;align-items:center;font-family:"Cera Pro",sans-serif;font-size:14.4px;font-weight:400;line-height:20px;color:#000;background:transparent;border:1px solid transparent;text-decoration:none;cursor:pointer;white-space:nowrap}
.bbh--dark .bbh__toggle,.bbh--dark .bbh__link{color:#fff}
.bbh--dark .bbh__btn--white:hover{background:#d0d5dd}
.bbh__toggle{position:relative;padding:16px 40px 16px 16px}
.bbh__toggle svg{position:absolute;right:16px;width:20px;height:20px;transition:transform .2s}
.bbh__toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.bbh__link{padding:10px 18px;border-radius:3px}
.bbh__link:hover{background-color:rgba(249,250,251,.22)}
.bbh__actions{display:flex;align-items:center;gap:12px}
.bbh__btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 25px;border:1px solid rgba(0,0,0,.38);border-radius:3px;font-family:"Cera Pro",sans-serif;font-size:14.4px;font-weight:500;line-height:19px;color:#000;text-decoration:none;white-space:nowrap}
.bbh__btn--white{background:#fff}.bbh__btn--white:hover{background:#d0d5dd}
.bbh__btn--yellow{background:#fbff00}.bbh__btn--yellow:hover{background:rgba(251,255,0,.79)}
.bbh__actions .bbh__link{margin-right:0}
.bbh__row-only{display:none}

/* dropdown panel: Webflow's own dropdown content inside a full-width layer, as on live */
.bbh__panel{position:absolute;left:0;right:0;top:61px;display:flex;justify-content:center;padding:0 20px;pointer-events:none}
.bbh__panel[hidden]{display:none}
/* Webflow dropdown fade (measured): in ~270ms ease-out, out ~280ms ease */
.bbh__panel{opacity:0;transition:opacity .28s ease}
.bbh__panel.is-in{opacity:1;transition:opacity .27s cubic-bezier(.25,.46,.45,.94)}
@media (prefers-reduced-motion:reduce){.bbh__panel,.bbh__panel.is-in{transition:none}}
.bbh__menubox{pointer-events:auto;box-shadow:0 10px 20px rgba(0,0,0,.16);max-height:calc(100dvh - 80px);overflow-y:auto}

/* narrow: two rows; menu becomes a swipeable row; no burger */
@media (max-width:1099px){
  .bbh__bar{flex-wrap:wrap;padding:12px 16px 0;min-height:0}
  .bbh__actions .bbh__link.bbh__wide{display:none}   /* Sign in moves into the link row; Sign up stays a button */
  .bbh__menu{order:3;position:static;flex:0 0 calc(100% + 32px);margin:6px -16px 0;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
  .bbh__menu::-webkit-scrollbar{display:none}
  .bbh__list{padding:0 8px 4px}
  .bbh__toggle,.bbh__link{font-size:16px}
  .bbh__toggle{padding:12px 34px 12px 8px}
  .bbh__toggle svg{right:8px;color:#667085}
  .bbh__list .bbh__link{padding:12px 8px}
  .bbh__row-only{display:list-item}
  .bbh__btn{padding:10px 18px}
  .bbh__panel{top:100%;padding:0}
  .bbh__menubox{border-radius:0;max-height:calc(100dvh - var(--bbh-bottom,120px))}
}
@media (max-width:479px){.bbh__logo img{width:104px}.bbh__actions{gap:8px}.bbh__actions .bbh__btn{padding:9px 13px;font-size:14px}}
@media (max-width:359px){.bbh__bar{padding-left:12px;padding-right:12px}.bbh__logo img{width:88px}.bbh__actions{gap:6px}.bbh__actions .bbh__btn{padding:8px 10px;font-size:13px}}
/* Dropdown panels below the wide layout (Webflow only designed them at desktop width, then hid the case-study
   cards and the payments promo on phones): reflow instead of squeezing columns. */
@media (max-width:1099px){
  /* Product: the 4-column groups auto-fit, the payments promo card takes a normal cell */
  .bbh__menubox .uui-navbar02_dropdown-content-left-4col{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));row-gap:1.5rem;column-gap:24px}
  /* collapsed Product menu: links only (no payments promo card, no end-to-end workflow graphic) */
  .bbh__menubox .product-update-card,.bbh__menubox .nav-grid-2row>.uui-navbar02_dropdown-content:last-child .uui-navbar02_dropdown-link-list:nth-child(4){display:none}
  .bbh__menubox .nav-grid-2row{padding:12px 4px}
  /* Customers: trades in two columns, case studies as a full-width row of cards underneath */
  .bbh__menubox .grid-nav-customers{grid-template-columns:1fr 1fr;padding:12px 4px;row-gap:28px}
  .bbh__menubox .uui-navbar02_dropdown-link-list-cs{grid-column:1/-1}
  .bbh__menubox .nav-grid-2x2-customer-stories{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .bbh__menubox .div-block-15{display:flex;width:auto;min-width:0;height:auto;min-height:150px;gap:14px}
  .bbh__menubox .div-block-15 .div-block-17{font-size:16px;line-height:1.3}
  .bbh__menubox .div-block-15 img{max-width:64px;height:auto}
}
@media (max-width:767px){
  .bbh__menubox .nav-grid-2x2-customer-stories{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:479px){
  .bbh__menubox .grid-nav-customers{grid-template-columns:1fr;row-gap:8px}
  .bbh__menubox .grid-nav-customers .uui-navbar02_heading.color-white{display:none}   /* blank spacer heading of the 2nd trade list */
  .bbh__menubox .uui-navbar02_dropdown-link-list-cs{margin-top:20px}
  /* case studies: swipeable strip */
  .bbh__menubox .nav-grid-2x2-customer-stories{display:flex;flex-flow:row nowrap;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin:0 -24px;padding:0 24px 4px;scroll-padding:0 24px;scrollbar-width:none}
  .bbh__menubox .nav-grid-2x2-customer-stories::-webkit-scrollbar{display:none}
  .bbh__menubox .div-block-15{flex:0 0 72%;scroll-snap-align:start}
}

/* ---------------- responsive fixes on Webflow sections ---------------- */
html,body.bb{overflow-x:clip}

/* Content Webflow hides at some widths with no replacement (found by auditing every page):
   - tablet gap (shown on desktop AND phones, hidden only 480-991px): benefit cards (.section),
     closing CTA (.section-3), testimonials (.section-7), payments CTA, /book-a-demo testimonials
   - hidden below 768px: "Don't just take our word for it" (.section-29), article side card
     (.div-block-27), case-study sidebar, homepage feature block (.div-block-8)
   - hidden below 480px: audience chips (.section-6)
   All are display:block on desktop. */
@media (max-width:991px){
  body.bb :is(.section,.section-3,.section-7,.success-quotes-block,.payments-cta){display:block}
  body.bb .card-group{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
}
@media (max-width:767px){
  body.bb :is(.section-29,.div-block-27,.sidebar-case-study){display:block}
  /* the side card / case-study sidebar sit in a .blog-container row: stack them above the content */
  body.bb .blog-container{flex-direction:column}
  body.bb .blog-container>:is(.div-block-27,.sidebar-case-study){width:100%;max-width:none;position:static}
}
/* Merged twins (tools/extract_page.py TWINS drops the phone copies): the desktop copy now serves every width
   (homepage feature panel: rebuilt as .bbf, see the end of this file) */
@media (max-width:479px){
  body.bb .paragraph-18.white-text{display:block}                          /* /payments cash-flow stat */
}
/* Award badges row (G2, Intuit, Capterra, Forbes, YC): Webflow hid it below 480px; wrap it instead */
@media (max-width:991px){ body.bb .uui-section_layout09:not(.usa-section-only){display:flex;flex-wrap:wrap;row-gap:12px} }
@media (max-width:479px){
  body.bb .uui-section_layout09 .badge-image{width:84px}
  body.bb .uui-section_layout09 .badge-image-g2{width:64px}
  body.bb .uui-section_layout09 .badge{width:76px}
}
/* (/payments keeps Webflow's separate phone timeline: the 1-2-3 desktop timeline is unreadable at 390px) */
@media (max-width:479px){ body.bb .section-6{display:block} }

/* Compare pricing table (JobTread, inside .compare-table-container): between 480-767px neither the
   desktop nor the phone table showed, and the phone version drops 23 rows. Show the full table;
   swipe sideways inside it. */
@media (max-width:767px){
  body.bb .pricing-table-section-desktop:has(.compare-table-container){display:block}
  body.bb .pricing-table-section-desktop .compare-table-container{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  body.bb .compare-table-container>.pricing-wrapper{display:block;min-width:640px}
  body.bb:has(.compare-table-container) .pricing-table-section-mobile{display:none}
}
/* /pricing comparison table on phones: Webflow's separate phone table showed an old plan line-up
   (Essentials $299 / Pro / Premium $499) and is removed in tools/extract_page.py. Show the real table
   instead: swipe sideways, plan names column pinned on the left. */
@media (max-width:767px){
  body.bb .pricing-table-section-desktop:has(.pricing-table-container){display:block;padding-bottom:60px}
  body.bb .pricing-table-container{overflow-x:auto;-webkit-overflow-scrolling:touch}
  body.bb .pricing-table-container>.pricing-wrapper{display:block;min-width:540px}
  body.bb .pricing-table-container :is(.grid-top-sticky,.grid-pricing){grid-template-columns:164px repeat(3,minmax(124px,1fr))}
  body.bb .pricing-table-container .grid-top-sticky{position:static;height:auto}
  body.bb .pricing-table-container :is(.pricing-table-cell-side,.pricing-top-side,.grid-pricing>.pricing-line-break-top:nth-child(4n+1)){position:sticky;left:0;z-index:2;background:#fff}
  body.bb .pricing-table-container .pricing-table-cell-side{padding:10px 12px}
  body.bb .pricing-table-container .paragraph-12{font-size:14px;line-height:18px}
  body.bb .pricing-table-section-desktop:has(.pricing-table-container)::before{content:"Swipe sideways to compare plans →";display:block;font:500 14px/20px 'Cera Pro',sans-serif;color:#6b7280;padding:0 var(--bbg,16px) 12px}
}

/* Promo banner ("Get a sample Bolster proposal", ~74 pages). Webflow only built a fixed 80px desktop row
   (+ a phone twin we removed), so it is laid out here for every width, never cropping the preview:
   >=768: text | proposal preview standing on the bottom edge | button.
   <768:  text, full-width button, then the preview peeking up from the bottom edge. */
body.bb .promo-banner-container-desktop{display:block;height:auto;padding:0}
body.bb .promo-grid{display:grid;height:auto;min-height:80px;grid-template-rows:none;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;column-gap:28px;padding:0 24px 0 34px}
body.bb .promo-grid>*{height:auto;width:auto;max-width:none;margin:0}
body.bb .promo-grid>*::before,body.bb .promo-grid>*::after{content:none}
body.bb .promo-grid>.container-9{justify-content:flex-start;gap:20px;padding:18px 0}
body.bb .promo-grid .text-block-40{text-align:left}
body.bb .promo-grid>.container-10{display:block;align-self:end;padding-top:10px}
body.bb .promo-grid .image-13{display:block;flex:none;width:auto;height:70px;max-width:100%;object-fit:contain;object-position:bottom}
body.bb .promo-grid .button-primary-side{white-space:nowrap}
@media (max-width:1199px){ body.bb .promo-grid .image-13{height:58px} }
@media (max-width:991px){
  body.bb .promo-grid{column-gap:20px;padding:0 18px 0 24px}
  body.bb .promo-grid>.container-9{gap:14px}
  body.bb .promo-grid .text-block-40{font-size:16px;line-height:20px}
  body.bb .promo-grid .text-block-41{font-size:20px}
  body.bb .promo-grid .image-13{height:44px}
  body.bb .promo-grid .button-primary-side{padding:10px 18px;font-size:16px}
}
@media (max-width:767px){
  body.bb .promo-grid{grid-template-columns:minmax(0,1fr);row-gap:18px;padding:24px 20px 0}
  body.bb .promo-grid>.container-9{justify-content:flex-start;gap:14px;padding:0}
  body.bb .promo-grid .text-block-40{font-size:18px;line-height:24px}
  body.bb .promo-grid>.container-11{order:2;width:100%}
  body.bb .promo-grid .button-primary-side{width:100%;text-align:center;padding:14px 18px;font-size:18px}
  body.bb .promo-grid>.container-10{order:3;padding-top:4px}
  body.bb .promo-grid .image-13{width:100%;max-width:520px;height:auto;margin:0 auto}
}

/* Testimonials between 480-991px (Webflow hid them there): drop the desktop min-heights */
@media (max-width:991px) and (min-width:480px){
  body.bb .uui-testimonial15_content{min-height:0;height:auto}
  body.bb .uui-testimonial15_slide{height:auto}
}

/* Extra H1s are demoted to H2 for SEO (one H1 per page). Restore Webflow's bare-h1 look; :where()
   keeps this at tag specificity so any heading class on the element still wins. */
h2:where(.bb-was-h1){font-size:38px;line-height:44px;margin-top:20px;margin-bottom:.67em}

/* Compare-page article sections (.section-15 … .section-28) have a fixed 220px side padding and no
   smaller-screen rule, so on phones the text column collapses to 0px (one character per line).
   Same 1000px column as desktop (220px at 1440), shrinking to a 16px gutter. */
body.bb :is(.section-12,.section-13,.section-14,.section-15,.section-16,.section-17,.section-18,.section-19,.section-20,.section-21,.section-22,.section-23,.section-24,.section-25,.section-26,.section-27,.section-28){
  padding-left:clamp(16px,calc((100% - 1000px) / 2),220px);padding-right:clamp(16px,calc((100% - 1000px) / 2),220px)}

/* Fixed-column grids with no smaller-screen rule. Desktop keeps Webflow's exact columns; below that,
   as many columns as fit (auto-fit), never wider than the screen. */
@media (max-width:1299px){
  body.bb .collection-list-6{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}        /* /case-studies grid (3 x 400px) */
  body.bb .collection-list-6 :is(.card_item,.link-block-5,.card_image){width:100%;max-width:100%}
  body.bb .three-card-container{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}     /* referrals / contact / business accounts */
  body.bb :is(.three-card-first,.three-card-second,.three-card-three){min-width:0}
  body.bb .capterra-reviews{width:auto;max-width:100%}                                                    /* reviews widget (1300px) */
}
@media (max-width:991px){
  body.bb .bld-quote .grid{grid-template-columns:1fr}                                                     /* compare quote block (480px + 320px) */
  body.bb .bld .card{min-width:0}
  body.bb .integrations-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
  body.bb .integration-card{padding:clamp(24px,6vw,100px)}
  body.bb :is(.triple-threat-card-3-2,.triple-threat-card-3,.triple-threat-card-3-1){min-width:0}
}
/* never let an image or a grid cell force the page wider than the screen */
body.bb :where(img){max-width:100%}
body.bb :where(.w-layout-grid,.w-dyn-items)>*{min-width:0}

/* Compare-page quote cards (each compare embed has its own prefix: .bld-quote, .brf-quote, ...):
   big number + label side by side squeezes the label to a sliver in narrow cards; let it wrap. */
@media (max-width:1299px){
  body.bb section[class$="-quote"] .card{flex-wrap:wrap;min-width:0;padding:clamp(20px,4vw,40px)}
  body.bb section[class$="-quote"] .card .lbl{flex:1 1 140px;min-width:0}
}
@media (max-width:991px){ body.bb section[class$="-quote"] .grid{grid-template-columns:1fr} }

/* css_bridge: Webflow's <=479px design for .section-29 on /, extended to 480-991px */
@media (min-width:480px) and (max-width:991px){
  body.bb .section-29 .w-container{max-width:none}
  body.bb .section-29 .basic-page-title{font-size:29px;line-height:36px}
  body.bb .section-29 .div-block-7{margin-top:30px}
  body.bb .section-29 .container-3{max-width:none;margin-top:40px;padding-left:0;padding-right:0;display:flex}
  body.bb .section-29 .div-block-47{grid-column-gap:10px;grid-row-gap:10px;flex-flow:column;justify-content:space-between;align-items:flex-start}
  body.bb .section-29 .bolster-impact-cta{box-sizing:border-box;vertical-align:baseline;object-fit:fill;min-width:100%;margin-left:auto;margin-right:auto;padding-top:12px;padding-bottom:12px;display:block;overflow:clip}
  body.bb .section-29 .div-block-48{grid-column-gap:5px;grid-row-gap:5px;flex-flow:row}
  body.bb .section-29 .case-study-big-stat{font-size:50px;line-height:50px}
  body.bb .section-29 .max-width-container{margin-top:40px;padding-left:0;padding-right:0;display:flex}
  body.bb .section-29 .slide-w{padding-left:.5rem;padding-right:.5rem}
  body.bb .section-29 .slide{width:80vw}
  body.bb .section-29 .slider-wrapper-2{padding-left:calc(30vw - 6rem)}
  body.bb .section-29 .slider-section-3{min-height:20svh}
  body.bb .section-29 .case-study-stats-section-home{border-radius:5px;width:100%}
  body.bb .section-29 .cs-home-title{flex-flow:column;font-size:14px;line-height:16px;display:flex}
  body.bb .section-29 .cs-home-tag{margin-top:10px;margin-left:10px}
  body.bb .section-29 .text-block-66{padding:0 10px;font-size:10px;display:flex}
  body.bb .section-29 .cs-home-callout{margin-bottom:10px;margin-right:10px;padding-top:10px;padding-bottom:10px}
  body.bb .section-29 .text-block-67{font-size:12px}
  body.bb .section-29{display:block}
}
@media (min-width:768px) and (max-width:991px){ body.bb .section-29 .slide{width:min(80vw,540px)} }

/* ---------------- UX audit fixes (Oct 2026) ---------------- */
/* /payments cards: Webflow jumps the title to 42px with a 24px line-height at <=991, so lines overlap */
@media (min-width:480px) and (max-width:991px){
  body.bb .dark-card-title-white-cera-smaller{font-size:28px;line-height:32px}
  body.bb .section-code-widget{display:block}                     /* /construction-intelligence layers: hidden 480-991 only */
}
/* FAQ accordions (/payments, /business-accounts): questions were nowrap and clipped under the chevron */
body.bb .accordion-item .w-dropdown-toggle{white-space:normal;padding-right:44px}
body.bb .accordion-item .w-dropdown-toggle .text-block-36{white-space:normal}
/* /payments "Lightning-fast" timeline: labels were 100px wide (9px text on phones) and ran into each other */
@media (max-width:991px){ body.bb :is(.graph-uptext,.graph-downtext){width:72px;font-size:11px;line-height:13px} }
@media (max-width:479px){ body.bb :is(.graph-uptext,.graph-downtext){width:56px;font-size:10px;line-height:12px} }
/* footer links: bigger tap targets on phones */
@media (max-width:767px){ body.bb .footer-dark :is(.footer-link,.footer-header-link){display:inline-block;padding:6px 0} }
/* homepage AI demo, last slide: the square proposal preview pushed "Send to client / Download PDF" out of the window */
body.bb .pbai-proposal-wrap .pbai-prop-img-ph{aspect-ratio:4/3 !important}
/* form fields: visible keyboard focus (Webflow removes the outline) and room between field and button on phones */
body.bb .w-form :is(input.w-input,select,textarea):focus-visible{outline:2px solid #0360fc;outline-offset:2px}
@media (max-width:479px){ body.bb .demo-form{column-gap:10px;row-gap:10px} }
/* legal pages: long lines (~140 characters at 1440) */
body.bb:is([data-bb-page=privacy-policy],[data-bb-page=terms-and-conditions],[data-bb-page=complaint-handling-process]) .blog-container>div{max-width:75ch;margin-inline:auto}
/* phone link row: fade the edge that has more links scrolled out of view (set by Header.astro) */
@media (max-width:1099px){
  .bbh--more-r .bbh__menu{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent)}
  .bbh--more-l .bbh__menu{-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px);mask-image:linear-gradient(90deg,transparent,#000 48px)}
  .bbh--more-l.bbh--more-r .bbh__menu{-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent)}
}
body.bb .bb-404-links{margin-top:24px}
body.bb .bb-404-links a{color:#FBFF00;text-decoration:underline;text-underline-offset:3px}
/* footer, 768-991px: the top link row and three nowrap columns ran ~50px past the edge */
@media (max-width:991px){
  body.bb .flex-block-footer{flex-wrap:wrap;column-gap:32px;row-gap:16px}
  body.bb .footer-dark .footer-link{white-space:normal}
}
@media (min-width:768px) and (max-width:991px){
  body.bb .footer-content{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px}
}
/* /payments "Payments that save time": Webflow keeps the 3-column desktop grid at <=991 and squeezes the
   cards into ~55px tracks. Stack it: the cards side by side, then the diagram. */
@media (max-width:991px){
  body.bb .glowing_component_layout{grid-template-columns:1fr;height:auto;aspect-ratio:auto}
  body.bb .glowing_component_layout>*{grid-column:auto !important;grid-row:auto !important}
  body.bb .glowing_component_layout .grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));height:auto}
  body.bb .glowing_component_layout .grid-3>*{grid-column:auto !important;grid-row:auto !important;width:auto;height:auto;min-height:0}
  body.bb .glowing_component_layout>.connector_lines{display:none}           /* desktop-only arrow between the columns */
}
/* 404: the hero sat under the fixed header */
body.bb[data-bb-page="404"] .dark-hero-section{padding-top:clamp(120px,14vw,170px)}

/* ---------------- Homepage feature panel (.bbf, built by tools/extract_page.py home_features) ----------------
   Wide: Webflow's measured design (1300x450 blue card, 40px Cera Pro title, 475x360 video right, tab pill
   bottom-left). Below 992px: tabs on top, then text, then the video at full width. */
.bbf{position:relative;background:#0360fc;border-radius:15px;color:#fff;padding:40px;font-family:'Cera Pro',sans-serif;min-height:450px;box-sizing:border-box}
.bbf__panel{display:grid;grid-template-columns:minmax(0,586px) minmax(0,475px);justify-content:space-between;align-items:start;gap:40px;animation:bbf-in .35s ease-out}
.bbf__panel[hidden]{display:none}
@keyframes bbf-in{from{opacity:0}to{opacity:1}}
.bbf__text{display:flex;flex-direction:column;align-items:flex-start;gap:42px}
.bbf__title{font-size:40px;line-height:42px;font-weight:400;margin:0;color:#fff;letter-spacing:normal}
.bbf__body{font-size:16px;line-height:24px;margin:0;color:#fff}
.bbf__link{display:inline-flex;align-items:center;gap:12px;color:#fff;font-size:16px;line-height:19px;text-decoration:none}
.bbf__link svg{transition:transform .2s}
.bbf__link:hover svg{transform:translateX(3px)}
.bbf__media{margin-top:5px}
.bbf__media video{display:block;width:100%;aspect-ratio:475/360;height:auto;border-radius:5px;object-fit:cover;background:#2f7bfd}
.bbf__tabs{position:absolute;left:20px;bottom:20px;z-index:1;display:flex;gap:20px;background:#fff;border-radius:5px;padding:4px}
.bbf__tab{font:500 16px/20px 'Cera Pro',sans-serif;color:#000;background:transparent;border:0;border-radius:3px;padding:5px 10px;cursor:pointer;white-space:nowrap}
.bbf__tab[aria-selected="true"]{background:#000;color:#fff}
.bbf__tab:focus-visible{outline:2px solid #FBFF00;outline-offset:2px}
@media (max-width:991px){
  .bbf{min-height:0;padding:clamp(16px,4vw,40px);display:flex;flex-direction:column;gap:clamp(20px,4vw,32px)}
  .bbf__tabs{position:static;align-self:stretch;gap:4px}
  .bbf__tab{flex:1 1 0;text-align:center;font-size:clamp(14px,2.2vw,16px);padding:8px 6px;white-space:normal}
  .bbf__panel{grid-template-columns:1fr;gap:clamp(20px,4vw,32px)}
  .bbf__text{gap:clamp(14px,3vw,24px)}
  .bbf__title{font-size:clamp(28px,5vw,40px);line-height:1.1}
  .bbf__media{margin-top:0}
}

/* ---------------- Long-form articles (.bb-article, marked by tools/extract_page.py mark_articles) ----------------
   Compare write-ups, trade/guide/case-study articles: one reading style, matching the blog. */
body.bb .bb-article{max-width:720px;margin-left:auto;margin-right:auto;font-family:'Cera Pro',sans-serif;color:#3b3f45}
body.bb .bb-article :is(p,li){font-size:18px;line-height:1.7;color:#3b3f45;margin:0 0 18px;letter-spacing:normal}
body.bb .bb-article :is(h1,h2){font-family:'Cera Pro',sans-serif;font-size:clamp(24px,2.4vw,30px);line-height:1.2;font-weight:500;letter-spacing:-.01em;color:#0b0b0c;margin:52px 0 14px}
body.bb .bb-article h3{font-family:'Cera Pro',sans-serif;font-size:21px;line-height:1.3;font-weight:500;color:#0b0b0c;margin:34px 0 10px}
body.bb .bb-article :is(h4,h5,h6){font-family:'Cera Pro',sans-serif;font-size:18px;line-height:1.4;font-weight:500;color:#0b0b0c;margin:26px 0 8px}
body.bb .bb-article :is(h1,h2,h3,h4,h5,h6) :is(strong,b){font-weight:inherit}
body.bb .bb-article>:first-child,body.bb .bb-article>:first-child>:first-child{margin-top:0}
body.bb .bb-article strong{color:#0b0b0c}
body.bb .bb-article a{color:#0360fc;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
body.bb .bb-article a:hover{text-decoration-thickness:2px}
body.bb .bb-article :is(ul,ol){padding-left:24px;margin:0 0 22px}
body.bb .bb-article li{margin-bottom:8px;padding-left:4px}
body.bb .bb-article li::marker{color:#0360fc}
body.bb .bb-article blockquote{border-left:3px solid #0360fc;margin:30px 0;padding:4px 0 4px 22px;font-size:20px;line-height:1.55;color:#0b0b0c}
body.bb .bb-article hr{border:0;border-top:1px solid #e6e6e1;margin:44px 0}
body.bb .bb-article img{border-radius:12px;height:auto}
body.bb .bb-article figure{margin:28px 0}
@media (max-width:479px){ body.bb .bb-article :is(p,li){font-size:17px} }
/* article + side card: centre the pair instead of stretching the text to 1,000px+ */
@media (min-width:768px){ body.bb .blog-container:has(>.bb-article){justify-content:center;column-gap:56px} }
/* Segment / case-study articles with a side CTA card: wider reading column, and the card rides along (sticky)
   under the header while the article scrolls. Side by side from 768px; stacked above the article below that. */
@media (min-width:768px){
  body.bb .blog-container>:is(.div-block-27,.sidebar-case-study){flex:0 0 280px;width:280px;align-self:flex-start;position:sticky;top:100px}
  body.bb .blog-container>:is(.div-block-27,.sidebar-case-study)~*{flex:1 1 auto;min-width:0;max-width:860px;margin-left:0;margin-right:0}
  body.bb .blog-container:has(>:is(.div-block-27,.sidebar-case-study)){column-gap:clamp(32px,4vw,64px);padding-left:clamp(20px,3vw,40px);padding-right:clamp(20px,3vw,40px)}
  body.bb .blog-container>:is(.div-block-27,.sidebar-case-study)~* .bb-article{max-width:none}
  body.bb .div-block-27>.side-card{margin-top:8px;min-height:0;min-width:0;padding:32px 24px;gap:16px}
  body.bb .sidebar-case-study>.side-card-case-study{min-width:0;margin-top:8px;padding:32px 28px}
}
@media (min-width:768px) and (max-width:991px){
  body.bb .blog-container>:is(.div-block-27,.sidebar-case-study){flex-basis:230px;width:230px}
}
@media (min-width:768px) and (max-height:520px){ body.bb .blog-container>:is(.div-block-27,.sidebar-case-study){position:static} }

/* Compare pages: every table uses the CoConstruct layout (grouped rows, value rows, highlighted Bolster cells).
   Rows are generated by compare_tables() in tools/extract_page.py from tools/compare/<slug>.json. */
body.bb .cmp tr.grp td{background:#000;color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;text-align:left;padding:12px 18px;border-bottom:0}
body.bb .cmp tr.val td{padding:20px 18px}
body.bb .cmp .num{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:30px;line-height:1;color:var(--ink,#101828);letter-spacing:-.02em}
body.bb .cmp td.bcol .num{color:var(--b,#0954FA)}
body.bb .cmp .none{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:18px;color:var(--faint,#758696)}
body.bb .cmp .up{display:inline-block;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;line-height:1.25;color:#000;background:var(--y,#FBFF00);padding:6px 11px;border-radius:6px}
body.bb .cmp .plain{font-size:14px;color:var(--faint,#758696)}
body.bb .cmp .na{font-family:'Space Grotesk',sans-serif;font-weight:600;color:var(--faint,#758696)}
body.bb .cmp td.bcol .up{position:relative;margin-top:31px}
body.bb .cmp td.bcol .up::before{content:"";position:absolute;left:50%;top:-31px;margin-left:-12px;width:24px;height:24px;border-radius:50%;background:var(--ok,#079455)}
body.bb .cmp td.bcol .up::after{content:"";position:absolute;left:50%;top:-26px;margin-left:-4px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
body.bb .cmp-wrap+.fine{max-width:860px;margin:14px auto 0;font-size:13px;color:var(--faint,#758696);text-align:center}
/* /compare/jobtread-alternative: the generated table sits in Webflow markup with no embed stylesheet, so carry the base table styles */
body.bb .bb-cmp-sec{padding:24px var(--bbg,16px) 72px;font-family:'Cera Pro',sans-serif;color:#101828}
body.bb .bb-cmp-sec .cmp-wrap{max-width:860px;margin:0 auto;border:1px solid rgba(16,24,40,.1);border-radius:14px;overflow:hidden;background:#fff}
body.bb .bb-cmp-sec .cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
body.bb .bb-cmp-sec .cmp{width:100%;border-collapse:collapse;font-size:17px;table-layout:fixed;min-width:520px}
body.bb .bb-cmp-sec .cmp th,body.bb .bb-cmp-sec .cmp td{padding:16px 18px;border-bottom:1px solid rgba(16,24,40,.1);vertical-align:middle;text-align:center}
body.bb .bb-cmp-sec .cmp th:first-child,body.bb .bb-cmp-sec .cmp td.feat{text-align:left;width:40%}
body.bb .bb-cmp-sec .cmp th:not(:first-child),body.bb .bb-cmp-sec .cmp td:not(.feat){width:30%}
body.bb .bb-cmp-sec .cmp thead th{background:#fafbfc}
body.bb .bb-cmp-sec .cmp thead th.bcol{background:#fffce0}
body.bb .bb-cmp-sec .cmp .bcol{border-left:1px solid rgba(16,24,40,.1);border-right:1px solid rgba(16,24,40,.1)}
body.bb .bb-cmp-sec .cmp td.bcol{background:#fffef5}
body.bb .bb-cmp-sec .cmp .feat{font-weight:500}
body.bb .bb-cmp-sec .cmp .tk{display:inline-block;width:24px;height:24px;border-radius:50%;background:#079455;position:relative}
body.bb .bb-cmp-sec .cmp .tk::after{content:"";position:absolute;left:8px;top:5px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
body.bb .bb-cmp-sec .cmp .cx{display:inline-block;width:24px;height:24px;border-radius:50%;background:#f0f1f3;position:relative}
body.bb .bb-cmp-sec .cmp .cx::before,body.bb .bb-cmp-sec .cmp .cx::after{content:"";position:absolute;left:11px;top:6px;width:2px;height:12px;background:#758696}
body.bb .bb-cmp-sec .cmp .cx::before{transform:rotate(45deg)}
body.bb .bb-cmp-sec .cmp .cx::after{transform:rotate(-45deg)}
body.bb .bb-cmp-sec .cmp .note-sm{display:block;font-size:12px;color:#758696;margin-top:5px}
body.bb .bb-cmp-sec .cmp .logo-b{height:28px;width:auto;vertical-align:middle}
body.bb .bb-cmp-sec .cmp .logo-c{height:22px;width:auto;vertical-align:middle}
/* Compare tables, Bolster-led: biggest gaps first, ties folded behind "Show all", feature names link to Bolster pages, CTA under the table */
body.bb .cmp:not(.cmp--open) tr.more{display:none}
body.bb .cmp td.feat a{color:inherit;text-decoration:underline;text-decoration-color:rgba(16,24,40,.25);text-underline-offset:3px}
body.bb .cmp td.feat a:hover{text-decoration-color:currentColor}
body.bb .cmp-more{max-width:860px;margin:14px auto 0;text-align:center}
body.bb .cmp-more button{font:500 15px/1 'Cera Pro',sans-serif;color:#101828;background:#fff;border:1px solid rgba(16,24,40,.18);border-radius:999px;padding:12px 22px;cursor:pointer}
body.bb .cmp-more button:hover{border-color:#101828}
body.bb .cmp-more button:focus-visible{outline:2px solid #0360fc;outline-offset:2px}
body.bb .cmp-cta{max-width:860px;margin:28px auto 0;display:flex;align-items:center;justify-content:center;gap:16px 20px;flex-wrap:wrap;text-align:center}
body.bb .cmp-cta p{margin:0;font:600 22px/1.2 'Space Grotesk',sans-serif;color:#101828}
body.bb .cmp-cta__btn{display:inline-block;background:#FBFF00;color:#000;font:600 16px/1 'Cera Pro',sans-serif;padding:15px 26px;border-radius:6px;text-decoration:none}
body.bb .cmp-cta__btn:hover{background:#000;color:#FBFF00}
body.bb .cmp-more+.fine{max-width:860px;margin:14px auto 0;font-size:13px;line-height:1.5;color:var(--faint,#758696);text-align:center}
/* Phones: fit all three columns on screen (no sideways scroll hiding the competitor) */
@media (max-width:600px){
 body.bb #cmp-table{min-width:0;font-size:14px}
 body.bb #cmp-table th,body.bb #cmp-table td{padding:12px 8px}
 body.bb #cmp-table th:first-child,body.bb #cmp-table td.feat{width:36%;padding-left:12px}
 body.bb #cmp-table th:not(:first-child),body.bb #cmp-table td:not(.feat){width:32%}
 body.bb #cmp-table tr.grp td{padding:10px 12px;font-size:11px}
 body.bb #cmp-table .up{font-size:12px;padding:4px 7px;max-width:100%;box-sizing:border-box}
 body.bb #cmp-table .num{font-size:22px}
 body.bb #cmp-table .none{font-size:15px}
 body.bb #cmp-table .plain{font-size:12px}
 body.bb #cmp-table .note-sm{font-size:11px}
 body.bb #cmp-table .logo-b{height:20px}
 body.bb #cmp-table .logo-c{height:16px;max-width:100%}
 body.bb #cmp-table .logo-co img{width:20px;height:20px}
 body.bb #cmp-table .logo-t,body.bb #cmp-table .logo-c-txt{font-size:13px}
 body.bb .cmp-cta p{font-size:19px}
}

/* /pricing table, tablet + phone: wider feature column, "new" tag under the label (not squeezing it), tighter rows */
@media (max-width:991px){
 body.bb .pricing-table-container .pricing-table-cell-side{flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;padding:10px 14px}
 body.bb .pricing-table-container .new-tag-pricing{margin:0;padding:2px 6px;font-size:10px;line-height:14px;letter-spacing:.02em}
 body.bb .pricing-table-container .pricing-table-cell-middle{padding-top:8px;padding-bottom:8px}
 body.bb .pricing-table-container .grid-pricing>.pricing-line-break-top{padding:10px 14px}
 body.bb .pricing-table-container .paragraph-12{font-size:14px;line-height:18px}
 body.bb .pricing-table-container .pricing-table-cell-side>*{margin:0}
}
@media (min-width:768px) and (max-width:991px){
 body.bb .pricing-table-container :is(.grid-top-sticky,.grid-pricing){grid-template-columns:minmax(190px,1.4fr) repeat(3,minmax(0,1fr))}
}