What’s New<\/title>  <\/p>\n<style> *, :after, :before { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgba(59, 130, 246, 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } ::backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgba(59, 130, 246, 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } \/*! tailwindcss v3.4.17 | MIT License | https:\/\/tailwindcss.com*\/ *, :after, :before { box-sizing: border-box; border: 0 solid #e5e7eb; } :after, :before { --tw-content: \"\"; } :host, html { line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; font-feature-settings: normal; font-variation-settings: normal; -webkit-tap-highlight-color: transparent; } body { margin: 0; line-height: inherit; } hr { height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, pre, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; font-feature-settings: normal; font-variation-settings: normal; font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } button, input, optgroup, select, textarea { font-family: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; margin: 0; padding: 0; } button, select { text-transform: none; } button, input:where([type=\"button\"]), input:where([type=\"reset\"]), input:where([type=\"submit\"]) { -webkit-appearance: button; background-color: transparent; background-image: none; } :-moz-focusring { outline: auto; } :-moz-ui-invalid { box-shadow: none; } progress { vertical-align: baseline; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } [type=\"search\"] { -webkit-appearance: textfield; outline-offset: -2px; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } summary { display: list-item; } blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre { margin: 0; } fieldset { margin: 0; } fieldset, legend { padding: 0; } menu, ol, ul { list-style: none; margin: 0; padding: 0; } dialog { padding: 0; } textarea { resize: vertical; } input::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; color: #9ca3af; } input::placeholder, textarea::placeholder { opacity: 1; color: #9ca3af; } [role=\"button\"], button { cursor: pointer; } :disabled { cursor: default; } audio, canvas, embed, iframe, img, object, svg, video { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } [hidden]:where(:not([hidden=\"until-found\"])) { display: none; } .visible { visibility: visible; } .fixed { position: fixed; } .absolute { position: absolute; } .relative { position: relative; } .inset-0 { top: 0; right: 0; bottom: 0; left: 0; } .bottom-6 { bottom: 1.5rem; } .left-0 { left: 0; } .left-6 { left: 1.5rem; } .right-0 { right: 0; } .right-6 { right: 1.5rem; } .top-0 { top: 0; } .top-6 { top: 1.5rem; } .z-40 { z-index: 40; } .mx-auto { margin-left: auto; margin-right: auto; } .mb-8 { margin-bottom: 2rem; } .mt-1 { margin-top: 0.25rem; } .mt-4 { margin-top: 1rem; } .mt-8 { margin-top: 2rem; } .flex { display: flex; } .inline-flex { display: inline-flex; } .table { display: table; } .hidden { display: none; } .aspect-\\[16\\\/10\\] { aspect-ratio: 16\/10; } .aspect-video { aspect-ratio: 16\/9; } .h-10 { height: 2.5rem; } .h-16 { height: 4rem; } .h-5 { height: 1.25rem; } .h-6 { height: 1.5rem; } .w-1 { width: 0.25rem; } .w-1\\\/2 { width: 50%; } .w-2 { width: 0.5rem; } .w-5 { width: 1.25rem; } .w-6 { width: 1.5rem; } .w-\\[300px\\] { width: 300px; } .w-auto { width: auto; } .w-full { width: 100%; } .max-w-7xl { max-width: 80rem; } .flex-1 { flex: 1 1 0%; } .flex-shrink-0 { flex-shrink: 0; } .transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .select-none { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .resize { resize: both; } .list-disc { list-style-type: disc; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .items-start { align-items: flex-start; } .items-center { align-items: center; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .gap-12 { gap: 3rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; } .gap-x-3 { -moz-column-gap: 0.75rem; column-gap: 0.75rem; } .gap-y-2 { row-gap: 0.5rem; } .space-y-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.5rem * (1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); } .overflow-hidden { overflow: hidden; } .rounded-2xl { border-radius: 1rem; } .rounded-\\[2rem\\] { border-radius: 2rem; } .rounded-full { border-radius: 9999px; } .rounded-xl { border-radius: 0.75rem; } .border { border-width: 1px; } .border-2 { border-width: 2px; } .border-b { border-bottom-width: 1px; } .border-t { border-top-width: 1px; } .border-dashed { border-style: dashed; } .border-gray-200 { --tw-border-opacity: 1; border-color: rgb(229 231 235 \/ var(--tw-border-opacity, 1)); } .border-gray-300 { --tw-border-opacity: 1; border-color: rgb(209 213 219 \/ var(--tw-border-opacity, 1)); } .border-gray-400 { --tw-border-opacity: 1; border-color: rgb(156 163 175 \/ var(--tw-border-opacity, 1)); } .border-white { --tw-border-opacity: 1; border-color: rgb(255 255 255 \/ var(--tw-border-opacity, 1)); } .border-white\\\/15 { border-color: hsla(0, 0%, 100%, 0.15); } .bg-\\[\\#363847\\] { --tw-bg-opacity: 1; background-color: rgb(54 56 71 \/ var(--tw-bg-opacity, 1)); } .bg-blue-100 { --tw-bg-opacity: 1; background-color: rgb(219 234 254 \/ var(--tw-bg-opacity, 1)); } .bg-cyan-50 { --tw-bg-opacity: 1; background-color: rgb(236 254 255 \/ var(--tw-bg-opacity, 1)); } .bg-gray-100 { --tw-bg-opacity: 1; background-color: rgb(243 244 246 \/ var(--tw-bg-opacity, 1)); } .bg-gray-50 { --tw-bg-opacity: 1; background-color: rgb(249 250 251 \/ var(--tw-bg-opacity, 1)); } .bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 \/ var(--tw-bg-opacity, 1)); } .bg-white\\\/60 { background-color: hsla(0, 0%, 100%, 0.6); } .bg-white\\\/90 { background-color: hsla(0, 0%, 100%, 0.9); } .object-cover { -o-object-fit: cover; object-fit: cover; } .p-2 { padding: 0.5rem; } .p-3 { padding: 0.75rem; } .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-2\\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; } .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; } .pb-10 { padding-bottom: 2.5rem; } .pb-12 { padding-bottom: 3rem; } .pb-16 { padding-bottom: 4rem; } .pl-5 { padding-left: 1.25rem; } .pt-12 { padding-top: 3rem; } .pt-16 { padding-top: 4rem; } .pt-32 { padding-top: 8rem; } .text-left { text-align: left; } .text-center { text-align: center; } .text-6xl { font-size: 3.75rem; line-height: 1; } .text-\\[10px\\] { font-size: 10px; } .text-base { font-size: 1rem; line-height: 1.5rem; } .text-lg { font-size: 1.125rem; line-height: 1.75rem; } .text-sm { font-size: 0.875rem; line-height: 1.25rem; } .text-xs { font-size: 0.75rem; line-height: 1rem; } .font-medium { font-weight: 500; } .uppercase { text-transform: uppercase; } .leading-relaxed { line-height: 1.625; } .leading-tight { line-height: 1.25; } .text-\\[\\#363847\\] { --tw-text-opacity: 1; color: rgb(54 56 71 \/ var(--tw-text-opacity, 1)); } .text-\\[\\#363847\\]\\\/80 { color: rgba(54, 56, 71, 0.8); } .text-\\[\\#42CCCC\\] { --tw-text-opacity: 1; color: rgb(66 204 204 \/ var(--tw-text-opacity, 1)); } .text-blue-600 { --tw-text-opacity: 1; color: rgb(37 99 235 \/ var(--tw-text-opacity, 1)); } .text-gray-400 { --tw-text-opacity: 1; color: rgb(156 163 175 \/ var(--tw-text-opacity, 1)); } .text-gray-500 { --tw-text-opacity: 1; color: rgb(107 114 128 \/ var(--tw-text-opacity, 1)); } .text-gray-600 { --tw-text-opacity: 1; color: rgb(75 85 99 \/ var(--tw-text-opacity, 1)); } .text-gray-700 { --tw-text-opacity: 1; color: rgb(55 65 81 \/ var(--tw-text-opacity, 1)); } .text-gray-800 { --tw-text-opacity: 1; color: rgb(31 41 55 \/ var(--tw-text-opacity, 1)); } .text-white { --tw-text-opacity: 1; color: rgb(255 255 255 \/ var(--tw-text-opacity, 1)); } .text-white\\\/40 { color: hsla(0, 0%, 100%, 0.4); } .text-white\\\/80 { color: hsla(0, 0%, 100%, 0.8); } .text-white\\\/90 { color: hsla(0, 0%, 100%, 0.9); } .underline-offset-4 { text-underline-offset: 4px; } .shadow-md { --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); } .shadow-md, .shadow-sm { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-sm { --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); } .backdrop-blur-sm { --tw-backdrop-blur: blur(4px); -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.15s; } .transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.15s; } .transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.15s; } .duration-300 { transition-duration: 0.3s; } .ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); } .will-change-transform { will-change: transform; } .hover\\:bg-blue-100:hover { --tw-bg-opacity: 1; background-color: rgb(219 234 254 \/ var(--tw-bg-opacity, 1)); } .hover\\:bg-blue-200:hover { --tw-bg-opacity: 1; background-color: rgb(191 219 254 \/ var(--tw-bg-opacity, 1)); } .hover\\:bg-gray-200:hover { --tw-bg-opacity: 1; background-color: rgb(229 231 235 \/ var(--tw-bg-opacity, 1)); } .hover\\:bg-gray-50:hover { --tw-bg-opacity: 1; background-color: rgb(249 250 251 \/ var(--tw-bg-opacity, 1)); } .hover\\:text-\\[\\#363847\\]:hover { --tw-text-opacity: 1; color: rgb(54 56 71 \/ var(--tw-text-opacity, 1)); } .hover\\:text-white:hover { --tw-text-opacity: 1; color: rgb(255 255 255 \/ var(--tw-text-opacity, 1)); } .hover\\:underline:hover { text-decoration-line: underline; } .disabled\\:cursor-not-allowed:disabled { cursor: not-allowed; } .disabled\\:opacity-30:disabled { opacity: 0.3; } .disabled\\:hover\\:bg-cyan-50:hover:disabled { --tw-bg-opacity: 1; background-color: rgb(236 254 255 \/ var(--tw-bg-opacity, 1)); } .disabled\\:hover\\:bg-gray-100:hover:disabled { --tw-bg-opacity: 1; background-color: rgb(243 244 246 \/ var(--tw-bg-opacity, 1)); } @media (min-width: 640px) { .sm\\:flex-row { flex-direction: row; } .sm\\:items-center { align-items: center; } .sm\\:justify-between { justify-content: space-between; } .sm\\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } } @media (min-width: 768px) { .md\\:block { display: block; } } @media (min-width: 1024px) { .lg\\:w-1\\\/3 { width: 33.333333%; } .lg\\:w-2\\\/3 { width: 66.666667%; } .lg\\:flex-row { flex-direction: row; } .lg\\:px-8 { padding-left: 2rem; padding-right: 2rem; } } <\/style>\n<p>  Sofia Sans Extra Condensed Extra Bold = brand ‘hero’ font (caps only). Sofia Sans (paid Sofia Pro family substitute, not on Google Fonts) = body. –> <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/> <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/> <link rel=”stylesheet” href=”https:\/\/fonts.googleapis.com\/css2?family=Sofia+Sans:wght@300;400;500;700&family=Sofia+Sans+Extra+Condensed:wght@800&display=swap” \/>  so the first player frame paints sooner. –> <link rel=\"preconnect\" href=\"https:\/\/player.vimeo.com\" \/> <link rel=\"preconnect\" href=\"https:\/\/i.vimeocdn.com\" crossorigin \/> <\/p>\n<style data-purpose=\"typography\"> body { font-family: \"Sofia Sans\", sans-serif; color: #363847; \/* Ink *\/ \/* Body fills the viewport; main grows to absorb any leftover height so footers always sit flush against the content above them. *\/ min-height: 100vh; display: flex; flex-direction: column; } body > main { flex: 1; } .hero-font { font-family: \"Sofia Sans Extra Condensed\", sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: 0; line-height: 0.95; } <\/style>\n<p> <\/p>\n<style data-purpose=\"custom-utilities\"> \/* === bOnline brand palette === Vibrant Teal #42CCCC \u00b7 Citrus #CCED66 Tangerine #FFB547 \u00b7 Raspberry #FF4766 Ink #363847 *\/ \/* Primary CTA in Vibrant Teal *\/ .btn-teal { background-color: #42cccc; color: white; transition: background-color 0.2s; } .btn-teal:hover { background-color: #3bb8b8; } \/* legacy alias so existing .btn-blue still works *\/ .btn-blue { background-color: #42cccc; color: white; transition: background-color 0.2s; } .btn-blue:hover { background-color: #3bb8b8; } .btn-outline { color: #42cccc; border: 1px solid #42cccc; transition: background-color 0.2s; } .btn-outline:hover { background-color: #ecfafa; } \/* 10% teal tint *\/ \/* Active card = teal border. Each card keeps its own background tint so the brand colour-coding survives selection. All cards reserve a 2 px transparent border so the layout doesn't shift on activation. *\/ .carousel-card { border: 2px solid transparent; transition: border-color 0.2s, background-color 0.2s; } .carousel-card.is-active { border-color: #42cccc; } \/* Card tints \u2014 20% of each brand colour (90% white + 10% colour is too faint at this size) *\/ .bg-teal-tint { background-color: #d9f5f5; } \/* Vibrant Teal 20% *\/ .bg-citrus-tint { background-color: #f5fbe0; } \/* Citrus 20% *\/ .bg-tangerine-tint { background-color: #fff0da; } \/* Tangerine 20% *\/ .bg-raspberry-tint { background-color: #ffdae0; } \/* Raspberry 20% *\/ \/* Hover states \u2014 bump to 30% *\/ .hover\\:bg-teal-tint-hov:hover { background-color: #c6efef; } .hover\\:bg-citrus-tint-hov:hover { background-color: #f0f9d1; } .hover\\:bg-tangerine-tint-hov:hover { background-color: #ffe9c6; } .hover\\:bg-raspberry-tint-hov:hover { background-color: #ffc6cf; } \/* === Hero media frame === The frame holds either a still image or a Vimeo player, and swaps between them as cards are selected. Video sits on Ink rather than grey so any letterboxing reads as intentional. *\/ .hero-frame--video { background-color: #363847; } \/* The precompiled Tailwind build on this page has no .h-full utility (only h-5\/6\/10\/16), so an iframe relying on it collapses to the browser default 300x150. Pin both children to the frame explicitly here \u2014 ID-scoped, so it holds regardless of which utilities the next Tailwind rebuild happens to include. *\/ .h-full { height: 100%; } #content-hero-frame > img, #content-hero-frame > iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; border: 0; } #content-hero-frame > img { -o-object-fit: cover; object-fit: cover; } \/* Small teal play badge on carousel cards that open a video. *\/ .card-thumb { position: relative; width: 50%; } .card-thumb img { width: 100%; } .card-thumb--video::after { content: \"\"; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 9999px; background-color: rgba(66, 204, 204, 0.92); background-image: url(\"data:image\/svg+xml;charset=utf-8,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M9 6.5v11l9-5.5z'\/%3E%3C\/svg%3E\"); background-repeat: no-repeat; background-position: 52% 50%; background-size: 16px 16px; pointer-events: none; } \/* Respect reduced-motion: pause the carousel's ambient drift. *\/ @media (prefers-reduced-motion: reduce) { #carousel-track { transition: none; } } <\/style>\n<p> <\/head> <body class=\"bg-white\">  <main class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-32 pb-12\"> <\/p>\n<div class=\"flex flex-col lg:flex-row gap-12 items-start\">  <\/p>\n<div class=\"lg:w-1\/3 flex flex-col gap-6\"> <\/p>\n<h1 id=\"content-heading\" class=\"hero-font text-6xl text-[#363847]\"> Your CRM, connected in a few clicks <\/h1>\n<p> <p id=”content-body” class=”text-lg text-[#363847]\/80 leading-relaxed” > Connect HubSpot, Salesforce, Zoho and 200+ more directly in MYbOnline. Your contacts sync automatically, your calls get logged for you, and you can dial straight from your CRM in one click. No devs, no downtime, no drama. <\/pee> <\/p>\n<ul class=\"list-disc pl-5 space-y-2 text-lg text-gray-700\"><\/ul>\n<p> <\/p>\n<div class=\"flex gap-4 mt-4\"> <a id=”content-cta” class=”btn-teal px-6 py-2.5 rounded-full font-medium inline-flex items-center gap-2″ href=”https:\/\/my.bonline.com\/trial\/signup” target=”_blank” rel=”noopener noreferrer” >Try for free<\/a > <\/div>\n<p> <\/div>\n<p>  Holds either a still image (16:10) or a Vimeo player (16:9). The frame switches aspect ratio so video never letterboxes. Recommended still asset: 1600 x 1000 px (2x for retina) –> <\/p>\n<div class=\"lg:w-2\/3 w-full\"> <div id=”content-hero-frame” class=”hero-frame hero-frame–video bg-gray-100 rounded-[2rem] aspect-video relative overflow-hidden shadow-sm” > <img id=”content-hero-image” src=”https:\/\/www.bonline.com\/wp-content\/uploads\/2026\/06\/CRM-connections-simplified1.png” alt=”” class=”absolute inset-0 w-full h-full object-cover hidden” \/> <iframe id=”content-hero-video” src=”https:\/\/player.vimeo.com\/video\/1066847701?h=d9efc5c92b&badge=0&autopause=0&player_id=0&app_id=58479″ class=”absolute inset-0 w-full h-full” title=”Your CRM, connected in a few clicks” allow=”autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media” referrerpolicy=”strict-origin-when-cross-origin” allowfullscreen ><\/iframe> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/main>   <\/p>\n<section class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-16\"> <\/p>\n<div class=\"flex items-center gap-4\">  <\/p>\n<div class=\"flex-1 overflow-hidden\">  <div id=”carousel-track” class=”flex gap-4 will-change-transform” style=”transform: translateX(0px)” >  <button class=”carousel-card is-active flex-shrink-0 flex items-center gap-3 p-2 rounded-2xl bg-teal-tint hover:bg-teal-tint-hov w-[300px] text-left transition-colors” data-card-index=”0″ > <span class=\"font-medium text-[#363847] w-1\/2 px-2 text-sm\" >CRM connections, simplified<\/span > <span class=\"card-thumb card-thumb--video\"> <img src=”https:\/\/www.bonline.com\/wp-content\/uploads\/2026\/06\/CRM-connections-simplified.png” alt=”” class=”rounded-xl aspect-video object-cover” \/> <\/span> <\/button>  <button class=”carousel-card flex-shrink-0 flex items-center gap-3 p-2 rounded-2xl bg-raspberry-tint hover:bg-raspberry-tint-hov w-[300px] text-left transition-colors” data-card-index=”1″ > <span class=\"font-medium text-[#363847] w-1\/2 px-2 text-sm\" >AI Call Recording<\/span > <span class=\"card-thumb card-thumb--video\"> <img src=”https:\/\/www.bonline.com\/wp-content\/uploads\/2026\/08\/Better-call-visibility-controls-4-1.png” alt=”” class=”rounded-xl aspect-video object-cover” \/> <\/span> <\/button>  <button class=”carousel-card flex-shrink-0 flex items-center gap-3 p-2 rounded-2xl bg-citrus-tint hover:bg-citrus-tint-hov w-[300px] text-left transition-colors” data-card-index=”2″ > <span class=\"font-medium text-[#363847] w-1\/2 px-2 text-sm\" >More flexible setup, less hassle<\/span > <span class=\"card-thumb\"> <img src=”https:\/\/www.bonline.com\/more-flexible-setup-less-hassle-2\/” alt=”” class=”rounded-xl aspect-video object-cover” \/> <\/span> <\/button>  <button class=”carousel-card flex-shrink-0 flex items-center gap-3 p-2 rounded-2xl bg-tangerine-tint hover:bg-tangerine-tint-hov w-[300px] text-left transition-colors” data-card-index=”3″ > <span class=\"font-medium text-[#363847] w-1\/2 px-2 text-sm\" >AI Receptionist<\/span > <span class=\"card-thumb card-thumb--video\"> <img src=”https:\/\/www.bonline.com\/wp-content\/uploads\/2026\/08\/AI-Receptionist-7.png” alt=”” class=”rounded-xl aspect-video object-cover” \/> <\/span> <\/button> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"flex gap-2 flex-shrink-0\"> <button id=”carousel-prev” aria-label=”Previous” class=”p-2 rounded-full bg-gray-100 hover:bg-gray-200 text-gray-500 disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:bg-gray-100″ > <svg class=”w-5 h-5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ > <path d=”M15 19l-7-7 7-7″ stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ ><\/path> <\/svg> <\/button> <button id=”carousel-next” aria-label=”Next” class=”p-2 rounded-full hover:bg-blue-100 bg-cyan-50 text-[#42CCCC] disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:bg-cyan-50″ > <svg class=”w-5 h-5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ > <path d=”M9 5l7 7-7 7″ stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ ><\/path> <\/svg> <\/button> <\/div>\n<p> <\/div>\n<p> <\/section>\n<p>  <script> \/* === Carousel: infinite-loop auto-scroll ===================== The original 4 cards are cloned once so the track contains 8 cards. A requestAnimationFrame loop translates the track leftward at a slow, constant speed. When position passes the width of one full set, it wraps back by that amount \u2014 and because the second set is a pixel- perfect copy of the first, the wrap is seamless. - Hover pauses the auto-scroll so cards can be read & clicked. - Prev\/Next arrows still work; they ease over 400 ms. - Card click swaps the hero content above (heading, body, media) and marks all matching cards (original + clone) as active. ============================================================= *\/ (function () { var track = document.getElementById(\"carousel-track\"); var prevBtn = document.getElementById(\"carousel-prev\"); var nextBtn = document.getElementById(\"carousel-next\"); if (!track || !prevBtn || !nextBtn) return; \/\/ --- Clone the original cards once for seamless wrap --- var originalCards = Array.prototype.slice.call( track.querySelectorAll(\".carousel-card\"), ); originalCards.forEach(function (card) { var clone = card.cloneNode(true); clone.setAttribute(\"aria-hidden\", \"true\"); \/\/ assistive tech sees the original only clone.tabIndex = -1; \/\/ and skips clones in tab order track.appendChild(clone); }); \/\/ --- Geometry --- var CARD_WIDTH = 300; \/\/ w-[300px] var GAP = 16; \/\/ gap-4 var STEP = CARD_WIDTH + GAP; var SET_WIDTH = originalCards.length * STEP; \/\/ 4 * 316 = 1264 \/\/ --- Animation state --- var position = 0; \/\/ current x-offset in px (translated to -position) var SPEED = 22; \/\/ px \/ second (slow & smooth) var lastFrameTime = null; var isHoverPaused = false; var manualAnimToken = 0; \/\/ each manual scroll gets a fresh token \/\/ Honour the OS \"reduce motion\" setting: no ambient drift. var prefersReducedMotion = window.matchMedia && window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches; function applyTransform() { \/\/ Wrap into [0, SET_WIDTH) so we loop forever if (position >= SET_WIDTH) position -= SET_WIDTH; if (position < 0) position += SET_WIDTH; track.style.transform = \"translateX(\" + -position + \"px)\"; } \/\/ --- Auto-scroll RAF loop (always running) --- function autoTick(now) { if (lastFrameTime === null) lastFrameTime = now; var dt = (now - lastFrameTime) \/ 1000; lastFrameTime = now; \/\/ Skip motion while paused OR while a manual scroll is animating if (!isHoverPaused && manualAnimToken === 0 && !prefersReducedMotion) { position += SPEED * dt; applyTransform(); } requestAnimationFrame(autoTick); } requestAnimationFrame(autoTick); \/\/ --- Hover pause --- var viewport = track.parentElement; viewport.addEventListener(\"mouseenter\", function () { isHoverPaused = true; }); viewport.addEventListener(\"mouseleave\", function () { isHoverPaused = false; lastFrameTime = null; \/\/ avoid a dt spike on resume }); \/\/ --- Manual arrow scroll with ease-out cubic --- function manualScroll(delta) { var token = ++manualAnimToken; var startPos = position; var duration = 400; \/\/ ms var startTime = performance.now(); function tick(now) { if (token !== manualAnimToken) return; \/\/ a newer scroll superseded us var t = Math.min(1, (now - startTime) \/ duration); var eased = 1 - Math.pow(1 - t, 3); \/\/ ease-out cubic position = startPos + delta * eased; applyTransform(); if (t < 1) { requestAnimationFrame(tick); } else if (token === manualAnimToken) { manualAnimToken = 0; \/\/ hand control back to the auto-scroll lastFrameTime = null; } } requestAnimationFrame(tick); } prevBtn.addEventListener(\"click\", function () { manualScroll(-STEP); }); nextBtn.addEventListener(\"click\", function () { manualScroll(STEP); }); \/* --- Hero content, one entry per card ----------------------- mediaType is either \"video\" (Vimeo embed, 16:9) or \"image\" (still, 16:10). Only the matching URL field is used. *\/ \/* All three videos are UNLISTED on Vimeo, so each embed URL must carry its own privacy hash (?h=...). Drop the hash and the player refuses to load and renders an empty frame. If a video is ever re-uploaded, grab the new hash from Vimeo > Share > Embed. *\/ var VIMEO_PARAMS = \"&badge=0&autopause=0&player_id=0&app_id=58479\"; var contentData = [ { heading: \"Your CRM, connected in a few clicks\", body: \"Connect HubSpot, Salesforce, Zoho and 200+ more directly in MYbOnline. Your contacts sync automatically, your calls get logged for you, and you can dial straight from your CRM in one click. No devs, no downtime, no drama.\", mediaType: \"video\", videoUrl: \"https:\/\/player.vimeo.com\/video\/1066847701?h=d9efc5c92b\" + VIMEO_PARAMS, imageUrl: \"https:\/\/www.bonline.com\/wp-content\/uploads\/2026\/06\/CRM-connections-simplified1.png\", }, { heading: \"Every call, scored and summarised\", body: \"Every call is transcribed, summarised and scored for sentiment \\u2014 positive, neutral or negative \\u2014 with key points and action items. Search by name or number, or filter by sentiment to spot unhappy customers before a problem grows, and use the calls that went well to coach your team.\", mediaType: \"video\", videoUrl: \"https:\/\/player.vimeo.com\/video\/1135333762?h=0b872bb2c1\" + VIMEO_PARAMS, imageUrl: \"https:\/\/www.bonline.com\/wp-content\/uploads\/2026\/08\/Better-call-visibility-controls-4-1.png\", }, { heading: \"Plug in your kit, no faff\", body: \"Connect analogue devices like EPOS machines and payment terminals using plug-and-play, ATA-supported adapters. Available to purchase right in my.bonline.com.\", mediaType: \"image\", videoUrl: \"\", imageUrl: \"https:\/\/www.bonline.com\/more-flexible-setup-less-hassle-1\/\", }, { heading: \"Every caller answered, every lead captured\", body: \"Setup takes minutes \\u2014 add your website and your AI Receptionist builds its own FAQs. It answers callers' questions, books appointments into your connected Google or Outlook calendar, and captures new leads automatically. Pick the voice that fits your brand, and decide what happens when it can't answer: transfer to your team, take a voicemail, or save the caller's details as a fresh lead.\", mediaType: \"video\", videoUrl: \"https:\/\/player.vimeo.com\/video\/1216375732?h=5d9fa5717d\" + VIMEO_PARAMS, imageUrl: \"https:\/\/www.bonline.com\/wp-content\/uploads\/2026\/08\/AI-Receptionist-7.png\", }, ]; var headingEl = document.getElementById(\"content-heading\"); var bodyEl = document.getElementById(\"content-body\"); var heroFrameEl = document.getElementById(\"content-hero-frame\"); var heroImageEl = document.getElementById(\"content-hero-image\"); var heroVideoEl = document.getElementById(\"content-hero-video\"); \/* Swap the hero between a Vimeo player and a still image. Clearing the iframe src on the way out matters: without it the previous video keeps playing (and keeps making noise) offscreen. *\/ function setHeroMedia(data) { var isVideo = data.mediaType === \"video\" && data.videoUrl; if (heroFrameEl) { heroFrameEl.classList.toggle(\"aspect-video\", !!isVideo); heroFrameEl.classList.toggle(\"aspect-[16\/10]\", !isVideo); heroFrameEl.classList.toggle(\"hero-frame--video\", !!isVideo); } if (heroVideoEl) { heroVideoEl.classList.toggle(\"hidden\", !isVideo); heroVideoEl.src = isVideo ? data.videoUrl : \"\"; if (isVideo) heroVideoEl.title = data.heading; } if (heroImageEl) { heroImageEl.classList.toggle(\"hidden\", !!isVideo); if (!isVideo && data.imageUrl) heroImageEl.src = data.imageUrl; } } track.addEventListener(\"click\", function (e) { var card = e.target.closest(\".carousel-card\"); if (!card) return; var idx = parseInt(card.getAttribute(\"data-card-index\"), 10); if (isNaN(idx)) return; var data = contentData[idx]; if (!data) return; if (headingEl) headingEl.textContent = data.heading; if (bodyEl) bodyEl.textContent = data.body; setHeroMedia(data); \/\/ Apply .is-active to every card with the matching data-card-index \/\/ (so the original and its clone stay in sync as they scroll). var allCards = track.querySelectorAll(\".carousel-card\"); for (var i = 0; i < allCards.length; i++) { var match = allCards[i].getAttribute(\"data-card-index\") === String(idx); allCards[i].classList.toggle(\"is-active\", match); } }); })(); <\/script>  <\/p>\n<div class=\"bg-gray-50 py-6 border-t border-gray-200\"> <div class=”max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center gap-6″ > <span class=\"font-medium text-[#363847]\">Follow us<\/span> <\/p>\n<div class=\"flex gap-4\">  <a class=”text-gray-500 hover:text-[#363847]” href=”https:\/\/www.youtube.com\/@BonlineLtd” target=”_blank” rel=”noopener noreferrer” aria-label=”bOnline on YouTube” > <svg class=\"w-6 h-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\"> <path d=”M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z” ><\/path> <\/svg> <\/a>  <a class=”text-gray-500 hover:text-[#363847]” href=”https:\/\/x.com\/bOnlineLtd” target=”_blank” rel=”noopener noreferrer” aria-label=”bOnline on X” > <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\"> <path d=”M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z” ><\/path> <\/svg> <\/a>  <a class=”text-gray-500 hover:text-[#363847]” href=”https:\/\/www.facebook.com\/bOnlineLtd” target=”_blank” rel=”noopener noreferrer” aria-label=”bOnline on Facebook” > <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\"> <path clip-rule=”evenodd” d=”M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z” fill-rule=”evenodd” ><\/path> <\/svg> <\/a>  <a class=”text-gray-500 hover:text-[#363847]” href=”https:\/\/www.linkedin.com\/company\/bonline-limited\/” target=”_blank” rel=”noopener noreferrer” aria-label=”bOnline on LinkedIn” > <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\"> <path clip-rule=”evenodd” d=”M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z” fill-rule=”evenodd” ><\/path> <\/svg> <\/a>  <a class=”text-gray-500 hover:text-[#363847]” href=”https:\/\/www.instagram.com\/bonlineltd\/” target=”_blank” rel=”noopener noreferrer” aria-label=”bOnline on Instagram” > <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\"> <path d=”M12 2.163c3.204 0 3.584.012 4.849.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.265.058-1.644.07-4.849.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.76 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z” \/> <\/svg> <\/a> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<footer class=\"bg-[#363847] text-white\"> <\/p>\n<div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-12 pb-10\">  <\/p>\n<hr class=\"border-white\/15 mb-8\" \/>  <div class=”flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 text-sm” > <pee class=\"text-white\/90\"> \u00a9 2026 bOnline Limited, all rights reserved <\/pee> <nav class=”flex flex-wrap items-center gap-x-3 gap-y-2 text-white\/90″ aria-label=”Legal” > <a class=”hover:text-white underline-offset-4 hover:underline” href=”https:\/\/www.bonline.com\/terms-privacy\/” target=”_blank” rel=”noopener noreferrer” >Terms & conditions<\/a > <span class=\"text-white\/40\" aria-hidden=\"true\">|<\/span> <a class=”hover:text-white underline-offset-4 hover:underline” href=”https:\/\/www.bonline.com\/privacy-policy\/” target=”_blank” rel=”noopener noreferrer” >Privacy policy<\/a > <span class=\"text-white\/40\" aria-hidden=\"true\">|<\/span> <a class=”hover:text-white underline-offset-4 hover:underline” href=”https:\/\/www.bonline.com\/privacy-policy\/” target=”_blank” rel=”noopener noreferrer” >Cookie policy<\/a > <\/nav>\n<p> <\/div>\n<p>  <pee class=\"mt-8 text-sm text-white\/80 leading-relaxed\"> Registered in England No. 7710947. VAT Reg. 121 4707 49. bOnline\u00ae is a registered trademark of bOnline. bOnline Ltd. Terminal House, 52 Grosvenor Gardens, London SW1W 0AU <\/pee> <\/div>\n<p> <\/footer>\n<p>   <div class=”fixed top-0 left-0 right-0 bg-white\/90 backdrop-blur-sm border-b border-gray-200 z-40 hidden md:block” > <div class=”max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between” > <\/p>\n<div class=\"flex items-center gap-8 text-sm font-medium text-gray-600\"> <svg width=”172″ height=”70″ viewBox=”0 0 172 70″ fill=”none” xmlns=”http:\/\/www.w3.org\/2000\/svg” class=”h-10 w-auto” aria-label=”bOnline” > <g clip-path=\"url(#clip0_1265_240)\"> <path d=”M71.3765 20.8072C68.133 20.8072 65.9617 23.3359 65.9617 27.0927C65.9617 30.8496 68.1368 33.3782 71.3765 33.3782C74.6162 33.3782 76.7912 30.8496 76.7912 27.0927C76.7912 23.3359 74.6162 20.8072 71.3765 20.8072ZM71.3765 41.2874C62.954 41.2874 57.3415 35.5951 57.3415 27.0965C57.3415 18.598 62.954 12.8258 71.3765 12.8258C79.799 12.8258 85.4115 18.5181 85.4115 27.0965C85.4115 35.6749 79.799 41.2874 71.3765 41.2874Z” fill=”#42CCCC” ><\/path> <path d=”M92.6438 20.6475C93.9101 19.2634 96.5984 18.4345 99.0092 18.4345C104.386 18.4345 107.31 20.9251 107.31 27.0927V40.1391C107.31 40.4547 107.032 40.7323 106.717 40.7323H99.7583C99.4427 40.7323 99.1651 40.4547 99.2031 40.1391V28.3209C99.2031 26.7391 98.4921 25.8303 97.2677 25.8303C95.0128 25.8303 94.6591 28.0434 94.6591 28.0434V40.1391C94.6591 40.4547 94.3816 40.7323 94.066 40.7323H87.1074C86.7918 40.7323 86.5142 40.4547 86.5142 40.1391V19.541C86.5142 19.1874 86.7119 18.9858 87.0656 18.9858H91.4955C91.7731 18.9858 92.0088 19.1037 92.1267 19.3813L92.64 20.6475H92.6438Z” fill=”#42CCCC” ><\/path> <path d=”M116.086 12.0691C116.402 12.0691 116.679 12.3467 116.679 12.6243V40.1391C116.679 40.4547 116.402 40.7323 116.086 40.7323H109.128C108.812 40.7323 108.534 40.4547 108.534 40.1391V12.6243C108.534 12.3467 108.812 12.0691 109.128 12.0691H116.086Z” fill=”#42CCCC” ><\/path> <path d=”M125.771 18.9896C126.087 18.9896 126.364 19.2672 126.364 19.541V40.1391C126.364 40.4547 126.087 40.7323 125.771 40.7323H118.813C118.497 40.7323 118.219 40.4547 118.219 40.1391V19.541C118.219 19.2634 118.497 18.9896 118.813 18.9896H125.771ZM126.6 14.362C126.6 16.6929 124.862 18.2748 122.25 18.2748C119.638 18.2748 117.9 16.6929 117.9 14.362C117.9 11.9094 119.638 10.2895 122.25 10.2895C124.862 10.2895 126.6 11.9094 126.6 14.362Z” fill=”#42CCCC” ><\/path> <path d=”M133.954 20.6475C135.22 19.2634 137.909 18.4345 140.319 18.4345C145.696 18.4345 148.62 20.9251 148.62 27.0927V40.1391C148.62 40.4547 148.343 40.7323 148.027 40.7323H141.069C140.753 40.7323 140.475 40.4547 140.513 40.1391V28.3209C140.513 26.7391 139.802 25.8303 138.578 25.8303C136.323 25.8303 135.969 28.0434 135.969 28.0434V40.1391C135.969 40.4547 135.692 40.7323 135.376 40.7323H128.418C128.102 40.7323 127.824 40.4547 127.824 40.1391V19.541C127.824 19.1874 128.022 18.9858 128.376 18.9858H132.806C133.083 18.9858 133.319 19.1037 133.437 19.3813L133.95 20.6475H133.954Z” fill=”#42CCCC” ><\/path> <path d=”M163.245 27.9635C163.245 26.222 162.176 25.0774 160.594 25.0774C158.815 25.0774 157.628 26.222 157.628 27.9635H163.241H163.245ZM169.332 38.5192C169.412 38.7968 169.332 38.9527 169.055 39.1124C166.96 40.4965 163.914 41.3254 160.872 41.3254C153.875 41.3254 149.21 36.7396 149.21 29.899C149.21 23.0583 153.795 18.4345 160.674 18.4345C167.553 18.4345 171.112 22.6628 171.112 29.8609C171.112 30.4541 171.074 31.0473 170.952 31.6405C170.914 31.9561 170.716 32.1158 170.359 32.1158H157.67C157.67 32.1158 157.67 34.6064 160.99 34.6064C163.005 34.6064 165.26 34.1311 167.039 33.3022C167.317 33.1843 167.553 33.3402 167.633 33.6178L169.332 38.5192Z” fill=”#42CCCC” ><\/path> <path d=”M32.9752 41.9224C30.3477 42.2685 27.7049 41.5802 26.009 40.2075L25.606 41.6981C25.4957 42.0707 25.3284 42.3331 25.0546 42.3673L20.6247 42.9491C20.3091 42.9909 20.0011 42.7514 19.9593 42.4396L16.3697 15.1605C16.3317 14.8867 16.5712 14.5749 16.8868 14.5331L23.7846 13.6243C24.1002 13.5825 24.4082 13.822 24.4462 14.0958L25.4006 21.3472C26.4539 20.2521 28.1422 19.4725 29.9864 19.2292C36.1807 18.4154 40.9338 22.4157 41.8236 29.1955C42.721 36.0134 39.1656 41.1087 32.9714 41.9224M49.3107 0L0 11.6584L7.52893 54.3566L20.1684 52.4401L37.7245 69.9924L41.1809 49.2574L58.3378 46.6565L49.3107 0Z” fill=”#42CCCC” ><\/path> <path d=”M29.1917 26.1915C27.819 26.3741 26.6783 27.4007 26.3779 28.7544L27.0281 33.6938C27.6707 34.9259 29.0358 35.6217 30.4085 35.443C32.5645 35.1578 33.7661 33.0854 33.3973 30.264C33.036 27.5186 31.3477 25.9064 29.1917 26.1915Z” fill=”#42CCCC” ><\/path> <\/g> <defs> <clipPath id=\"clip0_1265_240\"> <rect width=\"171.112\" height=\"70\" fill=\"white\"><\/rect> <\/clipPath> <\/defs> <\/svg> <\/div>\n<p> <a href=”https:\/\/my.bonline.com\/trial\/signup” target=”_blank” rel=”noopener noreferrer” class=”btn-teal px-6 py-2 rounded-full font-medium text-sm” >Try for free<\/a > <\/div>\n<p> <\/div>\n<p> <\/body><\/html>[\/et_pb_fullwidth_code][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>What’s New Sofia Sans Extra Condensed Extra Bold = brand ‘hero’ font (caps only). Sofia Sans (paid Sofia Pro family substitute, not on Google Fonts) = body. –> rel=”stylesheet” href=”https:\/\/fonts.googleapis.com\/css2?family=Sofia+Sans:wght@300;400;500;700&family=Sofia+Sans+Extra+Condensed:wght@800&display=swap” \/ so the first player frame paints sooner. –> Your CRM, connected in a few clicks id=”content-body” class=”text-lg text-[#363847]\/80 leading-relaxed” Connect HubSpot, Salesforce, Zoho and […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"\n[sc name=\"whats_new\" ][\/sc]\n","_et_gb_content_width":"","footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"featured_image_src":null,"featured_image_src_square":null,"_links":{"self":[{"href":"https:\/\/news.bonline.com\/index.php?rest_route=\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/news.bonline.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/news.bonline.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/news.bonline.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/news.bonline.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9"}],"version-history":[{"count":9,"href":"https:\/\/news.bonline.com\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":39,"href":"https:\/\/news.bonline.com\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions\/39"}],"wp:attachment":[{"href":"https:\/\/news.bonline.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":9,"date":"2026-06-22T15:10:58","date_gmt":"2026-06-22T15:10:58","guid":{"rendered":"https:\/\/news.bonline.com\/?page_id=9"},"modified":"2026-08-20T11:43:07","modified_gmt":"2026-08-20T11:43:07","slug":"9-2","status":"publish","type":"page","link":"https:\/\/news.bonline.com\/","title":{"rendered":"What’s New"},"content":{"rendered":"

[et_pb_section fb_built=”1″ fullwidth=”on” _builder_version=”4.27.6″ _module_preset=”default” global_colors_info=”{}”][et_pb_fullwidth_code _builder_version=”4.27.6″ _module_preset=”default” hover_enabled=”0″ global_colors_info=”{}” sticky_enabled=”0″] What’s New<\/title>  <\/p>\n<style> *, :after, :before { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgba(59, 130, 246, 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } ::backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgba(59, 130, 246, 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } \/*! tailwindcss v3.4.17 | MIT License | https:\/\/tailwindcss.com*\/ *, :after, :before { box-sizing: border-box; border: 0 solid #e5e7eb; } :after, :before { --tw-content: \"\"; } :host, html { line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; font-feature-settings: normal; font-variation-settings: normal; -webkit-tap-highlight-color: transparent; } body { margin: 0; line-height: inherit; } hr { height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, pre, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; font-feature-settings: normal; font-variation-settings: normal; font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } button, input, optgroup, select, textarea { font-family: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; margin: 0; padding: 0; } button, select { text-transform: none; } button, input:where([type=\"button\"]), input:where([type=\"reset\"]), input:where([type=\"submit\"]) { -webkit-appearance: button; background-color: transparent; background-image: none; } :-moz-focusring { outline: auto; } :-moz-ui-invalid { box-shadow: none; } progress { vertical-align: baseline; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } [type=\"search\"] { -webkit-appearance: textfield; outline-offset: -2px; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } summary { display: list-item; } blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre { margin: 0; } fieldset { margin: 0; } fieldset, legend { padding: 0; } menu, ol, ul { list-style: none; margin: 0; padding: 0; } dialog { padding: 0; } textarea { resize: vertical; } input::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; color: #9ca3af; } input::placeholder, textarea::placeholder { opacity: 1; color: #9ca3af; } [role=\"button\"], button { cursor: pointer; } :disabled { cursor: default; } audio, canvas, embed, iframe, img, object, svg, video { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } [hidden]:where(:not([hidden=\"until-found\"])) { display: none; } .visible { visibility: visible; } .fixed { position: fixed; } .absolute { position: absolute; } .relative { position: relative; } .inset-0 { top: 0; right: 0; bottom: 0; left: 0; } .bottom-6 { bottom: 1.5rem; } .left-0 { left: 0; } .left-6 { left: 1.5rem; } .right-0 { right: 0; } .right-6 { right: 1.5rem; } .top-0 { top: 0; } .top-6 { top: 1.5rem; } .z-40 { z-index: 40; } .mx-auto { margin-left: auto; margin-right: auto; } .mb-8 { margin-bottom: 2rem; } .mt-1 { margin-top: 0.25rem; } .mt-4 { margin-top: 1rem; } .mt-8 { margin-top: 2rem; } .flex { display: flex; } .inline-flex { display: inline-flex; } .table { display: table; } .hidden { display: none; } .aspect-\\[16\\\/10\\] { aspect-ratio: 16\/10; } .aspect-video { aspect-ratio: 16\/9; } .h-10 { height: 2.5rem; } .h-16 { height: 4rem; } .h-5 { height: 1.25rem; } .h-6 { height: 1.5rem; } .w-1 { width: 0.25rem; } .w-1\\\/2 { width: 50%; } .w-2 { width: 0.5rem; } .w-5 { width: 1.25rem; } .w-6 { width: 1.5rem; } .w-\\[300px\\] { width: 300px; } .w-auto { width: auto; } .w-full { width: 100%; } .max-w-7xl { max-width: 80rem; } .flex-1 { flex: 1 1 0%; } .flex-shrink-0 { flex-shrink: 0; } .transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .select-none { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .resize { resize: both; } .list-disc { list-style-type: disc; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .items-start { align-items: flex-start; } .items-center { align-items: center; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .gap-12 { gap: 3rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; } .gap-x-3 { -moz-column-gap: 0.75rem; column-gap: 0.75rem; } .gap-y-2 { row-gap: 0.5rem; } .space-y-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.5rem * (1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); } .overflow-hidden { overflow: hidden; } .rounded-2xl { border-radius: 1rem; } .rounded-\\[2rem\\] { border-radius: 2rem; } .rounded-full { border-radius: 9999px; } .rounded-xl { border-radius: 0.75rem; } .border { border-width: 1px; } .border-2 { border-width: 2px; } .border-b { border-bottom-width: 1px; } .border-t { border-top-width: 1px; } .border-dashed { border-style: dashed; } .border-gray-200 { --tw-border-opacity: 1; border-color: rgb(229 231 235 \/ var(--tw-border-opacity, 1)); } .border-gray-300 { --tw-border-opacity: 1; border-color: rgb(209 213 219 \/ var(--tw-border-opacity, 1)); } .border-gray-400 { --tw-border-opacity: 1; border-color: rgb(156 163 175 \/ var(--tw-border-opacity, 1)); } .border-white { --tw-border-opacity: 1; border-color: rgb(255 255 255 \/ var(--tw-border-opacity, 1)); } .border-white\\\/15 { border-color: hsla(0, 0%, 100%, 0.15); } .bg-\\[\\#363847\\] { --tw-bg-opacity: 1; background-color: rgb(54 56 71 \/ var(--tw-bg-opacity, 1)); } .bg-blue-100 { --tw-bg-opacity: 1; background-color: rgb(219 234 254 \/ var(--tw-bg-opacity, 1)); } .bg-cyan-50 { --tw-bg-opacity: 1; background-color: rgb(236 254 255 \/ var(--tw-bg-opacity, 1)); } .bg-gray-100 { --tw-bg-opacity: 1; background-color: rgb(243 244 246 \/ var(--tw-bg-opacity, 1)); } .bg-gray-50 { --tw-bg-opacity: 1; background-color: rgb(249 250 251 \/ var(--tw-bg-opacity, 1)); } .bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 \/ var(--tw-bg-opacity, 1)); } .bg-white\\\/60 { background-color: hsla(0, 0%, 100%, 0.6); } .bg-white\\\/90 { background-color: hsla(0, 0%, 100%, 0.9); } .object-cover { -o-object-fit: cover; object-fit: cover; } .p-2 { padding: 0.5rem; } .p-3 { padding: 0.75rem; } .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-2\\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; } .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; } .pb-10 { padding-bottom: 2.5rem; } .pb-12 { padding-bottom: 3rem; } .pb-16 { padding-bottom: 4rem; } .pl-5 { padding-left: 1.25rem; } .pt-12 { padding-top: 3rem; } .pt-16 { padding-top: 4rem; } .pt-32 { padding-top: 8rem; } .text-left { text-align: left; } .text-center { text-align: center; } .text-6xl { font-size: 3.75rem; line-height: 1; } .text-\\[10px\\] { font-size: 10px; } .text-base { font-size: 1rem; line-height: 1.5rem; } .text-lg { font-size: 1.125rem; line-height: 1.75rem; } .text-sm { font-size: 0.875rem; line-height: 1.25rem; } .text-xs { font-size: 0.75rem; line-height: 1rem; } .font-medium { font-weight: 500; } .uppercase { text-transform: uppercase; } .leading-relaxed { line-height: 1.625; } .leading-tight { line-height: 1.25; } .text-\\[\\#363847\\] { --tw-text-opacity: 1; color: rgb(54 56 71 \/ var(--tw-text-opacity, 1)); } .text-\\[\\#363847\\]\\\/80 { color: rgba(54, 56, 71, 0.8); } .text-\\[\\#42CCCC\\] { --tw-text-opacity: 1; color: rgb(66 204 204 \/ var(--tw-text-opacity, 1)); } .text-blue-600 { --tw-text-opacity: 1; color: rgb(37 99 235 \/ var(--tw-text-opacity, 1)); } .text-gray-400 { --tw-text-opacity: 1; color: rgb(156 163 175 \/ var(--tw-text-opacity, 1)); } .text-gray-500 { --tw-text-opacity: 1; color: rgb(107 114 128 \/ var(--tw-text-opacity, 1)); } .text-gray-600 { --tw-text-opacity: 1; color: rgb(75 85 99 \/ var(--tw-text-opacity, 1)); } .text-gray-700 { --tw-text-opacity: 1; color: rgb(55 65 81 \/ var(--tw-text-opacity, 1)); } .text-gray-800 { --tw-text-opacity: 1; color: rgb(31 41 55 \/ var(--tw-text-opacity, 1)); } .text-white { --tw-text-opacity: 1; color: rgb(255 255 255 \/ var(--tw-text-opacity, 1)); } .text-white\\\/40 { color: hsla(0, 0%, 100%, 0.4); } .text-white\\\/80 { color: hsla(0, 0%, 100%, 0.8); } .text-white\\\/90 { color: hsla(0, 0%, 100%, 0.9); } .underline-offset-4 { text-underline-offset: 4px; } .shadow-md { --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); } .shadow-md, .shadow-sm { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-sm { --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); } .backdrop-blur-sm { --tw-backdrop-blur: blur(4px); -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.15s; } .transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.15s; } .transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.15s; } .duration-300 { transition-duration: 0.3s; } .ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); } .will-change-transform { will-change: transform; } .hover\\:bg-blue-100:hover { --tw-bg-opacity: 1; background-color: rgb(219 234 254 \/ var(--tw-bg-opacity, 1)); } .hover\\:bg-blue-200:hover { --tw-bg-opacity: 1; background-color: rgb(191 219 254 \/ var(--tw-bg-opacity, 1)); } .hover\\:bg-gray-200:hover { --tw-bg-opacity: 1; background-color: rgb(229 231 235 \/ var(--tw-bg-opacity, 1)); } .hover\\:bg-gray-50:hover { --tw-bg-opacity: 1; background-color: rgb(249 250 251 \/ var(--tw-bg-opacity, 1)); } .hover\\:text-\\[\\#363847\\]:hover { --tw-text-opacity: 1; color: rgb(54 56 71 \/ var(--tw-text-opacity, 1)); } .hover\\:text-white:hover { --tw-text-opacity: 1; color: rgb(255 255 255 \/ var(--tw-text-opacity, 1)); } .hover\\:underline:hover { text-decoration-line: underline; } .disabled\\:cursor-not-allowed:disabled { cursor: not-allowed; } .disabled\\:opacity-30:disabled { opacity: 0.3; } .disabled\\:hover\\:bg-cyan-50:hover:disabled { --tw-bg-opacity: 1; background-color: rgb(236 254 255 \/ var(--tw-bg-opacity, 1)); } .disabled\\:hover\\:bg-gray-100:hover:disabled { --tw-bg-opacity: 1; background-color: rgb(243 244 246 \/ var(--tw-bg-opacity, 1)); } @media (min-width: 640px) { .sm\\:flex-row { flex-direction: row; } .sm\\:items-center { align-items: center; } .sm\\:justify-between { justify-content: space-between; } .sm\\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } } @media (min-width: 768px) { .md\\:block { display: block; } } @media (min-width: 1024px) { .lg\\:w-1\\\/3 { width: 33.333333%; } .lg\\:w-2\\\/3 { width: 66.666667%; } .lg\\:flex-row { flex-direction: row; } .lg\\:px-8 { padding-left: 2rem; padding-right: 2rem; } } <\/style>\n<p>  Sofia Sans Extra Condensed Extra Bold = brand ‘hero’ font (caps only). Sofia Sans (paid Sofia Pro family substitute, not on Google Fonts) = body. –> <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/> <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/> <link rel=”stylesheet” href=”https:\/\/fonts.googleapis.com\/css2?family=Sofia+Sans:wght@300;400;500;700&family=Sofia+Sans+Extra+Condensed:wght@800&display=swap” \/>  so the first player frame paints sooner. –> <link rel=\"preconnect\" href=\"https:\/\/player.vimeo.com\" \/> <link rel=\"preconnect\" href=\"https:\/\/i.vimeocdn.com\" crossorigin \/> <\/p>\n<style data-purpose=\"typography\"> body { font-family: \"Sofia Sans\", sans-serif; color: #363847; \/* Ink *\/ \/* Body fills the viewport; main grows to absorb any leftover height so footers always sit flush against the content above them. *\/ min-height: 100vh; display: flex; flex-direction: column; } body > main { flex: 1; } .hero-font { font-family: \"Sofia Sans Extra Condensed\", sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: 0; line-height: 0.95; } <\/style>\n<p> <\/p>\n<style data-purpose=\"custom-utilities\"> \/* === bOnline brand palette === Vibrant Teal #42CCCC \u00b7 Citrus #CCED66 Tangerine #FFB547 \u00b7 Raspberry #FF4766 Ink #363847 *\/ \/* Primary CTA in Vibrant Teal *\/ .btn-teal { background-color: #42cccc; color: white; transition: background-color 0.2s; } .btn-teal:hover { background-color: #3bb8b8; } \/* legacy alias so existing .btn-blue still works *\/ .btn-blue { background-color: #42cccc; color: white; transition: background-color 0.2s; } .btn-blue:hover { background-color: #3bb8b8; } .btn-outline { color: #42cccc; border: 1px solid #42cccc; transition: background-color 0.2s; } .btn-outline:hover { background-color: #ecfafa; } \/* 10% teal tint *\/ \/* Active card = teal border. Each card keeps its own background tint so the brand colour-coding survives selection. All cards reserve a 2 px transparent border so the layout doesn't shift on activation. *\/ .carousel-card { border: 2px solid transparent; transition: border-color 0.2s, background-color 0.2s; } .carousel-card.is-active { border-color: #42cccc; } \/* Card tints \u2014 20% of each brand colour (90% white + 10% colour is too faint at this size) *\/ .bg-teal-tint { background-color: #d9f5f5; } \/* Vibrant Teal 20% *\/ .bg-citrus-tint { background-color: #f5fbe0; } \/* Citrus 20% *\/ .bg-tangerine-tint { background-color: #fff0da; } \/* Tangerine 20% *\/ .bg-raspberry-tint { background-color: #ffdae0; } \/* Raspberry 20% *\/ \/* Hover states \u2014 bump to 30% *\/ .hover\\:bg-teal-tint-hov:hover { background-color: #c6efef; } .hover\\:bg-citrus-tint-hov:hover { background-color: #f0f9d1; } .hover\\:bg-tangerine-tint-hov:hover { background-color: #ffe9c6; } .hover\\:bg-raspberry-tint-hov:hover { background-color: #ffc6cf; } \/* === Hero media frame === The frame holds either a still image or a Vimeo player, and swaps between them as cards are selected. Video sits on Ink rather than grey so any letterboxing reads as intentional. *\/ .hero-frame--video { background-color: #363847; } \/* The precompiled Tailwind build on this page has no .h-full utility (only h-5\/6\/10\/16), so an iframe relying on it collapses to the browser default 300x150. Pin both children to the frame explicitly here \u2014 ID-scoped, so it holds regardless of which utilities the next Tailwind rebuild happens to include. *\/ .h-full { height: 100%; } #content-hero-frame > img, #content-hero-frame > iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; border: 0; } #content-hero-frame > img { -o-object-fit: cover; object-fit: cover; } \/* Small teal play badge on carousel cards that open a video. *\/ .card-thumb { position: relative; width: 50%; } .card-thumb img { width: 100%; } .card-thumb--video::after { content: \"\"; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 9999px; background-color: rgba(66, 204, 204, 0.92); background-image: url(\"data:image\/svg+xml;charset=utf-8,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M9 6.5v11l9-5.5z'\/%3E%3C\/svg%3E\"); background-repeat: no-repeat; background-position: 52% 50%; background-size: 16px 16px; pointer-events: none; } \/* Respect reduced-motion: pause the carousel's ambient drift. *\/ @media (prefers-reduced-motion: reduce) { #carousel-track { transition: none; } } <\/style>\n<p> <\/head> <body class=\"bg-white\">  <main class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-32 pb-12\"> <\/p>\n<div class=\"flex flex-col lg:flex-row gap-12 items-start\">  <\/p>\n<div class=\"lg:w-1\/3 flex flex-col gap-6\"> <\/p>\n<h1 id=\"content-heading\" class=\"hero-font text-6xl text-[#363847]\"> Your CRM, connected in a few clicks <\/h1>\n<p> <p id=”content-body” class=”text-lg text-[#363847]\/80 leading-relaxed” > Connect HubSpot, Salesforce, Zoho and 200+ more directly in MYbOnline. Your contacts sync automatically, your calls get logged for you, and you can dial straight from your CRM in one click. No devs, no downtime, no drama. <\/pee> <\/p>\n<ul class=\"list-disc pl-5 space-y-2 text-lg text-gray-700\"><\/ul>\n<p> <\/p>\n<div class=\"flex gap-4 mt-4\"> <a id=”content-cta” class=”btn-teal px-6 py-2.5 rounded-full font-medium inline-flex items-center gap-2″ href=”https:\/\/my.bonline.com\/trial\/signup” target=”_blank” rel=”noopener noreferrer” >Try for free<\/a > <\/div>\n<p> <\/div>\n<p>  Holds either a still image (16:10) or a Vimeo player (16:9). The frame switches aspect ratio so video never letterboxes. Recommended still asset: 1600 x 1000 px (2x for retina) –> <\/p>\n<div class=\"lg:w-2\/3 w-full\"> <div id=”content-hero-frame” class=”hero-frame hero-frame–video bg-gray-100 rounded-[2rem] aspect-video relative overflow-hidden shadow-sm” > <img id=”content-hero-image” src=”https:\/\/www.bonline.com\/wp-content\/uploads\/2026\/06\/CRM-connections-simplified1.png” alt=”” class=”absolute inset-0 w-full h-full object-cover hidden” \/> <iframe id=”content-hero-video” src=”https:\/\/player.vimeo.com\/video\/1066847701?h=d9efc5c92b&badge=0&autopause=0&player_id=0&app_id=58479″ class=”absolute inset-0 w-full h-full” title=”Your CRM, connected in a few clicks” allow=”autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media” referrerpolicy=”strict-origin-when-cross-origin” allowfullscreen ><\/iframe> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p> <\/main>   <\/p>\n<section class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-16\"> <\/p>\n<div class=\"flex items-center gap-4\">  <\/p>\n<div class=\"flex-1 overflow-hidden\">  <div id=”carousel-track” class=”flex gap-4 will-change-transform” style=”transform: translateX(0px)” >  <button class=”carousel-card is-active flex-shrink-0 flex items-center gap-3 p-2 rounded-2xl bg-teal-tint hover:bg-teal-tint-hov w-[300px] text-left transition-colors” data-card-index=”0″ > <span class=\"font-medium text-[#363847] w-1\/2 px-2 text-sm\" >CRM connections, simplified<\/span > <span class=\"card-thumb card-thumb--video\"> <img src=”https:\/\/www.bonline.com\/wp-content\/uploads\/2026\/06\/CRM-connections-simplified.png” alt=”” class=”rounded-xl aspect-video object-cover” \/> <\/span> <\/button>  <button class=”carousel-card flex-shrink-0 flex items-center gap-3 p-2 rounded-2xl bg-raspberry-tint hover:bg-raspberry-tint-hov w-[300px] text-left transition-colors” data-card-index=”1″ > <span class=\"font-medium text-[#363847] w-1\/2 px-2 text-sm\" >AI Call Recording<\/span > <span class=\"card-thumb card-thumb--video\"> <img src=”https:\/\/www.bonline.com\/wp-content\/uploads\/2026\/08\/Better-call-visibility-controls-4-1.png” alt=”” class=”rounded-xl aspect-video object-cover” \/> <\/span> <\/button>  <button class=”carousel-card flex-shrink-0 flex items-center gap-3 p-2 rounded-2xl bg-citrus-tint hover:bg-citrus-tint-hov w-[300px] text-left transition-colors” data-card-index=”2″ > <span class=\"font-medium text-[#363847] w-1\/2 px-2 text-sm\" >More flexible setup, less hassle<\/span > <span class=\"card-thumb\"> <img src=”https:\/\/www.bonline.com\/more-flexible-setup-less-hassle-2\/” alt=”” class=”rounded-xl aspect-video object-cover” \/> <\/span> <\/button>  <button class=”carousel-card flex-shrink-0 flex items-center gap-3 p-2 rounded-2xl bg-tangerine-tint hover:bg-tangerine-tint-hov w-[300px] text-left transition-colors” data-card-index=”3″ > <span class=\"font-medium text-[#363847] w-1\/2 px-2 text-sm\" >AI Receptionist<\/span > <span class=\"card-thumb card-thumb--video\"> <img src=”https:\/\/www.bonline.com\/wp-content\/uploads\/2026\/08\/AI-Receptionist-7.png” alt=”” class=”rounded-xl aspect-video object-cover” \/> <\/span> <\/button> <\/div>\n<p> <\/div>\n<p>  <\/p>\n<div class=\"flex gap-2 flex-shrink-0\"> <button id=”carousel-prev” aria-label=”Previous” class=”p-2 rounded-full bg-gray-100 hover:bg-gray-200 text-gray-500 disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:bg-gray-100″ > <svg class=”w-5 h-5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ > <path d=”M15 19l-7-7 7-7″ stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ ><\/path> <\/svg> <\/button> <button id=”carousel-next” aria-label=”Next” class=”p-2 rounded-full hover:bg-blue-100 bg-cyan-50 text-[#42CCCC] disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:bg-cyan-50″ > <svg class=”w-5 h-5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ > <path d=”M9 5l7 7-7 7″ stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ ><\/path> <\/svg> <\/button> <\/div>\n<p> <\/div>\n<p> <\/section>\n<p>  <script> \/* === Carousel: infinite-loop auto-scroll ===================== The original 4 cards are cloned once so the track contains 8 cards. A requestAnimationFrame loop translates the track leftward at a slow, constant speed. When position passes the width of one full set, it wraps back by that amount \u2014 and because the second set is a pixel- perfect copy of the first, the wrap is seamless. - Hover pauses the auto-scroll so cards can be read & clicked. - Prev\/Next arrows still work; they ease over 400 ms. - Card click swaps the hero content above (heading, body, media) and marks all matching cards (original + clone) as active. ============================================================= *\/ (function () { var track = document.getElementById(\"carousel-track\"); var prevBtn = document.getElementById(\"carousel-prev\"); var nextBtn = document.getElementById(\"carousel-next\"); if (!track || !prevBtn || !nextBtn) return; \/\/ --- Clone the original cards once for seamless wrap --- var originalCards = Array.prototype.slice.call( track.querySelectorAll(\".carousel-card\"), ); originalCards.forEach(function (card) { var clone = card.cloneNode(true); clone.setAttribute(\"aria-hidden\", \"true\"); \/\/ assistive tech sees the original only clone.tabIndex = -1; \/\/ and skips clones in tab order track.appendChild(clone); }); \/\/ --- Geometry --- var CARD_WIDTH = 300; \/\/ w-[300px] var GAP = 16; \/\/ gap-4 var STEP = CARD_WIDTH + GAP; var SET_WIDTH = originalCards.length * STEP; \/\/ 4 * 316 = 1264 \/\/ --- Animation state --- var position = 0; \/\/ current x-offset in px (translated to -position) var SPEED = 22; \/\/ px \/ second (slow & smooth) var lastFrameTime = null; var isHoverPaused = false; var manualAnimToken = 0; \/\/ each manual scroll gets a fresh token \/\/ Honour the OS \"reduce motion\" setting: no ambient drift. var prefersReducedMotion = window.matchMedia && window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches; function applyTransform() { \/\/ Wrap into [0, SET_WIDTH) so we loop forever if (position >= SET_WIDTH) position -= SET_WIDTH; if (position < 0) position += SET_WIDTH; track.style.transform = \"translateX(\" + -position + \"px)\"; } \/\/ --- Auto-scroll RAF loop (always running) --- function autoTick(now) { if (lastFrameTime === null) lastFrameTime = now; var dt = (now - lastFrameTime) \/ 1000; lastFrameTime = now; \/\/ Skip motion while paused OR while a manual scroll is animating if (!isHoverPaused && manualAnimToken === 0 && !prefersReducedMotion) { position += SPEED * dt; applyTransform(); } requestAnimationFrame(autoTick); } requestAnimationFrame(autoTick); \/\/ --- Hover pause --- var viewport = track.parentElement; viewport.addEventListener(\"mouseenter\", function () { isHoverPaused = true; }); viewport.addEventListener(\"mouseleave\", function () { isHoverPaused = false; lastFrameTime = null; \/\/ avoid a dt spike on resume }); \/\/ --- Manual arrow scroll with ease-out cubic --- function manualScroll(delta) { var token = ++manualAnimToken; var startPos = position; var duration = 400; \/\/ ms var startTime = performance.now(); function tick(now) { if (token !== manualAnimToken) return; \/\/ a newer scroll superseded us var t = Math.min(1, (now - startTime) \/ duration); var eased = 1 - Math.pow(1 - t, 3); \/\/ ease-out cubic position = startPos + delta * eased; applyTransform(); if (t < 1) { requestAnimationFrame(tick); } else if (token === manualAnimToken) { manualAnimToken = 0; \/\/ hand control back to the auto-scroll lastFrameTime = null; } } requestAnimationFrame(tick); } prevBtn.addEventListener(\"click\", function () { manualScroll(-STEP); }); nextBtn.addEventListener(\"click\", function () { manualScroll(STEP); }); \/* --- Hero content, one entry per card ----------------------- mediaType is either \"video\" (Vimeo embed, 16:9) or \"image\" (still, 16:10). Only the matching URL field is used. *\/ \/* All three videos are UNLISTED on Vimeo, so each embed URL must carry its own privacy hash (?h=...). Drop the hash and the player refuses to load and renders an empty frame. If a video is ever re-uploaded, grab the new hash from Vimeo > Share > Embed. *\/ var VIMEO_PARAMS = \"&badge=0&autopause=0&player_id=0&app_id=58479\"; var contentData = [ { heading: \"Your CRM, connected in a few clicks\", body: \"Connect HubSpot, Salesforce, Zoho and 200+ more directly in MYbOnline. Your contacts sync automatically, your calls get logged for you, and you can dial straight from your CRM in one click. No devs, no downtime, no drama.\", mediaType: \"video\", videoUrl: \"https:\/\/player.vimeo.com\/video\/1066847701?h=d9efc5c92b\" + VIMEO_PARAMS, imageUrl: \"https:\/\/www.bonline.com\/wp-content\/uploads\/2026\/06\/CRM-connections-simplified1.png\", }, { heading: \"Every call, scored and summarised\", body: \"Every call is transcribed, summarised and scored for sentiment \\u2014 positive, neutral or negative \\u2014 with key points and action items. Search by name or number, or filter by sentiment to spot unhappy customers before a problem grows, and use the calls that went well to coach your team.\", mediaType: \"video\", videoUrl: \"https:\/\/player.vimeo.com\/video\/1135333762?h=0b872bb2c1\" + VIMEO_PARAMS, imageUrl: \"https:\/\/www.bonline.com\/wp-content\/uploads\/2026\/08\/Better-call-visibility-controls-4-1.png\", }, { heading: \"Plug in your kit, no faff\", body: \"Connect analogue devices like EPOS machines and payment terminals using plug-and-play, ATA-supported adapters. Available to purchase right in my.bonline.com.\", mediaType: \"image\", videoUrl: \"\", imageUrl: \"https:\/\/www.bonline.com\/more-flexible-setup-less-hassle-1\/\", }, { heading: \"Every caller answered, every lead captured\", body: \"Setup takes minutes \\u2014 add your website and your AI Receptionist builds its own FAQs. It answers callers' questions, books appointments into your connected Google or Outlook calendar, and captures new leads automatically. Pick the voice that fits your brand, and decide what happens when it can't answer: transfer to your team, take a voicemail, or save the caller's details as a fresh lead.\", mediaType: \"video\", videoUrl: \"https:\/\/player.vimeo.com\/video\/1216375732?h=5d9fa5717d\" + VIMEO_PARAMS, imageUrl: \"https:\/\/www.bonline.com\/wp-content\/uploads\/2026\/08\/AI-Receptionist-7.png\", }, ]; var headingEl = document.getElementById(\"content-heading\"); var bodyEl = document.getElementById(\"content-body\"); var heroFrameEl = document.getElementById(\"content-hero-frame\"); var heroImageEl = document.getElementById(\"content-hero-image\"); var heroVideoEl = document.getElementById(\"content-hero-video\"); \/* Swap the hero between a Vimeo player and a still image. Clearing the iframe src on the way out matters: without it the previous video keeps playing (and keeps making noise) offscreen. *\/ function setHeroMedia(data) { var isVideo = data.mediaType === \"video\" && data.videoUrl; if (heroFrameEl) { heroFrameEl.classList.toggle(\"aspect-video\", !!isVideo); heroFrameEl.classList.toggle(\"aspect-[16\/10]\", !isVideo); heroFrameEl.classList.toggle(\"hero-frame--video\", !!isVideo); } if (heroVideoEl) { heroVideoEl.classList.toggle(\"hidden\", !isVideo); heroVideoEl.src = isVideo ? data.videoUrl : \"\"; if (isVideo) heroVideoEl.title = data.heading; } if (heroImageEl) { heroImageEl.classList.toggle(\"hidden\", !!isVideo); if (!isVideo && data.imageUrl) heroImageEl.src = data.imageUrl; } } track.addEventListener(\"click\", function (e) { var card = e.target.closest(\".carousel-card\"); if (!card) return; var idx = parseInt(card.getAttribute(\"data-card-index\"), 10); if (isNaN(idx)) return; var data = contentData[idx]; if (!data) return; if (headingEl) headingEl.textContent = data.heading; if (bodyEl) bodyEl.textContent = data.body; setHeroMedia(data); \/\/ Apply .is-active to every card with the matching data-card-index \/\/ (so the original and its clone stay in sync as they scroll). var allCards = track.querySelectorAll(\".carousel-card\"); for (var i = 0; i < allCards.length; i++) { var match = allCards[i].getAttribute(\"data-card-index\") === String(idx); allCards[i].classList.toggle(\"is-active\", match); } }); })(); <\/script>  <\/p>\n<div class=\"bg-gray-50 py-6 border-t border-gray-200\"> <div class=”max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center gap-6″ > <span class=\"font-medium text-[#363847]\">Follow us<\/span> <\/p>\n<div class=\"flex gap-4\">  <a class=”text-gray-500 hover:text-[#363847]” href=”https:\/\/www.youtube.com\/@BonlineLtd” target=”_blank” rel=”noopener noreferrer” aria-label=”bOnline on YouTube” > <svg class=\"w-6 h-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\"> <path d=”M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z” ><\/path> <\/svg> <\/a>  <a class=”text-gray-500 hover:text-[#363847]” href=”https:\/\/x.com\/bOnlineLtd” target=”_blank” rel=”noopener noreferrer” aria-label=”bOnline on X” > <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\"> <path d=”M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z” ><\/path> <\/svg> <\/a>  <a class=”text-gray-500 hover:text-[#363847]” href=”https:\/\/www.facebook.com\/bOnlineLtd” target=”_blank” rel=”noopener noreferrer” aria-label=”bOnline on Facebook” > <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\"> <path clip-rule=”evenodd” d=”M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z” fill-rule=”evenodd” ><\/path> <\/svg> <\/a>  <a class=”text-gray-500 hover:text-[#363847]” href=”https:\/\/www.linkedin.com\/company\/bonline-limited\/” target=”_blank” rel=”noopener noreferrer” aria-label=”bOnline on LinkedIn” > <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\"> <path clip-rule=”evenodd” d=”M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z” fill-rule=”evenodd” ><\/path> <\/svg> <\/a>  <a class=”text-gray-500 hover:text-[#363847]” href=”https:\/\/www.instagram.com\/bonlineltd\/” target=”_blank” rel=”noopener noreferrer” aria-label=”bOnline on Instagram” > <svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\"> <path d=”M12 2.163c3.204 0 3.584.012 4.849.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.265.058-1.644.07-4.849.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.76 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z” \/> <\/svg> <\/a> <\/div>\n<p> <\/div>\n<p> <\/div>\n<p>   <\/p>\n<footer class=\"bg-[#363847] text-white\"> <\/p>\n<div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-12 pb-10\">  <\/p>\n<hr class=\"border-white\/15 mb-8\" \/>  <div class=”flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 text-sm” > <pee class=\"text-white\/90\"> \u00a9 2026 bOnline Limited, all rights reserved <\/pee> <nav class=”flex flex-wrap items-center gap-x-3 gap-y-2 text-white\/90″ aria-label=”Legal” > <a class=”hover:text-white underline-offset-4 hover:underline” href=”https:\/\/www.bonline.com\/terms-privacy\/” target=”_blank” rel=”noopener noreferrer” >Terms & conditions<\/a > <span class=\"text-white\/40\" aria-hidden=\"true\">|<\/span> <a class=”hover:text-white underline-offset-4 hover:underline” href=”https:\/\/www.bonline.com\/privacy-policy\/” target=”_blank” rel=”noopener noreferrer” >Privacy policy<\/a > <span class=\"text-white\/40\" aria-hidden=\"true\">|<\/span> <a class=”hover:text-white underline-offset-4 hover:underline” href=”https:\/\/www.bonline.com\/privacy-policy\/” target=”_blank” rel=”noopener noreferrer” >Cookie policy<\/a > <\/nav>\n<p> <\/div>\n<p>  <pee class=\"mt-8 text-sm text-white\/80 leading-relaxed\"> Registered in England No. 7710947. VAT Reg. 121 4707 49. bOnline\u00ae is a registered trademark of bOnline. bOnline Ltd. Terminal House, 52 Grosvenor Gardens, London SW1W 0AU <\/pee> <\/div>\n<p> <\/footer>\n<p>   <div class=”fixed top-0 left-0 right-0 bg-white\/90 backdrop-blur-sm border-b border-gray-200 z-40 hidden md:block” > <div class=”max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between” > <\/p>\n<div class=\"flex items-center gap-8 text-sm font-medium text-gray-600\"> <svg width=”172″ height=”70″ viewBox=”0 0 172 70″ fill=”none” xmlns=”http:\/\/www.w3.org\/2000\/svg” class=”h-10 w-auto” aria-label=”bOnline” > <g clip-path=\"url(#clip0_1265_240)\"> <path d=”M71.3765 20.8072C68.133 20.8072 65.9617 23.3359 65.9617 27.0927C65.9617 30.8496 68.1368 33.3782 71.3765 33.3782C74.6162 33.3782 76.7912 30.8496 76.7912 27.0927C76.7912 23.3359 74.6162 20.8072 71.3765 20.8072ZM71.3765 41.2874C62.954 41.2874 57.3415 35.5951 57.3415 27.0965C57.3415 18.598 62.954 12.8258 71.3765 12.8258C79.799 12.8258 85.4115 18.5181 85.4115 27.0965C85.4115 35.6749 79.799 41.2874 71.3765 41.2874Z” fill=”#42CCCC” ><\/path> <path d=”M92.6438 20.6475C93.9101 19.2634 96.5984 18.4345 99.0092 18.4345C104.386 18.4345 107.31 20.9251 107.31 27.0927V40.1391C107.31 40.4547 107.032 40.7323 106.717 40.7323H99.7583C99.4427 40.7323 99.1651 40.4547 99.2031 40.1391V28.3209C99.2031 26.7391 98.4921 25.8303 97.2677 25.8303C95.0128 25.8303 94.6591 28.0434 94.6591 28.0434V40.1391C94.6591 40.4547 94.3816 40.7323 94.066 40.7323H87.1074C86.7918 40.7323 86.5142 40.4547 86.5142 40.1391V19.541C86.5142 19.1874 86.7119 18.9858 87.0656 18.9858H91.4955C91.7731 18.9858 92.0088 19.1037 92.1267 19.3813L92.64 20.6475H92.6438Z” fill=”#42CCCC” ><\/path> <path d=”M116.086 12.0691C116.402 12.0691 116.679 12.3467 116.679 12.6243V40.1391C116.679 40.4547 116.402 40.7323 116.086 40.7323H109.128C108.812 40.7323 108.534 40.4547 108.534 40.1391V12.6243C108.534 12.3467 108.812 12.0691 109.128 12.0691H116.086Z” fill=”#42CCCC” ><\/path> <path d=”M125.771 18.9896C126.087 18.9896 126.364 19.2672 126.364 19.541V40.1391C126.364 40.4547 126.087 40.7323 125.771 40.7323H118.813C118.497 40.7323 118.219 40.4547 118.219 40.1391V19.541C118.219 19.2634 118.497 18.9896 118.813 18.9896H125.771ZM126.6 14.362C126.6 16.6929 124.862 18.2748 122.25 18.2748C119.638 18.2748 117.9 16.6929 117.9 14.362C117.9 11.9094 119.638 10.2895 122.25 10.2895C124.862 10.2895 126.6 11.9094 126.6 14.362Z” fill=”#42CCCC” ><\/path> <path d=”M133.954 20.6475C135.22 19.2634 137.909 18.4345 140.319 18.4345C145.696 18.4345 148.62 20.9251 148.62 27.0927V40.1391C148.62 40.4547 148.343 40.7323 148.027 40.7323H141.069C140.753 40.7323 140.475 40.4547 140.513 40.1391V28.3209C140.513 26.7391 139.802 25.8303 138.578 25.8303C136.323 25.8303 135.969 28.0434 135.969 28.0434V40.1391C135.969 40.4547 135.692 40.7323 135.376 40.7323H128.418C128.102 40.7323 127.824 40.4547 127.824 40.1391V19.541C127.824 19.1874 128.022 18.9858 128.376 18.9858H132.806C133.083 18.9858 133.319 19.1037 133.437 19.3813L133.95 20.6475H133.954Z” fill=”#42CCCC” ><\/path> <path d=”M163.245 27.9635C163.245 26.222 162.176 25.0774 160.594 25.0774C158.815 25.0774 157.628 26.222 157.628 27.9635H163.241H163.245ZM169.332 38.5192C169.412 38.7968 169.332 38.9527 169.055 39.1124C166.96 40.4965 163.914 41.3254 160.872 41.3254C153.875 41.3254 149.21 36.7396 149.21 29.899C149.21 23.0583 153.795 18.4345 160.674 18.4345C167.553 18.4345 171.112 22.6628 171.112 29.8609C171.112 30.4541 171.074 31.0473 170.952 31.6405C170.914 31.9561 170.716 32.1158 170.359 32.1158H157.67C157.67 32.1158 157.67 34.6064 160.99 34.6064C163.005 34.6064 165.26 34.1311 167.039 33.3022C167.317 33.1843 167.553 33.3402 167.633 33.6178L169.332 38.5192Z” fill=”#42CCCC” ><\/path> <path d=”M32.9752 41.9224C30.3477 42.2685 27.7049 41.5802 26.009 40.2075L25.606 41.6981C25.4957 42.0707 25.3284 42.3331 25.0546 42.3673L20.6247 42.9491C20.3091 42.9909 20.0011 42.7514 19.9593 42.4396L16.3697 15.1605C16.3317 14.8867 16.5712 14.5749 16.8868 14.5331L23.7846 13.6243C24.1002 13.5825 24.4082 13.822 24.4462 14.0958L25.4006 21.3472C26.4539 20.2521 28.1422 19.4725 29.9864 19.2292C36.1807 18.4154 40.9338 22.4157 41.8236 29.1955C42.721 36.0134 39.1656 41.1087 32.9714 41.9224M49.3107 0L0 11.6584L7.52893 54.3566L20.1684 52.4401L37.7245 69.9924L41.1809 49.2574L58.3378 46.6565L49.3107 0Z” fill=”#42CCCC” ><\/path> <path d=”M29.1917 26.1915C27.819 26.3741 26.6783 27.4007 26.3779 28.7544L27.0281 33.6938C27.6707 34.9259 29.0358 35.6217 30.4085 35.443C32.5645 35.1578 33.7661 33.0854 33.3973 30.264C33.036 27.5186 31.3477 25.9064 29.1917 26.1915Z” fill=”#42CCCC” ><\/path> <\/g> <defs> <clipPath id=\"clip0_1265_240\"> <rect width=\"171.112\" height=\"70\" fill=\"white\"><\/rect> <\/clipPath> <\/defs> <\/svg> <\/div>\n<p> <a href=”https:\/\/my.bonline.com\/trial\/signup” target=”_blank” rel=”noopener noreferrer” class=”btn-teal px-6 py-2 rounded-full font-medium text-sm” >Try for free<\/a > <\/div>\n<p> <\/div>\n<p> <\/body><\/html>[\/et_pb_fullwidth_code][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>What’s New Sofia Sans Extra Condensed Extra Bold = brand ‘hero’ font (caps only). Sofia Sans (paid Sofia Pro family substitute, not on Google Fonts) = body. –> rel=”stylesheet” href=”https:\/\/fonts.googleapis.com\/css2?family=Sofia+Sans:wght@300;400;500;700&family=Sofia+Sans+Extra+Condensed:wght@800&display=swap” \/ so the first player frame paints sooner. –> Your CRM, connected in a few clicks id=”content-body” class=”text-lg text-[#363847]\/80 leading-relaxed” Connect HubSpot, Salesforce, Zoho and […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"\n[sc name=\"whats_new\" ][\/sc]\n","_et_gb_content_width":"","footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"featured_image_src":null,"featured_image_src_square":null,"_links":{"self":[{"href":"https:\/\/news.bonline.com\/index.php?rest_route=\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/news.bonline.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/news.bonline.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/news.bonline.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/news.bonline.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9"}],"version-history":[{"count":9,"href":"https:\/\/news.bonline.com\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":39,"href":"https:\/\/news.bonline.com\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions\/39"}],"wp:attachment":[{"href":"https:\/\/news.bonline.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}