div.b-widget {
    font-family : inherit;
}

div.pricing-offer__box-most-popular p {
    font-weight : 600;
}

.pricing-offer__box-s-attribute ul li:before {
    top : .5rem !important;
}

.wpcf7 form div.wpcf7-response-output {
    margin : 0
}

.oem-request .contact__socials-address,
.single-dev-request .contact__socials-address {
    display : none;
}

.page-template-checkout-page ul.bry-header__mmItems,
.page-template-checkout-page footer {
    display : none;
}

.main.checkout {
    padding-bottom : 10rem;
}

.payment-section h4,
.payment-options {
    display     : flex;
    align-items : center;
    overflow    : hidden;
}

.payment-section h4 {
    justify-content : space-between;
}

.payment-options {
    gap : 1rem;
}

.payment-options img {
    width : 4rem;
}

#card-element {
    padding : 2rem;
}

.form__label.card {
    padding : 0;
}

.form .wpcf7-not-valid-tip {
    line-height : 2rem;
    margin-top  : 0.5em;
}

.wpcf7 .form__checkbox .wpcf7-list-item-label:after {
    top : .5rem !important;
}

.singlePost table th {
    font-weight : 600;
}

section.singlePost__blog-footer {
    margin : 0 auto 4rem auto;
}

.changelog .badge {
    margin-inline-end : 0.5rem;
}

.checkout-renewal #coupon_validate_section {
    display : none;
}

.changelog .ul-bug-fixes .ticket-link {
    min-width: 2.6em !important;
    width: auto;
}

.author-bio-section,
.pricing-offer__box.lite {
    display:none !important;
}

/* Safari can render Prism punctuation as transparent on blog code samples.
   Keep this override out of product pages and interactive demos. */
.single-post .token.punctuation {
    opacity: 1 !important;
}


.introvideo .container {
    text-align : center;
}

.introvideo iframe {
    width : 80%;
    height : auto !important;
    aspect-ratio: 16 / 9;
}

iframe[src*="youtube"] {
    border-radius : 1.6rem;
}

@media (max-width: 1024px) {
    iframe[src*="youtube"] {
        flex: 0 0 100%;
        padding: 0;
        width: 100%;
    }
}

.wp-block-image.size-large {
    max-width: 100%;
}

.single-post figcaption {
    font-size : .8em;
    color:#777;
}
/* Avoid conflicts with WP */
.b-resource-info {
    line-height: 1.3;
}

.b-resource-avatar {
    max-width:unset;
}

body > .b-drag-proxy {
    font-size : 1.5rem;
}

/* Contact Form 7 >= 5.x always renders the response container (empty, aria-hidden)
   instead of hiding it, so the theme's styled green/checkmark box showed on page
   load. Hide it only while it is empty. CF7 6.x keeps aria-hidden="true" on the
   container even after a message is inserted (the screen-reader live region is a
   separate element), so we must NOT key off aria-hidden or the success/thank-you
   message stays hidden. */
.wpcf7-response-output:empty {
    display: none !important;
}

/* Show the reCAPTCHA v3 badge (overrides the theme's .grecaptcha-badge{visibility:hidden}).
   Google's terms require either showing the badge or the "protected by reCAPTCHA" notice. */
.grecaptcha-badge {
    visibility: visible !important;
}

.singlePost__cta {
    margin: 48px auto;
    max-width: 820px;
    padding: 32px;
    border: 1px solid #e2e4ec;
    border-radius: 12px;
    background: linear-gradient(135deg, #f7f8fc 0%, #eef1fb 100%);
    text-align: center;
}
.singlePost__cta-title {
    margin: 0 0 8px;
    font-size: 24px;
    line-height: 1.25;
    color: #1b1c2e;
}
.singlePost__cta-text {
    margin: 0 0 24px;
    font-size: 16px;
    color: #4a4c63;
}
.singlePost__cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}
/* Selectors are prefixed with .singlePost__cta so they win over the theme's
   .wysywig a link color (#0076f8), which otherwise tints the button text. */
/* The theme forces link color with `color: var(--bryntum-primary) !important`,
   so the button text colors must use !important to win (otherwise the primary
   button gets blue-on-blue text). */
