#toc a {
                text-decoration: none !important;
                border: none;
                background: transparent;
                padding: 5px 10px;
                display: block;
                line-height: 1.2;
                border-radius: 4px;
                transition: all 300ms;
                color: #d9d9d9;
            }

            #toc {
                font-size: 1rem;
            }

            #toc li {
                padding: 2px 0;
            }

            #toc ul {
                list-style: none;
                margin: 0 !important;
                padding: 0;
            }

            #toc a.active, #toc a:hover {
                background: #7f56d90f;
            }
/* One grid for the whole article: every section lines up with the menu bar (logo on the left, button on the right),
   and the article text fills its column so there is no empty gap before the sidebar. */
.bp-post-sec > .cx-container, .bp-cs-sec > .cx-container, .bp-faq-sec > .cx-container, .bp-recent-sec > .cx-container, .bp-post-sec ~ .cx-recog > .cx-container { max-width: 75rem; padding-left: 2.5rem; padding-right: 2.5rem; }
.bp-layout { grid-template-columns: minmax(0, 1fr) 20rem; column-gap: 3.5rem; }
.bp-body-slot { max-width: none; }
.bp-authorbox, .bp-cs-box { max-width: none; }
.bp-faq-slot { width: 100%; max-width: none; }
@media screen and (max-width: 991px) { .bp-layout { grid-template-columns: 1fr; } }
/* Awards row on the article: seven cards fit the article width without the Clutch stars wrapping */
.bp-post-sec ~ .cx-recog .cx-badge-name { white-space: nowrap; font-size: 1rem; }
.bp-post-sec ~ .cx-recog .cx-badge-sub { font-size: .62rem; letter-spacing: .08em; }
@media screen and (max-width: 767px) {
  .bp-post-sec > .cx-container, .bp-cs-sec > .cx-container, .bp-faq-sec > .cx-container, .bp-recent-sec > .cx-container, .bp-post-sec ~ .cx-recog > .cx-container { padding-left: 1rem; padding-right: 1rem; }
}
.bp-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 0 0 1.5rem; padding: 0; list-style: none; font: 500 .82rem/1.4 Raleway, sans-serif; color: #8c8c8c; }
.bp-crumbs li { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; }
.bp-crumbs li + li::before { content: '›'; color: #5c5c5c; }
.bp-crumbs a { color: #b3b3b3; text-decoration: none; transition: color .2s; }
.bp-crumbs a:hover { color: #cddc2c; }
.bp-crumbs [aria-current] span { overflow: hidden; max-width: 28rem; color: #fff; white-space: nowrap; text-overflow: ellipsis; }
.bp-has-photo { background-size: cover; background-position: center top; background-color: #222; }
.bp-authorbox-bio { margin: .6rem 0 .9rem; max-width: 40rem; font: 400 .95rem/1.65 Raleway, sans-serif; color: #b3b3b3; }
.bp-authorbox-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: .25rem; }
.bp-authorbox-links .bp-authorbox-link { margin: 0; }
.bp-authorbox-in { display: inline-flex; color: #cddc2c; font: 600 .9rem Raleway, sans-serif; text-decoration: none; }
.bp-authorbox-in:hover { text-decoration: underline; }
.bp-inline-cta { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin: 2.5rem 0; padding: 1.4rem 1.6rem; border: 1px solid rgba(205,220,44,.35); border-left: 4px solid #cddc2c; border-radius: 16px; background: linear-gradient(135deg, #161616, #1d1f12); }
.bp-inline-cta-txt strong { display: block; margin-bottom: .3rem; color: #fff; font: 700 1.15rem/1.3 'Bricolage Grotesque', sans-serif; }
.bp-inline-cta-txt span { color: #b3b3b3; font: 400 .95rem/1.55 Raleway, sans-serif; }
.bp-body-slot a.bp-inline-cta-btn, .bp-inline-cta-btn { flex-shrink: 0; color: #111 !important; text-decoration: none !important; padding: .8rem 1.2rem; border-radius: 999px; background: #cddc2c; color: #111; font: 700 .9rem 'Bricolage Grotesque', sans-serif; text-decoration: none; white-space: nowrap; transition: transform .2s, box-shadow .2s; }
.bp-inline-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -12px rgba(205,220,44,.7); }
.bp-endbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; margin: 2.5rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid rgba(255,255,255,.12); }
.bp-endbar-label { margin-bottom: .75rem; color: #8c8c8c; font: 600 .72rem Raleway, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.bp-endbar-ai { display: flex; flex-wrap: wrap; gap: .5rem; }
.bp-endbar-ai .bp-ai-tool { flex: 0 0 auto; }
@media screen and (max-width: 767px) {
  .bp-inline-cta { flex-direction: column; align-items: flex-start; }
  .bp-endbar { grid-template-columns: 1fr; }
  .bp-crumbs [aria-current] span { max-width: 14rem; }
}
/* Knowledge article (new design, test address only until approved): same styles as the blog article design. Class-scoped, so nothing changes on the current design. */
.bp-body-slot { max-width: 44rem; }
.bp-body-slot .w-richtext { color: #cfcfcf; }
.bp-body-slot .w-richtext > *:first-child { margin-top: 0 !important; }
.bp-body-slot .w-richtext p { margin: 0 0 1.25rem; font-family: Raleway, sans-serif; font-size: 1.05rem; line-height: 1.8; font-weight: 400; color: #cfcfcf; letter-spacing: 0; text-transform: none; }
.bp-body-slot .w-richtext h2 { margin: 3rem 0 1rem; font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.85rem; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; color: #fff; text-transform: none; scroll-margin-top: 7rem; }
.bp-body-slot .w-richtext h3 { margin: 2.25rem 0 .75rem; font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.3rem; line-height: 1.35; font-weight: 700; letter-spacing: 0; color: #fff; text-transform: none; scroll-margin-top: 7rem; }
.bp-body-slot .w-richtext h4 { margin: 1.75rem 0 .5rem; font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.05rem; line-height: 1.4; font-weight: 700; color: #fff; text-transform: none; }
.bp-body-slot .w-richtext h2 strong, .bp-body-slot .w-richtext h3 strong { font-weight: inherit; }
.bp-body-slot .w-richtext strong { color: #fff; font-weight: 700; }
.bp-body-slot .w-richtext em { color: #e6e6e6; }
.bp-body-slot .w-richtext a { color: #cddc2c; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.bp-body-slot .w-richtext a:hover { color: #fff; }
.bp-body-slot .w-richtext ul, .bp-body-slot .w-richtext ol { margin: 0 0 1.5rem; padding-left: 1.4rem; font-family: Raleway, sans-serif; font-size: 1.02rem; line-height: 1.75; color: #cfcfcf; }
.bp-body-slot .w-richtext li { margin-bottom: .55rem; padding-left: .25rem; }
.bp-body-slot .w-richtext ul li::marker { color: #cddc2c; }
.bp-body-slot .w-richtext ol li::marker { color: #cddc2c; font-weight: 700; }
.bp-body-slot .w-richtext blockquote { margin: 2rem 0; padding: 1.25rem 1.5rem; border-left: 3px solid #cddc2c; border-radius: 0 12px 12px 0; background: #1b1b1b; font-family: Raleway, sans-serif; font-size: 1.05rem; line-height: 1.65; color: #fff; }
.bp-body-slot .w-richtext figure { margin: 2.25rem 0; }
.bp-body-slot .w-richtext figure img { width: 100%; height: auto; border-radius: 16px; }
.bp-body-slot .w-richtext figcaption { margin-top: .6rem; font-family: Raleway, sans-serif; font-size: .8rem; color: #8c8c8c; text-align: left; }
.bp-body-slot .w-richtext .w-embed { margin: 2rem 0; }
.bp-body-slot .w-richtext table { width: 100%; border-collapse: collapse; }
/* Quote lines written as italic paragraphs get a pull-quote look */
.bp-body-slot .w-richtext p:has(> em:only-child) { padding-left: 1.1rem; border-left: 2px solid rgba(205,220,44,.6); color: #e6e6e6; margin-bottom: .4rem; }
.bp-body-slot .w-richtext p:has(> em:only-child) + p:has(> em:only-child) { margin-bottom: 1.5rem; font-size: .9rem; color: #8c8c8c; }
/* Contents list (filled by the page script): one row per section with its own reading bar */
.bp-toc-list { scroll-behavior: smooth; }
.bp-toc-hint { padding: .6rem .65rem; border: 1px dashed rgba(255,255,255,.2); border-radius: 8px; font: 500 .72rem/1.45 Raleway, sans-serif; color: #8c8c8c; }
.bp-toc-link { display: grid; grid-template-columns: 1.6rem 1fr; column-gap: .35rem; row-gap: .45rem; align-items: start; padding: .55rem .65rem .6rem; border-radius: 8px; color: #bdbdbd; font: 500 .78rem/1.35 Raleway, sans-serif; text-decoration: none; transition: background-color .25s, color .25s; }
.bp-toc-link:hover { color: #fff; background: rgba(255,255,255,.04); }
.bp-toc-num { color: #8c8c8c; font-size: .68rem; font-weight: 700; padding-top: .1rem; }
.bp-toc-bar { grid-column: 2; height: 2px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; }
.bp-toc-fill { display: block; width: 0; height: 100%; background: #cddc2c; transition: width .15s linear; }
.bp-toc-link.bp-done .bp-toc-num { color: #cddc2c; font-size: 0; }
.bp-toc-link.bp-done .bp-toc-num::before { content: '\2713'; font-size: .8rem; }
.bp-toc-link.bp-done { color: #e6e6e6; }
.bp-toc-link.bp-on { background: #cddc2c; color: #111; font-weight: 700; }
.bp-toc-link.bp-on .bp-toc-num { color: #111; }
.bp-toc-link.bp-on .bp-toc-bar { background: rgba(17,17,17,.2); }
.bp-toc-link.bp-on .bp-toc-fill { background: #111; }
/* FAQ rows */
.bp-faq > summary { list-style: none; }
.bp-faq > summary::-webkit-details-marker { display: none; }
.bp-faq-icon::before, .bp-faq-icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform .3s ease; }
.bp-faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.bp-faq[open] .bp-faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.bp-faq[open] .bp-faq-title { color: #cddc2c; }
.bl-card-read::after { content: ' read'; }
html[lang^="de"] .bl-card-read::after { content: ''; }
.bl-card-date:empty, .bp-meta-date:empty { display: none; }
.bp-listen.bp-playing .bp-listen-icon { background: #fff; }
.bp-toast { position: fixed; left: 50%; bottom: 2rem; z-index: 999; padding: .7rem 1.2rem; border-radius: 999px; background: #cddc2c; color: #111; font: 700 .8rem Raleway, sans-serif; transform: translateX(-50%); }
@media (max-width: 767px) { .bp-body-slot .w-richtext h2 { font-size: 1.5rem; margin-top: 2.25rem; } .bp-body-slot .w-richtext p { font-size: 1rem; } }
.bp-ai-tools { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.bp-ai-tool { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: #151515; color: #fff; font: 700 .76rem Raleway, sans-serif; text-decoration: none; transition: border-color .2s, transform .2s; }
.bp-ai-tool:hover { border-color: #cddc2c; transform: translateY(-2px); }
.bp-ai-ico { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 8px; }
.bp-ai-ico svg { width: 1.1rem; height: 1.1rem; }
.bp-cta-card .bp-cta-text { color: #111; }
/* FAQ rows (built on the page from this article's FAQs): same look as the approved sample */
.bp-faq { border-bottom: 1px solid #ffffff24; }
.bp-faq-q { grid-column-gap: 1.5rem; cursor: pointer; justify-content: space-between; align-items: center; padding-top: 1.35rem; padding-bottom: 1.35rem; display: flex; }
.bp-faq-title { color: #fff; text-transform: none; margin-top: 0; margin-bottom: 0; font-family: Raleway, Arial, sans-serif; font-size: 1.05rem; font-weight: 600; line-height: 1.4; }
.bp-faq-icon { color: #fff; flex-shrink: 0; width: 1.5rem; height: 1.5rem; position: relative; }
.bp-faq-a { color: #cfcfcf; max-width: 44rem; margin-top: 0; margin-bottom: 0; padding-bottom: 1.4rem; font-family: Raleway, Arial, sans-serif; font-size: .95rem; line-height: 1.6; }
/* Author box when the author has no photo (photo is hidden, never a placeholder): keep the button at its own size */
.bp-authorbox:has(> .bp-authorbox-avatar[style*="none"]) { grid-template-columns: minmax(0, 1fr) auto; }
@media screen and (max-width: 991px) { .bp-authorbox:has(> .bp-authorbox-avatar[style*="none"]) { grid-template-columns: 1fr; } .bp-authorbox-link { justify-self: start; } }
/* Recognition cards: as the row scrolls in, the cards flip up one after another and a lime light runs around each
   border. The Clutch score counts up to 4.9 and its stars light up one by one. Hovering a card tilts it toward the
   mouse with a soft lime spotlight under the cursor; every few seconds a lime glint passes along the row. */
.cx-recog.is-fx .cx-logo-grid { perspective: 1100px; }
.cx-recog.is-fx .cx-logo-badge { position: relative; overflow: hidden; isolation: isolate; opacity: 0; transform: rotateX(-75deg) translateY(30px); transform-origin: 50% 100%; transition: opacity .6s ease, transform .9s cubic-bezier(.2,.9,.25,1.15), border-color .3s ease, background-color .3s ease, box-shadow .3s ease; will-change: transform; }
.cx-recog.is-fx .cx-logo-badge.is-in { opacity: 1; transform: none; }
.cx-recog.is-fx .cx-logo-badge.is-in:hover { border-color: #cddc2c; background-color: #1f1f1f; box-shadow: 0 20px 40px -20px rgba(205,220,44,.45); }
/* running border light (plays once on arrival) */
.cr-ring { position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--cr-a, 0deg), transparent 0 70%, #cddc2c 85%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; pointer-events: none; }
.cx-logo-badge.is-ring .cr-ring { animation: cr-run 1.2s ease-out forwards; }
@property --cr-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes cr-run { 0% { opacity: 1; --cr-a: 0deg; } 80% { opacity: 1; } 100% { opacity: 0; --cr-a: 360deg; } }
/* spotlight under the mouse */
.cr-spot { position: absolute; inset: 0; z-index: -1; background: radial-gradient(180px circle at var(--cr-x, 50%) var(--cr-y, 50%), rgba(205,220,44,.16), transparent 70%); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.cx-logo-badge:hover .cr-spot { opacity: 1; }
/* glint passing along the row */
.cr-glint { position: absolute; top: 0; bottom: 0; left: -60%; z-index: 0; width: 45%; background: linear-gradient(100deg, transparent, rgba(205,220,44,.14), transparent); transform: skewX(-18deg); pointer-events: none; }
.cx-logo-badge.is-glint .cr-glint { animation: cr-glint .9s ease forwards; }
@keyframes cr-glint { to { left: 130%; } }
.cx-recog.is-fx .cx-logo-img, .cx-recog.is-fx .cx-logo-word { transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.cx-recog.is-fx .cx-logo-badge:hover .cx-logo-img, .cx-recog.is-fx .cx-logo-badge:hover .cx-logo-word { transform: translateY(-4px) scale(1.08); }
.cx-recog.is-fx .cx-logo-go { transition: transform .3s ease; }
.cx-recog.is-fx .cx-logo-badge:hover .cx-logo-go { transform: translate(3px,-3px); }
.cr-star { display: inline-block; opacity: .2; transform: scale(.6); transition: opacity .3s ease, transform .4s cubic-bezier(.2,1.6,.4,1), color .3s ease; }
.cr-star.is-on { opacity: 1; transform: none; color: #cddc2c; }
@media (prefers-reduced-motion: reduce) { .cx-recog.is-fx .cx-logo-badge { opacity: 1; transform: none; transition: none; } .cr-ring, .cr-glint { display: none; } }
/* Check marks in the closing section's list (same as the homepage) */
.hm-cta .pf-check::before { content: '\2713'; display: inline-flex; align-items: center; justify-content: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #cddc2c; color: #111; font-size: .72rem; font-weight: 700; }
/* Closing section background: the three showreel videos already used on the service pages (websites, branding,
   packaging) play one after another with a cross-fade. They only load when the section is near the screen. */
.hc-vids { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hc-vids video { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; will-change: transform, opacity; }
.hc-vids video.is-on { opacity: 1; }
.hm-cta.has-video .hm-cta-bg { opacity: 0; transition: opacity 1s ease; }
.hc-chips { position: absolute; left: 50%; bottom: 1.6rem; z-index: 3; display: none; gap: .5rem; transform: translateX(-50%); }
.hm-cta.has-video .hc-chips { display: flex; }
.hc-chip { position: relative; overflow: hidden; padding: .45rem .9rem; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; background: rgba(10,10,10,.45); color: rgba(255,255,255,.75); font: 600 .7rem Raleway, sans-serif; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; backdrop-filter: blur(6px); transition: color .3s, border-color .3s; }
.hc-chip::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: var(--p, 0%); background: #cddc2c; box-shadow: 0 0 8px rgba(205,220,44,.8); }
.hc-chip.is-on { color: #fff; border-color: rgba(205,220,44,.7); }
.hc-chip:hover { color: #fff; }
/* Link to the matching service page under the button */
.hc-more { display: block; margin-top: 1.1rem; color: rgba(255,255,255,.75); font: 600 .9rem Raleway, sans-serif; text-decoration: none; transition: color .2s; }
.hc-more:hover { color: #cddc2c; }
/* Booking pop-up in the site's look (only with the new Knowledge design): dark blurred backdrop, rounded frame with a lime edge, lime close button */
html.kn-v2 .calendly-overlay .calendly-close-overlay { background: rgba(6,6,6,.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html.kn-v2 .calendly-overlay .calendly-popup { overflow: hidden; border-radius: 20px; background: #141414; box-shadow: 0 0 0 1px rgba(205,220,44,.35), 0 30px 80px -20px rgba(0,0,0,.85); }
html.kn-v2 .calendly-overlay .calendly-popup-close { top: 24px; right: 24px; width: 44px; height: 44px; border-radius: 50%; opacity: 1; background: #cddc2c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='%23111' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform .25s ease; }
html.kn-v2 .calendly-overlay .calendly-popup-close:hover { transform: rotate(90deg); }
html.kn-v2 .calendly-overlay .calendly-spinner > div { background-color: #cddc2c; }
@media (max-width: 767px) { .hc-chips { bottom: 1rem; } .hc-chip { padding: .4rem .7rem; font-size: .6rem; } }
.bk-upd{font-size:14px;line-height:1.4;opacity:.75;margin:0 0 1rem}.bk-rank{display:block;font-size:15px;line-height:1.55;padding:14px 16px;margin:1.25rem 0;border:1px solid color-mix(in srgb,currentColor 22%,transparent);border-radius:12px}.bk-rel{display:block;margin:2.5rem 0 0;padding-top:1.5rem;border-top:1px solid color-mix(in srgb,currentColor 18%,transparent)}.bk-rel-h{font-size:1.375rem;line-height:1.25;margin:0 0 1rem;text-transform:none}.bk-rel-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}@media (min-width:768px){.bk-rel-list{grid-template-columns:repeat(2,minmax(0,1fr))}}.bk-rel-list li{margin:0;padding:0}.bk-rel-a{display:flex;flex-direction:column;gap:4px;min-height:44px;height:100%;box-sizing:border-box;padding:12px 14px;color:inherit;text-decoration:none;border:1px solid color-mix(in srgb,currentColor 18%,transparent);border-radius:12px}.bk-rel-a:hover,.bk-rel-a:focus-visible{border-color:currentColor}.bk-rel-k{font-size:14px;opacity:.7}.bk-rel-t{font-size:16px;line-height:1.35;overflow-wrap:anywhere}