/* Public site header (inc/public-header.php, inc/public-navigation.php) plus the site-wide brand layer.
   Loaded on every public page after home.css and home-refinement.css. The header uses its own bz- classes
   so older header rules never apply. Palette: purple, white, cream and ink, with yellow as a highlight. */
:root {
    --bz-purple: #6e42d3;
    --bz-purple-dark: #5530b0;
    --bz-lavender: #f1ebfb;
    --bz-cream: #fbf7f1;
    --bz-ink: #1f1a2e;
    --bz-muted: #5e5869;
    --bz-line: #ebe3d6;
    --bz-bar-max: var(--page-max, 1240px);
}
html { scroll-padding-top: 104px; }

.bz-header { position: sticky; top: 0; z-index: 60; padding: 12px var(--gutter, 24px) 14px; font-family: 'Poppins', 'Segoe UI', Arial, sans-serif; }
.bz-header-bar { position: relative; display: flex; align-items: center; gap: 20px; max-width: var(--bz-bar-max); height: 68px; margin-inline: auto; padding: 0 10px 0 24px; border: 1px solid var(--bz-line); border-radius: 999px; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); box-shadow: 0 6px 24px #1f1a2e0d; }
.bz-logo { display: block; flex-shrink: 0; width: 128px; }
.bz-logo img { display: block; width: 100%; height: auto; }