.singlePost__cta .singlePost__cta-btn {
    display: inline-block;
    padding: 12px 22px;
    border: 1px solid #c4c8dc;
    border-radius: 8px;
    background: #fff;
    color: #0076f8 !important;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.singlePost__cta .singlePost__cta-btn:hover {
    border-color: #0076f8;
    color: #0061cf !important;
}
.singlePost__cta .singlePost__cta-btn--primary {
    background: #0076f8;
    border-color: #0076f8;
    color: #fff !important;
}
.singlePost__cta .singlePost__cta-btn--primary:hover {
    background: #0061cf;
    border-color: #0061cf;
    color: #fff !important;
}
@media (max-width: 600px) {
    .singlePost__cta { padding: 24px 18px; }
    .singlePost__cta-actions { flex-direction: column; }
    .singlePost__cta-btn { width: 100%; }
}

/* Related-posts module on single posts (audit F13 / ticket 49801007).
   The cards reuse the homepage post-list component (.post-list__wrapper +
   includes/Components/SinglePostItemVerticalSmall), so only the section
   wrapper and heading need styling here; the grid and card styles come from
   block-post-list/_style.scss and the component's own SCSS. */
.singlePost__related {
    margin: 0 auto 8rem auto;
}
.singlePost__related-title {
    margin: 0 0 2rem;
    font-size: 2.4rem;
}

/* "Code samples may be outdated" admonition, rendered before the post body by
   single-post.php. Ported from the inline <style> of the old WP block pattern
   and scoped to .singlePost__admonition so it never affects genuine post quotes.
   The theme's default blockquote styling adds decorative quote marks and a
   fixed/narrow box, which we override here. */
.singlePost__admonition {
    /* Match the 72rem centered column of .singlePost__section so the admonition
       lines up with the post body (it used to sit inside the content). */
    max-width: 72rem;
    margin: 0 auto;
}
.singlePost__admonition blockquote.wp-block-quote::before,
.singlePost__admonition blockquote.wp-block-quote::after {
    display: none !important;
}
.singlePost .singlePost__admonition blockquote.wp-block-quote {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 2rem 3.5rem !important;
    height: auto !important;
    min-height: auto !important;
    margin: 3rem auto !important;
}
.singlePost .singlePost__admonition blockquote.wp-block-quote > p {
    padding: 0 !important;
}

/* Footer rating badge (ticket 49328771), rendered by includes/layout/footer.php
   above the copyright row.

   Hidden by default and revealed only once the badge <img> has a src, which
   Cookiebot sets when the visitor accepts marketing cookies (see footer.php).
   Without this the src-less <img> renders as a broken-image glyph plus its alt
   text, and the <a> around it would be an empty link. display:none takes the
   whole row out of the accessibility tree too, so pre-consent the footer is
   exactly what it is today.

   A browser too old for :has() simply never shows the badge - the safe way to
   fail. The width/height attributes carry the badge's 278x91 aspect ratio so
   the row does not shift when the SVG arrives. */
.footer__ratings {
    display: none;
}
.footer__ratings:has(img[src]) {
    display: flex;
    justify-content: center;
    margin-bottom: 2.4rem;
}
.footer__ratings img {
    height: 5.6rem;
    width: auto;
}

/* Hero animated words (ticket 49364112).

   The hero H1 used to hold all four animated phrases as text, so the heading
   text Google indexes read "World Class Web Components For SchedulingGantt
   ChartsCalendarsKanban Boards" - four category names run together.

   The fix is in the markup (scripts/homepage-hero-animated-words): the first
   phrase stays a text node, and the other three become empty spans carrying
   their phrase in a data-word attribute. The H1's text is therefore one clean
   phrase, while the page still shows four layers to animate.

   This is the only rule needed to paint them, because generated content is not
   part of the DOM's text - which is exactly why it is used here. Everything
   else is untouched: the layers keep their original .one/.two/.three/.four
   classes, so the theme bundle's existing `show-height` animation and its
   0/3/6/9s delays drive the crossfade unchanged, with no JavaScript involved
   and nothing for a slow load to make flicker. */
.animated-words span[data-word]:after {
    content: attr(data-word);
}

/* Heading hierarchy (ticket 49364129).

   Two of the home page's headings were styling choices rather than document
   structure - the framework labels under the integration logos and the name
   under the customer quote - and the migration in
   scripts/homepage-heading-hierarchy turns them into paragraphs carrying the
   theme's own .h5_style / .h6_style typography classes. Those classes restore
   the heading font, but two rules in the compiled bundle are keyed to the tag
   name and stop matching, so they are restated here for the paragraph.

   Both blocks appear on other pages too, where the headings have not been
   migrated; those keep matching the bundle's h5/h6 rules and are unaffected. */

/* .text-languages__box-text h5 in the bundle: 1.6rem, 2rem from large-phone up.
   Without this the label falls back to .h5_style's own 2rem/2.2rem and the logo
   row's labels come out a size too big. */
.text-languages__box-text p.h5_style {
    font-size: 1.6rem;
}
@media (min-width: 481px) {
    .text-languages__box-text p.h5_style {
        font-size: 2rem;
    }
}

/* .quote-image__text p in the bundle (0,1,1) outweighs .h6_style (0,1,0), so as
   a paragraph the attribution would take the 2.2rem/400/160% quote-body type.
   Restated at (0,2,1) - the h6 metrics, plus the h6's own top padding. */
.quote-image__text p.h6_style {
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 120%;
    letter-spacing: .01em;
    padding: 1.6rem 0 0;
}
@media (min-width: 481px) {
    .quote-image__text p.h6_style {
        font-size: 2rem;
    }
}
@media (min-width: 1025px) {
    .quote-image__text p.h6_style {
        padding: 1.7rem 0 0;
    }
}
/* Visible breadcrumb trail (ticket 49801014), rendered by
   bryntum_the_breadcrumbs() in the theme's functions.php on single posts and
   blog category archives.

   This file rather than the theme SCSS: the compiled theme CSS bundle is a
   Nov 2022 build that is not rebuilt on deploy, so theme SCSS edits never
   reach the site. /css/custom.css is a plain deployed file, cache-busted by
   filemtime() in header.php - the same route the footer rating badge uses.

   Keep this as a quiet utility row above the centered blog hero. Constrain
   the repeated current title so the trail does not become a second heading. */
.breadcrumbs {
    margin    : 0 0 3.2rem;
    max-width : 100%;
}
.singlePost__header > .breadcrumbs {
    transform : translateY(-.8rem);
}
/* On the category archive the trail is the first thing inside `.main.posts`,
   whose 8.8rem top padding is sized for the hero block that used to start
   there - not enough to clear the site header on its own, so the trail needs
   its own run-up. Single posts need none: .singlePost__header already has it. */
.posts .breadcrumbs {
    margin-bottom : 2.4rem;
    padding-top   : 2.4rem;
}
.posts .breadcrumbs + .hero-text {
    padding-top : 3.2rem;
}
.breadcrumbs__list {
    display         : flex;
    flex-wrap       : nowrap;
    align-items     : center;
    justify-content : center;
    gap             : .8rem;
    max-width       : 100%;
    margin          : 0;
    padding         : 0;
    list-style      : none;
    overflow        : hidden;
}
.breadcrumbs .breadcrumbs__item {
    display         : flex;
    align-items     : center;
    flex-shrink     : 0;
    gap             : .4rem;
    margin          : 0;
    min-width       : 0;
    font-size       : 1.7rem;
    font-weight     : 600;
    line-height     : 1.5;
    letter-spacing  : .015em;
    color           : #747683;
}
.breadcrumbs__item:before {
    content : "\203A";
    color   : #747683;
    opacity : .55;
}
.breadcrumbs__item:first-child:before {
    content : none;
}
.breadcrumbs__item:last-child {
    flex-shrink : 1;
    max-width   : 40rem;
}
/* Two classes deep so both templates land on the same colours. Inside a post
   the theme's `.singlePost a:not(...)` rule would otherwise claim these links
   and the category archive's would not, leaving the same component blue on one
   page and grey on the other. This is the theme's own link treatment, stated
   explicitly; custom.css is loaded after the inline theme stylesheet, so the
   equal-specificity tie resolves here. */
.breadcrumbs .breadcrumbs__item a {
    color           : #747683;
    font-weight     : 600;
    text-decoration : none;
}
.breadcrumbs .breadcrumbs__item a:hover {
    color           : var(--bryntum-primary);
    text-decoration : underline;
}
.breadcrumbs .breadcrumbs__item a:focus-visible {
    background     : rgba(0, 118, 248, .12);
    border-radius  : .2rem;
    outline        : 2px solid var(--bryntum-primary);
    outline-offset : -2px;
}
.breadcrumbs__current {
    display       : block;
    min-width     : 0;
    overflow      : hidden;
    color         : #747683;
    text-overflow : ellipsis;
    white-space   : nowrap;
}
@media (max-width : 640px) {
    .breadcrumbs {
        margin-bottom : 2.4rem;
    }
    .breadcrumbs__item:last-child {
        max-width : 42vw;
    }
}