/* The nav fills the bar's height so the hover area runs right down to where the menu panel starts. */
.bz-nav { align-self: stretch; display: flex; margin-inline: auto; }
.bz-nav-list { display: flex; align-items: stretch; gap: 4px; margin: 0; padding: 0; list-style: none; }
.bz-nav-list > li { display: flex; align-items: center; }
.bz-nav-link { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: 999px; color: var(--bz-ink); font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none; transition: background-color .15s, color .15s; }
.bz-nav-link:hover, .bz-nav-link:focus-visible, .bz-mega-group:hover > .bz-nav-link, .bz-mega-group:focus-within > .bz-nav-link { background: var(--bz-lavender); color: var(--bz-purple); }
.bz-nav-link[aria-current="page"] { color: var(--bz-purple); }
.bz-nav-link:focus-visible, .bz-signin:focus-visible, .bz-cta:focus-visible, .bz-burger:focus-visible { outline: 3px solid #b79cf0; outline-offset: 2px; }
.bz-mega-trigger::after { content: ''; width: 6px; height: 6px; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease, margin .2s ease; }
.bz-mega-group:hover > .bz-mega-trigger::after, .bz-mega-group:focus-within > .bz-mega-trigger::after { transform: rotate(225deg); margin-top: 3px; }

/* Mega menu: spans the header bar, fades and rises into place. */
.bz-mega-group { position: static; }
/* Closing waits 0.25s (hover intent), so a slightly diagonal mouse path into the panel does not close it. */
.bz-mega { position: absolute; top: 100%; left: 0; right: 0; z-index: 61; padding-top: 12px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .18s ease .25s, transform .18s ease .25s, visibility 0s linear .43s; }
.bz-mega-group:hover > .bz-mega, .bz-mega-group:focus-within > .bz-mega { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease .05s, transform .2s ease .05s, visibility 0s linear .05s; }
/* Only one menu at a time: an open panel closes at once when the pointer moves onto the other trigger. */
.bz-nav-list:hover > .bz-mega-group:not(:hover):not(:focus-within) > .bz-mega { transition: opacity .1s ease, transform .1s ease, visibility 0s linear .1s; }
.bz-mega-card { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; padding: 12px; border: 1px solid var(--bz-line); border-radius: 28px; background: #fff; box-shadow: 0 30px 70px #1f1a2e26; }
.bz-mega-main { padding: 16px 14px 12px; }
.bz-mega-label { margin: 0 0 12px 12px; font-size: 13px; font-weight: 700; color: var(--bz-muted); }
.bz-mega-features, .bz-mega-solutions { margin: 0; padding: 0; list-style: none; }
.bz-mega-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.bz-mega-features a { display: flex; align-items: flex-start; gap: 14px; padding: 12px; border-radius: 16px; color: var(--bz-ink); text-decoration: none; transition: background-color .15s; }
.bz-mega-features a:hover, .bz-mega-features a:focus-visible { background: var(--bz-cream); }
.bz-mega-icon { display: grid; flex: 0 0 42px; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--bz-lavender); color: var(--bz-purple); transition: background-color .2s, color .2s, transform .2s; }
.bz-mega-icon .ui-icon { width: 21px; height: 21px; }
.bz-mega-features a:hover .bz-mega-icon, .bz-mega-features a:focus-visible .bz-mega-icon { background: var(--bz-purple); color: #fff; transform: rotate(-6deg) scale(1.06); }
.bz-mega strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--bz-ink); }
.bz-mega small { display: block; margin-top: 3px; font-size: 13px; font-weight: 400; line-height: 1.45; color: var(--bz-muted); }
.bz-mega-all, .bz-spot-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 650; color: var(--bz-purple); text-decoration: none; }
.bz-mega-all { margin: 10px 0 0 12px; }
.bz-mega-all span, .bz-spot-link span { transition: transform .2s; }
.bz-mega-all:hover span, .bz-spot-link:hover span, .bz-mega-spotlight:hover .bz-spot-link span { transform: translateX(4px); }
.bz-mega-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bz-mega-solutions a { display: block; padding: 10px 12px; border-radius: 14px; text-decoration: none; transition: background-color .15s; }
.bz-mega-solutions a:hover, .bz-mega-solutions a:focus-visible { background: var(--bz-cream); }
.bz-mega-solutions a:hover strong { color: var(--bz-purple); }
/* Spotlight cards */
.bz-mega-spotlight { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 20px; border-radius: 20px; color: var(--bz-ink); text-decoration: none; }
.bz-spot-lavender { background: var(--bz-lavender); }
.bz-spot-cream { background: var(--bz-cream); }
.bz-spot-tag { margin-bottom: 8px; padding: 4px 11px; border-radius: 999px; background: #fff; font-size: 12px; font-weight: 700; color: var(--bz-purple); }
.bz-spot-shot { display: block; width: 100%; margin-bottom: 10px; overflow: hidden; border: 1px solid #e3dbee; border-radius: 12px; background: #fff; box-shadow: 0 12px 26px #1f1a2e1a; transition: transform .25s ease; }
.bz-spot-shot img { display: block; width: 100%; height: 132px; object-fit: cover; object-position: top left; }
.bz-mega-spotlight:hover .bz-spot-shot { transform: translateY(-4px) rotate(-1deg); }
.bz-mega-spotlight strong { font-size: 17px; }
.bz-mega-spotlight small { margin: 0 0 10px; font-size: 13.5px; }
.bz-spot-cream .bz-cta { margin: 6px 0 8px; }

/* Actions */
.bz-header-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.bz-nav + .bz-header-actions { margin-left: 0; }
.bz-signin { padding: 10px 16px; border-radius: 999px; color: var(--bz-ink); font-size: 15px; font-weight: 600; text-decoration: none; transition: background-color .15s, color .15s; }
.bz-signin:hover { background: var(--bz-lavender); color: var(--bz-purple); }
.bz-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 6px 6px 6px 20px; border-radius: 999px; background: var(--bz-purple); color: #fff; font-size: 15px; font-weight: 650; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background-color .2s, box-shadow .2s, transform .2s; }
.bz-cta svg { flex-shrink: 0; box-sizing: content-box; padding: 9px; border-radius: 50%; background: #ffffff26; transition: transform .2s ease, background-color .2s; }
.bz-cta:hover, .bz-cta:focus-visible { background: var(--bz-purple-dark); color: #fff; box-shadow: 0 10px 24px #6e42d352; transform: translateY(-1px); }
.bz-cta:hover svg { transform: translateX(3px); background: #ffffff40; }
.bz-cta-small, .bz-mobile-actions .bz-cta { min-height: 44px; padding: 10px 20px; font-size: 14px; }

/* Mobile menu. The FAQ styles in home.css give every details/summary a border, padding and a +/− sign;
   these rules switch that off inside the header. */
.bz-mobile { display: none; }
.bz-mobile, .bz-mobile-group { border-bottom: 0; }
.bz-burger { display: grid; place-content: center; gap: 4px; width: 46px; height: 46px; padding: 0; border-radius: 50%; background: var(--bz-lavender); cursor: pointer; list-style: none; }
.bz-burger::-webkit-details-marker { display: none; }
.bz-burger::after { display: none; }
.bz-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--bz-ink); transition: transform .2s ease, opacity .2s ease; }
.bz-mobile[open] .bz-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.bz-mobile[open] .bz-burger span:nth-child(2) { opacity: 0; }
.bz-mobile[open] .bz-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.bz-mobile-panel { position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 61; max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); overflow-y: auto; padding: 8px; border: 1px solid var(--bz-line); border-radius: 24px; background: #fff; box-shadow: 0 24px 60px #1f1a2e2e; }
.bz-mobile-group summary, .bz-mobile-link { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-radius: 14px; color: var(--bz-ink); font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer; list-style: none; }
.bz-mobile-group summary::-webkit-details-marker { display: none; }
.bz-mobile .bz-mobile-group summary::after { content: ''; position: static; width: 7px; height: 7px; margin-top: -4px; border-right: 2px solid var(--bz-muted); border-bottom: 2px solid var(--bz-muted); transform: rotate(45deg); transition: transform .2s; }
.bz-mobile .bz-mobile-group[open] summary::after { content: ''; transform: rotate(225deg); margin-top: 4px; }
.bz-mobile-group summary:hover, .bz-mobile-link:hover, .bz-mobile-group[open] summary { background: var(--bz-cream); }
.bz-mobile-group ul { display: grid; gap: 2px; margin: 4px 0 8px; padding: 0 4px; list-style: none; }
.bz-mobile-group a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; color: var(--bz-ink); font-size: 15px; text-decoration: none; }
.bz-mobile-group a:hover { background: var(--bz-cream); color: var(--bz-purple); }
.bz-mobile-group .bz-mega-icon { flex-basis: 34px; width: 34px; height: 34px; border-radius: 10px; }
.bz-mobile-group .bz-mega-icon .ui-icon { width: 18px; height: 18px; }
.bz-mobile-all { font-weight: 650; color: var(--bz-purple) !important; }
.bz-mobile-actions { display: grid; gap: 8px; margin-top: 8px; padding: 14px 8px 6px; border-top: 1px solid var(--bz-line); text-align: center; }
.bz-mobile-actions .bz-signin { display: block; }
.bz-mobile-actions p { margin: 2px 0 0; font-size: 13px; color: var(--bz-muted); }

@media (min-width: 1600px) {
    .bz-header-bar { height: 74px; }
    .bz-logo { width: 140px; }
    .bz-nav-link, .bz-signin, .bz-cta { font-size: 16px; }
}
@media (max-width: 1080px) {
    .bz-nav-link { padding-inline: 12px; }
    .bz-mega-card { grid-template-columns: minmax(0, 1fr); }
    .bz-mega-spotlight { display: none; }
}
@media (max-width: 960px) {
    .bz-nav, .bz-header-actions > .bz-signin { display: none; }
    .bz-mobile { display: block; }
    .bz-header-actions, .bz-nav + .bz-header-actions { margin-left: auto; }
    .bz-header-bar { height: 62px; padding: 0 8px 0 18px; gap: 12px; }
    .bz-logo { width: 112px; }
    .bz-header-actions > .bz-cta { min-height: 44px; padding: 10px 18px; font-size: 14px; }
    .bz-header-actions > .bz-cta svg { display: none; }
    html { scroll-padding-top: 92px; }
}
@media (max-width: 400px) {
    .bz-header { padding-inline: 10px; }
    .bz-header-bar { padding-left: 14px; gap: 8px; }
    .bz-logo { width: 96px; }
    .bz-header-actions > .bz-cta { padding-inline: 14px; font-size: 13px; }
    .bz-burger { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
    /* No movement, but keep the short close delay so the menu stays reachable. */
    .bz-mega { transition: opacity 0s linear .25s, visibility 0s linear .25s; transform: none; }
    .bz-mega-group:hover > .bz-mega, .bz-mega-group:focus-within > .bz-mega { transition: none; transform: none; }
    .bz-cta, .bz-cta svg, .bz-mega-icon, .bz-spot-shot, .bz-burger span, .bz-mega-all span, .bz-spot-link span { transition: none; }
    .bz-cta:hover, .bz-cta:hover svg, .bz-mega-features a:hover .bz-mega-icon, .bz-mega-spotlight:hover .bz-spot-shot { transform: none; }
}

/* ==========================================================================
   Site-wide brand layer: cream pages, flat brand colours, balanced headings.
   "html body" and "body.seo-page" prefixes outrank the older rules in
   home.css, home-refinement.css, legal.css and blog.css without !important.
   ========================================================================== */
html body { background: var(--bz-cream); }
/* Headings wrap into even lines instead of leaving one word on its own. */
h1, h2, h3 { text-wrap: balance; }
p, li, summary { text-wrap: pretty; }

/* Landing-page hero: cream like the homepage instead of the purple gradient card. */
body.seo-page .hero { background: none; color: var(--bz-ink); border-radius: 0; padding-inline: 0; box-shadow: none; }
body.seo-page .hero h1 { color: var(--bz-ink); }
body.seo-page .hero .eyebrow { color: var(--bz-purple); }
body.seo-page .hero .lead, body.seo-page .hero .fine, body.seo-page .hero .art-label, body.seo-page .hero-art > .art-label:last-child { color: var(--bz-muted); }
body.seo-page .hero .text-link { color: var(--bz-ink); }
body.seo-page .hero .button:not(.button-outline):not(.button-white) { background: var(--bz-purple); border-color: var(--bz-purple); color: #fff; border-radius: 999px; }
body.seo-page .hero .button:not(.button-outline):not(.button-white):hover { background: var(--bz-purple-dark); border-color: var(--bz-purple-dark); color: #fff; }
body.seo-page .hero .seo-breadcrumbs ol, body.seo-page .hero .seo-breadcrumbs a { color: var(--bz-muted); }
body.seo-page .hero .seo-breadcrumbs a:hover, body.seo-page .hero .seo-breadcrumbs [aria-current] { color: var(--bz-purple); }
body.seo-page .hero .seo-breadcrumbs li + li::before { border-color: #c9bfd8; }
body.seo-page .hero .product-shot { border-color: #e3dbee; box-shadow: 0 28px 60px #2a1a4a26; }
@media (max-width: 760px) { body.seo-page .hero { padding-inline: 0; } }

/* Cards and panels: white on cream, purple accents, no tinted or gradient fills. */
html body .feature-grid article:nth-child(n) { background: #fff; border-top-color: var(--bz-purple); }
body.seo-page .seo-deep-section .visual-panel.product-panel, html body .visual-panel.product-panel { background: var(--bz-lavender); }
html body .long-copy article, html body .seo-related-list a, html body .seo-included-list a, html body .features-hub-grid a { background: #fff; }

/* Call-to-action bands: flat brand purple with a white button. */
html body .cta { background: var(--bz-purple); box-shadow: none; }
html body .cta .button { background: #fff; border-color: #fff; color: var(--bz-purple); border-radius: 999px; }
html body .cta .button:hover { background: var(--bz-lavender); border-color: var(--bz-lavender); color: var(--bz-purple-dark); }
html body .cta .eyebrow { color: #e4d8ff; }
html body .cta p:not(.eyebrow) { color: #efe8ff; }

/* Blog and legal pages. */
html body .blog-inline-cta, html body .blog-card-placeholder { background: var(--bz-lavender); }
html body .blog-card-media { background: var(--bz-lavender); }
html body .blog-empty, html body .blog-toc { background: #fff; }

/* Sections follow the DOM order (the old flex ordering is homepage-only history) on one 80px rhythm. */
html body main#main { display: block; }
html body main#main > .section { padding-top: 80px; padding-bottom: 80px; }
html body main#main > .section + .section { padding-top: 0; }
html body main#main > .section.split { padding-top: 32px; padding-bottom: 32px; }
html body main#main > .section.split + .section { padding-top: 48px; }

/* Type */
html body .eyebrow { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: none; color: var(--bz-purple); }
html body h2 { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.15; letter-spacing: -.035em; color: var(--bz-ink); }
html body .section-heading { max-width: 760px; margin-bottom: 40px; }
html body .section-heading > p:not(.eyebrow), html body .section-copy p:not(.eyebrow) { font-size: 17px; line-height: 1.7; color: var(--bz-muted); }
html body .section-heading.centered { text-align: center; margin-inline: auto; }
html body .text-link { font-size: 15px; font-weight: 650; color: var(--bz-ink); text-decoration: underline; text-decoration-color: #cbbfe6; text-decoration-thickness: 2px; text-underline-offset: 6px; }
html body .text-link:hover { color: var(--bz-purple); text-decoration-color: var(--bz-purple); }

/* Buttons: purple pills like the homepage. */
html body .button { border-radius: 999px; padding: 13px 24px; font-weight: 650; }

/* Hero */
body.seo-page .hero { padding-top: 56px; padding-bottom: 72px; }
body.seo-page .hero h1 { font-size: clamp(36px, 4.4vw, 60px); line-height: 1.08; letter-spacing: -.045em; }
/* The keyword line inside the H1 keeps the small eyebrow look. */
body.seo-page .hero h1 .seo-h1-keyword { display: block; line-height: 1.4; }
body.seo-page .hero .lead { max-width: 560px; font-size: 19px; line-height: 1.65; }
body.seo-page .hero .button:not(.button-outline):not(.button-white) { min-height: 56px; padding: 16px 32px; font-size: 17px; }
body.seo-page .hero .fine { font-size: 14px; font-weight: 600; }
html body .product-shot { border-radius: 16px; }

/* Cards: white, rounded, hairline border on cream. */
html body .feature-grid { gap: 20px; }
html body .feature-grid article:nth-child(n) { padding: 28px; border: 1px solid var(--bz-line); border-radius: 20px; background: #fff; }
html body .feature-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--bz-lavender); color: var(--bz-purple); font-size: 14px; font-weight: 700; }
html body .feature-grid h3 { margin: 18px 0 8px; font-size: 20px; }
html body .feature-grid p { font-size: 15px; line-height: 1.65; color: var(--bz-muted); }
html body .long-copy { gap: 20px; }
html body .long-copy article { padding: 28px; border: 1px solid var(--bz-line); border-radius: 20px; }
html body .long-copy p { font-size: 15px; line-height: 1.65; }
/* Rows never leave a card hanging: 6 tracks, cards span 2 (three a row). Four cards make a 2 x 2 grid, and a
   last row of two (2, 5 or 8 cards) shares the width evenly. */
html body .long-copy { grid-template-columns: repeat(6, minmax(0, 1fr)); }
html body .long-copy > article { grid-column: span 2; }
html body .long-copy.seo-long-copy-pairs > article,
html body .long-copy > article:nth-child(3n+1):nth-last-child(2),
html body .long-copy > article:nth-child(3n+2):last-child { grid-column: span 3; }
@media (max-width: 760px) { html body .long-copy { grid-template-columns: minmax(0, 1fr); } html body .long-copy > article { grid-column: 1 / -1; } }
html body .seo-included-list a, html body .seo-related-list a { border: 1px solid var(--bz-line); border-radius: 18px; }
html body .seo-included-icon { border-radius: 12px; background: var(--bz-lavender); color: var(--bz-purple); }
html body .features-hub-grid a { border: 1px solid var(--bz-line); border-radius: 20px; }
html body .seo-included-list a:hover, html body .seo-related-list a:hover, html body .features-hub-grid a:hover { border-color: #d9ccf2; box-shadow: 0 16px 34px #2a1a4a14; }

/* Product screenshots beside copy */
html body .split { gap: clamp(32px, 5vw, 80px); }
body.seo-page .seo-deep-section .visual-panel.product-panel, html body .visual-panel.product-panel { padding: 22px; border: 0; border-radius: 26px; box-shadow: none; }
html body .visual-panel.product-panel img { border-radius: 12px; }

/* Tick lists: purple ticks in lavender circles, as on the homepage. */
html body .benefits li { padding-left: 30px; font-size: 15px; line-height: 1.55; }
html body .benefits li::before { content: ''; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--bz-lavender) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%236e42d3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }

/* Pricing cards: same as the homepage, Free featured with a yellow badge. */
html body .pricing-grid { gap: 22px; align-items: stretch; padding-top: 0; }
html body .pricing-grid .price-card, body.seo-pricing .pricing-grid .price-card:nth-child(n) { display: flex; flex-direction: column; padding: 30px; border: 1px solid var(--bz-line); border-radius: 22px; background: #fff; box-shadow: none; transform: none; }
html body .pricing-grid .price-card.featured, body.seo-pricing .pricing-grid .price-card.featured:nth-child(n) { border: 2px solid var(--bz-purple); box-shadow: 0 18px 44px #6e42d322; }
html body .pricing-grid .price-card .plan-ribbon { position: static; inset: auto; align-self: flex-start; order: 0; margin: 0 0 14px; padding: 5px 12px; border-radius: 999px; background: #ffe08a; color: var(--bz-ink); font-size: 13px; font-weight: 700; line-height: 1.4; letter-spacing: 0; text-transform: none; text-align: left; }
html body .pricing-grid .price-card:not(.featured)::before { content: ''; height: 28px; margin-bottom: 14px; }
html body .price-card h3 { margin: 0 0 4px; font-size: 22px; }
html body .price-card .plan-description { min-height: 0; margin: 0 0 18px; font-size: 14px; }
html body .price-card .price { font-size: 44px; font-weight: 700; letter-spacing: -.03em; }
html body .price-card .button { width: 100%; min-height: 50px; font-size: 15px; }
html body .price-card .button.button-outline { background: #fff; border: 1.5px solid #d9ccf2; color: var(--bz-purple); box-shadow: none; }
html body .price-card .button.button-outline:hover { background: var(--bz-lavender); border-color: #c6b2ee; color: var(--bz-purple-dark); }
html body .price-card h4 { border-top-color: var(--bz-line); }
html body .pricing-note { max-width: 760px; margin: 28px auto 0; text-align: center; font-size: 14px; line-height: 1.6; color: var(--bz-muted); }

/* FAQ */
html body .faq { gap: clamp(28px, 5vw, 72px); }
html body .faq > div:first-child > p:not(.eyebrow) { font-size: 17px; color: var(--bz-muted); }
html body .faq-list, html body .faq-list details { border-color: var(--bz-line); }
html body .faq-list summary { font-size: 17px; }
html body .faq-list details p { font-size: 15px; line-height: 1.7; color: var(--bz-muted); }

/* Final call to action: centred purple card, as on the homepage. */
html body main#main > .cta, html body .cta { flex-direction: column; align-items: center; justify-content: center; gap: 0; margin-top: 0; margin-bottom: 80px; padding: clamp(40px, 6vw, 80px) clamp(24px, 5vw, 64px); border-radius: 32px; text-align: center; }
html body .cta > div:first-child { max-width: 760px; }
html body .cta h2 { margin: 0 0 14px; font-size: clamp(28px, 3.4vw, 44px); color: #fff; }
html body .cta p:not(.eyebrow) { max-width: 560px; margin: 0 auto 28px; font-size: 18px; line-height: 1.6; }
html body .cta-action { text-align: center; }
html body .cta .button { min-height: 56px; padding: 16px 32px; font-size: 17px; }
html body .cta-action p { margin: 12px 0 0 !important; font-size: 14px !important; color: #e4d8ff !important; }

/* Blog */
html body .blog-card, html body .blog-empty { border-color: var(--bz-line); border-radius: 20px; }
html body .blog-card:hover { border-color: #d9ccf2; box-shadow: 0 16px 34px #2a1a4a14; }
html body .blog-card-category, html body .blog-toc-title { font-size: 13px; letter-spacing: .02em; text-transform: none; color: var(--bz-purple); }
html body .blog-categories a { background: #fff; border-color: var(--bz-line); }
html body .blog-cover img { border-radius: 24px; border-color: var(--bz-line); }
html body .blog-inline-cta { border-radius: 22px; }
html body .blog-inline-cta .button { box-shadow: none; }
html body .blog-avatar { background: var(--bz-purple); }

@media (max-width: 760px) {
    html body main#main > .section { padding-top: 56px; padding-bottom: 56px; }
    html body main#main > .section + .section { padding-top: 0; }
    html body main#main > .section.split { padding-top: 24px; padding-bottom: 24px; }
    body.seo-page .hero { padding-top: 32px; padding-bottom: 48px; }
    body.seo-page .hero .actions .button { width: 100%; }
    html body .pricing-grid .price-card:not(.featured)::before { display: none; }
    html body .pricing-grid .price-card.featured { margin-top: 0; }
    html body main#main > .cta, html body .cta { margin-bottom: 56px; border-radius: 22px; }
}
/* The old pricing page forced the third card's button to solid purple (.seo-pricing .price-card:nth-child(3) .button). */
body.seo-pricing .pricing-grid .price-card:nth-child(n) .button.button-outline { background: #fff; border: 1.5px solid #d9ccf2; color: var(--bz-purple); }
body.seo-pricing .pricing-grid .price-card:nth-child(n) .button.button-outline:hover { background: var(--bz-lavender); border-color: #c6b2ee; color: var(--bz-purple-dark); }
/* Plan badges: Free (yellow), Business (lavender), Premium keeps an invisible badge so the cards line up. */
html body .pricing-grid .price-card .plan-ribbon.plan-ribbon-team { background: var(--bz-lavender); color: var(--bz-purple); }
html body .pricing-grid .price-card .plan-ribbon.plan-ribbon-empty { visibility: hidden; }
html body .pricing-grid .price-card:not(.featured)::before { display: none; }
@media (max-width: 760px) { html body .pricing-grid .price-card .plan-ribbon.plan-ribbon-empty { display: none; } }

/* Monthly / yearly pricing toggle (inc/price-display.php). CSS-only: the radios sit before the cards. */
.bz-bill-radio { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bz-bill-toggle { display: flex; width: fit-content; margin: 0 auto 32px; padding: 5px; border: 1px solid var(--bz-line); border-radius: 999px; background: #fff; }
.bz-bill-toggle label { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px; color: var(--bz-ink); font-size: 15px; font-weight: 650; cursor: pointer; transition: background-color .15s, color .15s; }
.bz-bill-toggle label span { padding: 3px 9px; border-radius: 999px; background: #ffe08a; color: var(--bz-ink); font-size: 12px; font-weight: 700; }
#bz-bill-month:checked ~ .bz-bill-toggle label[for="bz-bill-month"], #bz-bill-year:checked ~ .bz-bill-toggle label[for="bz-bill-year"] { background: var(--bz-purple); color: #fff; }
#bz-bill-month:focus-visible ~ .bz-bill-toggle label[for="bz-bill-month"], #bz-bill-year:focus-visible ~ .bz-bill-toggle label[for="bz-bill-year"] { outline: 3px solid #b79cf0; outline-offset: 2px; }
.bz-price-year { display: none; }
#bz-bill-year:checked ~ * span.bz-price-year { display: inline; }
#bz-bill-year:checked ~ * p.bz-price-year { display: block; }
#bz-bill-year:checked ~ * .bz-price-month { display: none; }
.bz-price-saving { margin: -12px 0 18px; font-size: 13px; font-weight: 600; color: var(--bz-purple); }
@media (max-width: 400px) { .bz-bill-toggle label { padding: 9px 14px; font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .bz-bill-toggle label { transition: none; } }
/* "or £199.90 a year: 2 months free" under each paid price in the monthly view. */
.bz-price-promo { margin: -12px 0 18px; font-size: 13px; color: var(--bz-muted); }
.bz-price-promo strong { padding: 1px 7px; border-radius: 999px; background: #ffe08a; color: var(--bz-ink); font-weight: 700; white-space: nowrap; }

/* Brand typeface. Plus Jakarta Sans (SIL Open Font License), self-hosted because the CSP allows fonts
   from this site only. Older stylesheets name Segoe UI and Poppins in many places, and Poppins was
   never loaded, so Macs and phones fell back to Arial. One !important rule here sets the face everywhere. */
@font-face { font-family: 'Plus Jakarta Sans'; src: url('/assets/fonts/plus-jakarta-sans-latin-wght.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; }
:root { --bz-font: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif; }
body, body *:not(code):not(pre):not(kbd):not(samp) { font-family: var(--bz-font) !important; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
h1, h2, h3 { font-weight: 700; }
/* Tracking was tuned for Segoe UI; Plus Jakarta Sans is tighter already, so ease the landing-page headings slightly. */
.hero h1 { letter-spacing: -.035em; }
h2 { letter-spacing: -.028em; }

/* Pricing page: a short centred heading with the plan cards straight underneath. */
.hero.pricing-hero { display: block; padding-block: 40px 8px; text-align: center; }
.pricing-hero > div { max-width: 760px; margin-inline: auto; }
.pricing-hero .seo-breadcrumbs ol { justify-content: center; }
.pricing-hero h1 { margin-bottom: 16px; }
.pricing-hero .lead { max-width: 600px; margin: 0 auto 8px; }
.pricing-plans { padding-block: 24px 64px; }
/* With yearly billing on, the price sits in a .bz-price-month/.bz-price-year wrapper span, which the older
   ".price > span" rule shrank to 12px. Keep the wrapper full size and shrink only the "/ month" label inside it. */
.price > .bz-price-month, .price > .bz-price-year { font-size: inherit; letter-spacing: inherit; color: inherit; font-weight: inherit; }
.price .bz-price-month > span, .price .bz-price-year > span { font-size: 13px; letter-spacing: 0; color: var(--bz-muted); font-weight: 500; }
.price-card .bz-price-promo, .price-card .bz-price-saving { margin: 8px 0 0; }

/* Newsletter sign-up band at the top of the public footer (inc/newsletter-form.php). */
.bz-newsletter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 20px 48px; margin-bottom: 56px; padding: clamp(24px, 4vw, 40px); border-radius: 24px; background: var(--bz-lavender); border: 1px solid #e4d9f7; }
.bz-newsletter h2 { margin: 0 0 8px; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; letter-spacing: -.02em; color: var(--bz-ink); }
.bz-newsletter-copy p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--bz-muted); }
.bz-newsletter-row { display: flex; gap: 8px; padding: 6px; border: 1px solid #ddd0f3; border-radius: 999px; background: #fff; }
.bz-newsletter-row:focus-within { border-color: var(--bz-purple); box-shadow: 0 0 0 3px #6e42d326; }
.bz-newsletter-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bz-newsletter-row input { flex: 1; min-width: 0; padding: 10px 16px; border: 0; background: transparent; color: var(--bz-ink); font-size: 15px; outline: none; }
.bz-newsletter-row button { flex-shrink: 0; padding: 11px 22px; border: 0; border-radius: 999px; background: var(--bz-purple); color: #fff; font-size: 15px; font-weight: 650; cursor: pointer; }
.bz-newsletter-row button:hover { background: var(--bz-purple-dark); }
.bz-newsletter-row button:focus-visible { outline: 3px solid #b79cf0; outline-offset: 2px; }
.bz-newsletter-note { margin: 10px 0 0 6px; font-size: 12.5px; line-height: 1.5; color: var(--bz-muted); }
.bz-newsletter-note a { color: var(--bz-purple); text-decoration: underline; }
.bz-newsletter-trap { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 860px) { .bz-newsletter { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) {
    .bz-newsletter-row { flex-direction: column; border-radius: 18px; }
    .bz-newsletter-row button { width: 100%; }
}
.newsletter-result { max-width: 680px; padding-block: 72px 96px; }
.newsletter-result h1 { margin: 0 0 16px; font-size: clamp(32px, 4vw, 46px); line-height: 1.1; }
.newsletter-result .lead { max-width: none; margin-bottom: 28px; }

/* Top bar above the header: one honest line about the offer, and a direct way to reach a person. */
.bz-topbar { background: var(--bz-ink); color: #d9d2ee; font-size: 13px; line-height: 1.4; }
.bz-topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; max-width: var(--bz-bar-max); min-height: 40px; margin-inline: auto; padding: 8px var(--gutter, 24px); }
.bz-topbar p { margin: 0; }
.bz-topbar strong { color: #fff; font-weight: 700; }
.bz-topbar-dot { display: inline-block; width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; background: #ffe08a; vertical-align: 2px; }
.bz-topbar a { color: #ffe08a; font-weight: 650; text-decoration: none; white-space: nowrap; }
.bz-topbar a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.bz-topbar a:focus-visible { outline: 2px solid #ffe08a; outline-offset: 3px; border-radius: 3px; }
.bz-topbar a.bz-topbar-offer-link { margin-left: 8px; color: #ffe08a; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
    .bz-topbar-inner { justify-content: center; text-align: center; padding-inline: 16px; }
    .bz-topbar-extra, .bz-topbar-contact { display: none; }
}

/* Promo code chip and the offer line on Premium plan cards. */
.bz-code { display: inline-block; padding: 1px 8px; border-radius: 6px; border: 1px dashed currentColor; font-weight: 800; letter-spacing: .06em; white-space: nowrap; }
.bz-topbar .bz-code { color: #ffe08a; }
.bz-offer-note { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: #fff6d6; color: var(--bz-ink); font-size: 13px; line-height: 1.45; }
.bz-offer-note .bz-code { color: var(--bz-purple); background: #fff; }