/* Visible focus indicator, sitewide.

   The compiled theme bundle strips the browser's default focus ring and never
   replaces it:
       :focus,a,a:focus,a:hover{outline:0;text-decoration:none}
       button,input,select,svg,textarea{...;outline:none;...}
   so tabbing through any page moves focus invisibly. A keyboard-only or
   low-vision visitor cannot tell what is focused or what Enter will activate,
   which fails WCAG 2.1 AA 2.4.7 (Focus Visible). Confirmed identical on prod
   and on the sandbox, so it is long-standing rather than a regression.

   :focus-visible, not :focus, so the ring appears for keyboard and
   assistive-tech users and never on a mouse click - which is what the bundle's
   blanket outline:0 was presumably trying to avoid in the first place.

   Specificity and order: each selector below is at least (0,1,1), tying with
   the bundle's own a:focus, and this file is loaded after the inline bundle,
   so the tie resolves here and no !important is needed. The form-control reset
   is (0,0,1) and is outranked outright.

   Colour is the solid brand blue rather than the 35%-alpha version used by the
   /company/ components: that alpha computes to about #a6cffd over white, which
   is roughly 1.7:1 against the page and would fail the very contrast
   requirement this rule exists to satisfy. Solid measures 4.25:1 on white and
   4.10:1 on the dark footer.

   outline rather than border or box-shadow, so nothing reflows: outlines are
   painted outside the box and take up no space, and they follow the element's
   own border-radius, so a pill gets a pill-shaped ring. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline        : 3px solid var(--bryntum-primary, #0076f8);
    outline-offset : 2px;
}

/* Prose links get an underline rather than a box.

   A box around an inline link reads badly, and worse, a link that wraps across
   two lines is drawn as two separate boxes. A thick underline is unambiguous,
   follows the text wherever it wraps, and is distinguishable here because body
   links are not underlined at rest.

   Scoped to `.main`, which wraps page content sitewide and post content too
   (a post is <article class="main singlePost">), so a wrapped link reads the
   same on a product page as in a blog post. Deliberately limited to prose
   containers rather than every link under `.main`: list items outside post
   content are often cards, where an underline would read oddly and a ring is
   right. The :not() list mirrors the bundle's own prose rule, so anything the
   theme treats as a button or control keeps its ring. */
.main p a:not(.btn,.btn__link_arrow,.next,.prev,.label,.remove-style-link,.link-style-4):focus-visible,
.main td a:not(.btn,.btn__link_arrow,.next,.prev,.label,.remove-style-link,.link-style-4):focus-visible,
.main blockquote a:not(.btn,.btn__link_arrow,.next,.prev,.label,.remove-style-link,.link-style-4):focus-visible,
.main figcaption a:not(.btn,.btn__link_arrow,.next,.prev,.label,.remove-style-link,.link-style-4):focus-visible,
.singlePost__section li a:not(.btn,.btn__link_arrow,.next,.prev,.label,.remove-style-link,.link-style-4):focus-visible {
    outline                   : none;
    text-decoration           : underline;
    text-decoration-thickness : 3px;
    text-underline-offset     : 4px;
}

/* Rounded corners on the ring.

   An outline follows the element's own border-radius, so a square element gets
   a square ring. Setting a radius while focused shapes the ring and changes
   nothing else on these elements, because none of them paints a background or
   border of its own.

   Anything already round is excluded so it keeps its shape: .btn is a 60px
   radius, the post-card category pills are 34px, and the carousel controls
   (.carousel__navigation-button, .carousel__next, .carousel__prev) are circles
   at border-radius:50%. Without that last exclusion a carousel dot visibly
   morphs from a circle into a rounded square while focused. */
a:not(.btn):not([class*="__category"]):not([class*="carousel__"]):focus-visible,
button:not(.btn):not([class*="carousel__"]):focus-visible,
summary:focus-visible {
    border-radius : .8rem;
}

/* Top-level header links: draw the ring inside.

   .bry-header__mmItems is `overflow:hidden` and the links fill it exactly -
   measured clearance above and below is 0px - so an outward ring loses its top
   and bottom edges and only the sides survive. These links carry 14px/30px of
   padding, so a ring 3px inside the box still sits well clear of the text. */
.bry-header__mmLink:focus-visible {
    outline-offset : -3px;
}

/* The Free Trial button is a filled brand-blue pill, so a blue ring inside it
   would be invisible. White reads against the fill, and the pill's own 60px
   radius shapes the ring. */
.bry-header__mmLink.btn:focus-visible {
    outline        : 3px solid #fff;
    outline-offset : -6px;
}

/* Dropdown links have `padding: 5px 0` - no horizontal padding at all - so an
   inset ring would cut straight through the text. There is 100px of clearance
   to the panel edge, so the ring goes outward instead, far enough to leave a
   clear gap around the words. */
.bry-header__mmLinkChild:focus-visible {
    outline-offset : 4px;
}

/* Post-card category pills sit flush against their container: measured
   clearance is 0px left and below, so an outward ring is cut off. One pixel
   inside keeps the whole ring visible, and it follows the pill's own radius. */
.singlePostItemVerticalSmall__category:focus-visible,
.singlePostItemHorizontalBig__category:focus-visible {
    outline-offset : -1px;
}

/* The two card variants are filled differently, and only the small one has the
   pale #e9f1fe background that a blue ring shows up against. The big card's
   pill is filled with var(--bryntum-primary) itself, so a blue ring inside it
   is invisible - the same blue-on-blue trap as the Free Trial button, and on
   the exact control this change exists to make visible. White reads against
   the fill. */
.singlePostItemHorizontalBig__category:focus-visible {
    outline : 3px solid #fff;
}

/* Open the dropdown for keyboard users.

   The bundle reveals a submenu on .bry-header__mmItem:hover only, so tabbing
   into a child link moved focus into a panel that stays invisible - the link
   was focused and the ring was drawn, but inside something with opacity 0.
   Mirroring those two rules on :focus-within opens the panel when focus enters
   it and closes it again the moment focus leaves, with no JavaScript. Scoped to
   the desktop breakpoint, where the hover rules themselves live. */
@media (min-width : 1025px) {
    .bry-header__mmItem:focus-within .bry-header__mmChild,
    .bry-header__mmItem:focus-within .bry-header__mmChildOne {
        opacity          : 1;
        pointer-events   : auto;
        transition-delay : 0s;
    }
    .bry-header__mmItem:focus-within .bry-header__mmLink .bry-header__mmLinkLabel {
        transform : translateY(-1.2rem) rotate(180deg);
    }
}

/* WordPress image alignment classes in post content.

   The editor writes .alignleft / .alignright / .aligncenter onto an image when
   an author picks an alignment, and the theme styles none of them, so the
   choice is silently ignored: an image meant to have text wrapped around it
   renders as a plain inline image, and the paragraph's first line sits level
   with its bottom edge rather than beside it. 157 of 309 published posts carry
   at least one, 534 images in all.

   Scoped to .singlePost so nothing outside post content can move.

   Only the float cases are given a layout. .alignleft and .alignright are 15
   of those 534 and are the ones that actually read as broken, because wrapping
   is the whole point of them. .alignnone (337) means "no alignment" and needs
   nothing.

   .aligncenter (182) is deliberately left unstyled. Centring it safely means
   matching only images that are alone in their paragraph, and CSS cannot
   express that: :only-child counts element children and ignores text nodes, so
   `p:has(> img.aligncenter:only-child)` also matches <p>text <img> text</p>
   and would centre paragraphs of ordinary prose. Verified in a browser, not
   assumed. Making them display:block instead would reflow all 182, including
   the 176 wrapped in an <a> and the ones sitting in hand-built flex rows of
   logos. Not worth it to move an image from left to centre. */
@media (min-width : 768px) {
    .singlePost .alignleft {
        float  : left;
        margin : .5rem 2.4rem 1.6rem 0;
    }
    .singlePost .alignright {
        float  : right;
        margin : .5rem 0 1.6rem 2.4rem;
    }
    /* Keep a float from running past its section and pushing into the next
       heading. Inert until something actually floats, so this changes nothing
       on the posts that have no aligned image. */
    .singlePost h2,
    .singlePost h3 {
        clear : both;
    }
}