/* =========================================================================
   Karkaot - One Click Accessibility (Pojo) font-resize + contrast fixes
   -------------------------------------------------------------------------
   The plugin only adds body.pojo-a11y-resize-font-NN and sets
   font-size: NN% !important on p/li/label/input/span/... and NN*1.33% on
   h1-h6 / "h_ span". Percentages compound through nesting (CF7 wraps every
   input in <p><span>), px-sized <div>/<a>/<button> never change, and the
   cookie banner/modal sit outside the theme markup.

   RULE A: every font rule is gated behind body[class*="pojo-a11y-resize-font-"];
           with no size selected (or after Reset) this file changes nothing.
   RULE B: generic rules are scoped to the theme's content roots, so the
           toolbar only gets its own explicit (smaller) rule in Section 2b.
   Contrast fixes (Section 6) are gated behind the plugin's contrast classes.
   ========================================================================= */


/* Section 1: STEP -> MULTIPLIERS (two curves)
     --a11y-scale       text / headings / lists / toolbar   +15% ... +60%
     --a11y-scale-form  inputs, submits, pill buttons, CF7 messages,
                        cookie title / body / buttons       +30% ... +75% */
:root { --a11y-scale: 1; --a11y-scale-form: 1; }
body.pojo-a11y-resize-font-130 { --a11y-scale: 1.15; --a11y-scale-form: 1.30; }
body.pojo-a11y-resize-font-140 { --a11y-scale: 1.22; --a11y-scale-form: 1.40; }
body.pojo-a11y-resize-font-150 { --a11y-scale: 1.28; --a11y-scale-form: 1.48; }
body.pojo-a11y-resize-font-160 { --a11y-scale: 1.35; --a11y-scale-form: 1.55; }
body.pojo-a11y-resize-font-170 { --a11y-scale: 1.42; --a11y-scale-form: 1.62; }
body.pojo-a11y-resize-font-180 { --a11y-scale: 1.48; --a11y-scale-form: 1.68; }
body.pojo-a11y-resize-font-190 { --a11y-scale: 1.54; --a11y-scale-form: 1.72; }
body.pojo-a11y-resize-font-200 { --a11y-scale: 1.60; --a11y-scale-form: 1.75; }


/* Section 2: Base pin on <body> (measured baseline 16px / 26px). */
html body[class*="pojo-a11y-resize-font-"] {
    font-size: calc(16px * var(--a11y-scale)) !important;
}
/* Content roots inherit body's 26px line-height as a fixed px value - scale it
   with the text so wrapped lines don't collide. round() snaps it to whole
   pixels: fractional row heights made 1px dividers (FAQ) blur away. Browsers
   without round() keep the first declaration. */
html body[class*="pojo-a11y-resize-font-"] :is(.mainbanner, .overall-wrap, .main-footer, .sticky-button-group, .video-modal, .description-section, .all-over-header) {
    line-height: calc(26px * var(--a11y-scale)) !important;
    line-height: round(calc(26px * var(--a11y-scale)), 1px) !important;
}


/* Section 2b: Accessibility toolbar items - grow a bit less than page text.
   Plugin alone: 12.8px -> 25.6px (+100%). Here: 12.8px -> 20.48px (+60%),
   always 80% of the body text size at the same step. Title keeps plugin's 16px. */
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-item span {
    font-size: calc(12.8px * var(--a11y-scale)) !important;
}
/* Keep every menu item on one line, at only the width it needs: the
   plugin's panel is a fixed 180px and slides with a fixed -180px offset.
   Size panel + toolbar to their content (never below the 180px default) and
   slide by the toolbar's own width instead, so the toggle tab always sits on
   its edge. The plugin's 750ms slide moves from left to transform. */
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar {
    width: max-content !important;
}
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay {
    width: max-content !important;
    min-width: 180px !important;
}
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-item a {
    white-space: nowrap !important;
}
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar.pojo-a11y-toolbar-left {
    left: 0 !important;
    transform: translateX(-100%);
    transition: transform 750ms cubic-bezier(.23, 1, .32, 1) !important;
}
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar.pojo-a11y-toolbar-right {
    right: 0 !important;
    transform: translateX(100%);
    transition: transform 750ms cubic-bezier(.23, 1, .32, 1) !important;
}
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar.pojo-a11y-toolbar-open {
    transform: none;
}
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar.pojo-a11y-toolbar-left .pojo-a11y-toolbar-toggle {
    left: 100% !important;
}
html body[class*="pojo-a11y-resize-font-"] #pojo-a11y-toolbar.pojo-a11y-toolbar-right .pojo-a11y-toolbar-toggle {
    right: 100% !important;
}


/* Section 3: Kill the compounding percentages inside every content root.
   Everything below inherits the scaled body size; explicit sizes are
   restored by Sections 4 and 5. input/select/textarea are handled in 4. */
html body[class*="pojo-a11y-resize-font-"] :is(.mainbanner, .overall-wrap, .main-footer, .sticky-button-group, .video-modal, .description-section, .all-over-header) p,
html body[class*="pojo-a11y-resize-font-"] :is(.mainbanner, .overall-wrap, .main-footer, .sticky-button-group, .video-modal, .description-section, .all-over-header) li,
html body[class*="pojo-a11y-resize-font-"] :is(.mainbanner, .overall-wrap, .main-footer, .sticky-button-group, .video-modal, .description-section, .all-over-header) span,
html body[class*="pojo-a11y-resize-font-"] :is(.mainbanner, .overall-wrap, .main-footer, .sticky-button-group, .video-modal, .description-section, .all-over-header) label,
html body[class*="pojo-a11y-resize-font-"] :is(.mainbanner, .overall-wrap, .main-footer, .sticky-button-group, .video-modal, .description-section, .all-over-header) blockquote,
html body[class*="pojo-a11y-resize-font-"] :is(.mainbanner, .overall-wrap, .main-footer, .sticky-button-group, .video-modal, .description-section, .all-over-header) legend,
html body[class*="pojo-a11y-resize-font-"] :is(.mainbanner, .overall-wrap, .main-footer, .sticky-button-group, .video-modal, .description-section, .all-over-header) code,
html body[class*="pojo-a11y-resize-font-"] :is(.mainbanner, .overall-wrap, .main-footer, .sticky-button-group, .video-modal, .description-section, .all-over-header) pre,
html body[class*="pojo-a11y-resize-font-"] :is(.mainbanner, .overall-wrap, .main-footer, .sticky-button-group, .video-modal, .description-section, .all-over-header) dd,
html body[class*="pojo-a11y-resize-font-"] :is(.mainbanner, .overall-wrap, .main-footer, .sticky-button-group, .video-modal, .description-section, .all-over-header) dt,
html body[class*="pojo-a11y-resize-font-"] :is(.mainbanner, .overall-wrap, .main-footer, .sticky-button-group, .video-modal, .description-section, .all-over-header) h1 span,
html body[class*="pojo-a11y-resize-font-"] :is(.mainbanner, .overall-wrap, .main-footer, .sticky-button-group, .video-modal, .description-section, .all-over-header) h2 span,
html body[class*="pojo-a11y-resize-font-"] :is(.mainbanner, .overall-wrap, .main-footer, .sticky-button-group, .video-modal, .description-section, .all-over-header) h3 span,
html body[class*="pojo-a11y-resize-font-"] :is(.mainbanner, .overall-wrap, .main-footer, .sticky-button-group, .video-modal, .description-section, .all-over-header) h4 span,
html body[class*="pojo-a11y-resize-font-"] :is(.mainbanner, .overall-wrap, .main-footer, .sticky-button-group, .video-modal, .description-section, .all-over-header) h5 span,
html body[class*="pojo-a11y-resize-font-"] :is(.mainbanner, .overall-wrap, .main-footer, .sticky-button-group, .video-modal, .description-section, .all-over-header) h6 span {
    font-size: inherit !important;
}


/* Section 4: FORM CONTROLS on --a11y-scale-form.
   Mirrors the theme 1:1 (style.css base, then responsive.css in source order). */

html body[class*="pojo-a11y-resize-font-"] .btn {
    font-size: calc(1rem * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .form-wrap input,
html body[class*="pojo-a11y-resize-font-"] :where(.mainbanner, .overall-wrap, .main-footer, .sticky-button-group, .video-modal, .description-section, .all-over-header) input,
html body[class*="pojo-a11y-resize-font-"] :where(.mainbanner, .overall-wrap, .main-footer, .sticky-button-group, .video-modal, .description-section, .all-over-header) input[type="email"],
html body[class*="pojo-a11y-resize-font-"] :where(.mainbanner, .overall-wrap, .main-footer, .sticky-button-group, .video-modal, .description-section, .all-over-header) input[type="tel"] {
    font-size: calc(14px * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] :where(.mainbanner, .overall-wrap, .main-footer, .sticky-button-group, .video-modal, .description-section, .all-over-header) input::placeholder {
    font-size: calc(15px * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .form-wrap input[type="submit"] {
    font-size: calc(26px * var(--a11y-scale-form)) !important;
    line-height: calc(27px * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .main-button {
    font-size: calc(24.64px * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .from-wrap-footer input::placeholder {
    font-size: calc(14px * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .footer-form-submit input[type="submit"] {
    font-size: calc(23px * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .sticky-button-group > .global-btn {
    font-size: calc(19px * var(--a11y-scale-form)) !important;
    line-height: calc(25px * var(--a11y-scale-form)) !important;
}

@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"] :where(.mainbanner, .overall-wrap, .main-footer, .sticky-button-group, .video-modal, .description-section, .all-over-header) input::placeholder {
        font-size: calc(18px * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .form-wrap input[type="submit"] {
        font-size: calc(29px * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .footer-form-submit input[type="submit"] {
        font-size: calc(30px * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .from-wrap-footer input::placeholder {
        font-size: calc(19px * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .main-button {
        font-size: calc(29.39px * var(--a11y-scale-form)) !important;
    }
}

/* CF7 messages. Theme default: 16px (tip = 1em of its <p>; output inherits).
   Unitless line-height so it grows with the font. */
html body[class*="pojo-a11y-resize-font-"] :is(.mainbanner, .overall-wrap, .main-footer, .sticky-button-group, .video-modal, .description-section, .all-over-header) .wpcf7-not-valid-tip {
    font-size: calc(16px * var(--a11y-scale-form)) !important;
    line-height: 1.3 !important;
}
html body[class*="pojo-a11y-resize-font-"] :is(.mainbanner, .overall-wrap, .main-footer, .sticky-button-group, .video-modal, .description-section, .all-over-header) .wpcf7-response-output {
    font-size: calc(16px * var(--a11y-scale-form)) !important;
    line-height: 1.5 !important;
}


/* Section 4c: Cookie banner (#cc-banner-root) and its settings modal
   (.cc-modal-wrap - a direct child of <body>, NOT inside .cc-root).
   Generic inherit first, then scaled pins (bare + scoped so they beat it). */
html body[class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) p,
html body[class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) li,
html body[class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) span,
html body[class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) label,
html body[class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) a {
    font-size: inherit !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-root {
    font-size: calc(14px * var(--a11y-scale)) !important;
    line-height: 1.5 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-title,
html body[class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) .cc-title {
    font-size: calc(18px * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-body,
html body[class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) .cc-body {
    font-size: calc(14px * var(--a11y-scale-form)) !important;
    line-height: 1.5 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-btn,
html body[class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) .cc-btn {
    font-size: calc(15px * var(--a11y-scale-form)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-lang-toggle,
html body[class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) .cc-lang-toggle {
    font-size: calc(12px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-modal-head h2,
html body[class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) .cc-modal-head h2 {
    font-size: calc(18px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-modal-close,
html body[class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) .cc-modal-close {
    font-size: calc(24px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-cat-desc,
html body[class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) .cc-cat-desc {
    font-size: calc(13px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-required-badge,
html body[class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) .cc-required-badge {
    font-size: calc(11px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-cookies-list,
html body[class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) .cc-cookies-list {
    font-size: calc(12px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-cookies-list th,
html body[class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) .cc-cookies-list th {
    font-size: calc(12px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-cookies-list td,
html body[class*="pojo-a11y-resize-font-"] :is(.cc-root, .cc-modal-wrap) .cc-cookies-list td {
    font-size: calc(12px * var(--a11y-scale)) !important;
}


/* Section 5: Per-element headings / text - every font-size rule from the
   theme (style.css + responsive.css) and Bootstrap's heading defaults,
   multiplied by --a11y-scale, at every breakpoint the source uses. px
   line-heights are scaled with them. */

html body[class*="pojo-a11y-resize-font-"] :where(.mainbanner, .overall-wrap, .main-footer, .sticky-button-group, .video-modal, .description-section, .all-over-header) h1 {
    font-size: calc((1.375rem + 1.5vw) * var(--a11y-scale)) !important;
}

@media (min-width:1200px) {
    html body[class*="pojo-a11y-resize-font-"] :where(.mainbanner, .overall-wrap, .main-footer, .sticky-button-group, .video-modal, .description-section, .all-over-header) h1 {
        font-size: calc(2.5rem * var(--a11y-scale)) !important;
    }
}

html body[class*="pojo-a11y-resize-font-"] :where(.mainbanner, .overall-wrap, .main-footer, .sticky-button-group, .video-modal, .description-section, .all-over-header) h2 {
    font-size: calc((1.325rem + .9vw) * var(--a11y-scale)) !important;
}

@media (min-width:1200px) {
    html body[class*="pojo-a11y-resize-font-"] :where(.mainbanner, .overall-wrap, .main-footer, .sticky-button-group, .video-modal, .description-section, .all-over-header) h2 {
        font-size: calc(2rem * var(--a11y-scale)) !important;
    }
}

html body[class*="pojo-a11y-resize-font-"] :where(.mainbanner, .overall-wrap, .main-footer, .sticky-button-group, .video-modal, .description-section, .all-over-header) h3 {
    font-size: calc((1.3rem + .6vw) * var(--a11y-scale)) !important;
}

@media (min-width:1200px) {
    html body[class*="pojo-a11y-resize-font-"] :where(.mainbanner, .overall-wrap, .main-footer, .sticky-button-group, .video-modal, .description-section, .all-over-header) h3 {
        font-size: calc(1.75rem * var(--a11y-scale)) !important;
    }
}

html body[class*="pojo-a11y-resize-font-"] :where(.mainbanner, .overall-wrap, .main-footer, .sticky-button-group, .video-modal, .description-section, .all-over-header) h4 {
    font-size: calc((1.275rem + .3vw) * var(--a11y-scale)) !important;
}

@media (min-width:1200px) {
    html body[class*="pojo-a11y-resize-font-"] :where(.mainbanner, .overall-wrap, .main-footer, .sticky-button-group, .video-modal, .description-section, .all-over-header) h4 {
        font-size: calc(1.5rem * var(--a11y-scale)) !important;
    }
}

html body[class*="pojo-a11y-resize-font-"] :where(.mainbanner, .overall-wrap, .main-footer, .sticky-button-group, .video-modal, .description-section, .all-over-header) h5 {
    font-size: calc(1.25rem * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] :where(.mainbanner, .overall-wrap, .main-footer, .sticky-button-group, .video-modal, .description-section, .all-over-header) h6 {
    font-size: calc(1rem * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .accordion-button {
    font-size: calc(1rem * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .main-banner-text h2 {
    font-size: calc(62px * var(--a11y-scale)) !important;
    line-height: calc(62px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .main-banner-text h1 {
    font-size: calc(70px * var(--a11y-scale)) !important;
    line-height: calc(70px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .main-banner-text p,
html body[class*="pojo-a11y-resize-font-"] .main-banner-text h3 {
    font-size: calc(44px * var(--a11y-scale)) !important;
    line-height: calc(37px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .bottom-info-banner p {
    font-size: calc(22px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .icon-box-top h2 {
    font-size: calc(20px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .fast-trac-text h2 {
    font-size: calc(37px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .fast-trac-text p {
    font-size: calc(23.18px * var(--a11y-scale)) !important;
    line-height: calc(32px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .headeing-of-number h2 {
    font-size: calc(37.73px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .green-number-head h2 {
    font-size: calc(22px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .lower-number-gray h2 {
    font-size: calc(43px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .lower-number-gray p {
    font-size: calc(42px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .lower-number-gray h2 span {
    font-size: calc(22px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .form-heading h2 {
    font-size: calc(37px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .ragden-box h2 {
    font-size: calc(21.88px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .main-heading {
    font-size: calc(37.73px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .headimg-gallery h2 {
    font-size: calc(46.55px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .headimg-gallery p {
    font-size: calc(23.28px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .how-work-content h2 {
    font-size: calc(21.65px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .last-green-how-work h2 {
    font-size: calc(31.92px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .finance-wrap p {
    font-size: calc(29.76px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .finance-wrap h3 {
    font-size: calc(29.76px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .arrow {
    font-size: calc(28px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .arrow.black {
    font-size: calc(43px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .says-head h2 {
    font-size: calc(34px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .says-middle p {
    font-size: calc(16px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .says-author h2 {
    font-size: calc(16px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .invester-says-carosel .fa-star {
    font-size: calc(14px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .heading-faqs h2 {
    font-size: calc(34.88px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .accordion-header,
html body[class*="pojo-a11y-resize-font-"] .accordion-button:not(.collapsed),
html body[class*="pojo-a11y-resize-font-"] .accordion-button {
    font-size: calc(15px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .last-quote-content p {
    font-size: calc(22px * var(--a11y-scale)) !important;
    line-height: calc(33px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .formhead h2 {
    font-size: calc(34.88px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .finance-wrap h2 {
    font-size: calc(29.76px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] #scroll-bubble h2 {
    font-size: calc(20px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .right-investment-main h3 {
    font-size: calc(32px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .right-investment-main h2 {
    font-size: calc(68px * var(--a11y-scale)) !important;
    line-height: calc(50px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .right-investment-main h2 span {
    font-size: calc(35px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .right-investment-main h2 p {
    font-size: calc(68px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .foter-investment-main h3 {
    font-size: calc(37px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .foter-investment-main h2 {
    font-size: calc(80px * var(--a11y-scale)) !important;
    line-height: calc(44px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .foter-investment-main h2 p {
    font-size: calc(83px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .foter-investment-main h2 span {
    font-size: calc(40px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .top-wala h3 {
    font-size: calc(24px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .top-wala h2 {
    font-size: calc(41.73px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .top-wala h2 p {
    font-size: calc(43px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .top-wala h2 span {
    font-size: calc(21px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .bottam-wala h3 {
    font-size: calc(21.41px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .bottam-wala h2 {
    font-size: calc(45px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .bottam-wala h2 p {
    font-size: calc(47px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .bottam-wala h2 span {
    font-size: calc(23px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .bubble {
    font-size: calc(12px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .page-title h1 {
    font-size: calc(37px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .project-wrapper .project-status {
    font-size: calc(18px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .project-wrapper .project-name {
    font-size: calc(24px * var(--a11y-scale)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .privacy-content p {
    font-size: calc(20px * var(--a11y-scale)) !important;
    line-height: calc(30px * var(--a11y-scale)) !important;
}

@media screen and (min-width: 768px) and (max-width: 1600px) {
    html body[class*="pojo-a11y-resize-font-"] .bottom-info-banner p {
        font-size: calc(17px * var(--a11y-scale)) !important;
    }
}

@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"] .main-banner-text p,
    html body[class*="pojo-a11y-resize-font-"] .main-banner-text h3 {
        font-size: calc(30px * var(--a11y-scale)) !important;
        line-height: calc(30px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .fast-trac-text h2 {
        font-size: calc(32px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .fast-trac-text p {
        font-size: calc(20px * var(--a11y-scale)) !important;
        line-height: calc(28px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .form-heading h2 {
        font-size: calc(25px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .main-banner-text h2 {
        font-size: calc(48px * var(--a11y-scale)) !important;
        line-height: calc(48px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .main-banner-text h1 {
        font-size: calc(55px * var(--a11y-scale)) !important;
        line-height: calc(55px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .ragden-box h2 {
        font-size: calc(17px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .green-number-head h2 {
        font-size: calc(18px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .lower-number-gray h2,
    html body[class*="pojo-a11y-resize-font-"] .lower-number-gray p {
        font-size: calc(35px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .top-wala h2 p,
    html body[class*="pojo-a11y-resize-font-"] .top-wala h2 {
        font-size: calc(20px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .headimg-gallery p {
        font-size: calc(24px * var(--a11y-scale)) !important;
        line-height: calc(35px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .how-work-content h2 {
        font-size: calc(17px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .last-green-how-work h2 {
        font-size: calc(22px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .says-middle p {
        font-size: calc(14px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .says-head h2 {
        font-size: calc(32px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .formhead h2 {
        font-size: calc(42.88px * var(--a11y-scale)) !important;
        line-height: calc(60px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .heading-faqs h2 {
        font-size: calc(37px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .finance-wrap p {
        font-size: calc(24px * var(--a11y-scale)) !important;
        line-height: calc(28px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .finance-wrap h3 {
        font-size: calc(24px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .finance-wrap h2 {
        font-size: calc(48.49px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .arrow {
        font-size: calc(38px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .arrow.black {
        font-size: calc(53px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .says-middle p {
        font-size: calc(20px * var(--a11y-scale)) !important;
        line-height: calc(28px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .says-author h2 {
        font-size: calc(20px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .accordion-header,
    html body[class*="pojo-a11y-resize-font-"] .accordion-button:not(.collapsed),
    html body[class*="pojo-a11y-resize-font-"] .accordion-button {
        font-size: calc(20px * var(--a11y-scale)) !important;
    }
}

@media (max-width: 400px) {
    html body[class*="pojo-a11y-resize-font-"] .green-number-head h2 {
        font-size: calc(16px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .how-work-content h2 {
        font-size: calc(16px * var(--a11y-scale)) !important;
    }
}


/* Section 5b: FIT CAPS - unbreakable Hebrew words in fixed-width boxes.
   Measured max font that still fits: hero "הצהוב שמייצר" 55px @375 / 7.7vw on
   tablet+; icon-row cards 2vw up to the 1125px container (25px); garden
   cards 3.7vw; the 3 nowrap financing arrows 1.43x @768 (5.2vw / 8vw);
   scroll bubble 23.6px (90px circle).
   Floors keep the theme's own size - a cap never shrinks below the design. */
@media (min-width: 768px) {
    html body[class*="pojo-a11y-resize-font-"] .main-banner-text h2 {
        font-size: max(62px, min(calc(62px * var(--a11y-scale)), 7.7vw)) !important;
        line-height: max(62px, min(calc(62px * var(--a11y-scale)), 7.7vw)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .icon-innerwrap .icon-box-top h2 {
        font-size: max(20px, min(calc(20px * var(--a11y-scale)), 2vw, 25px)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .ragden-box h2 {
        font-size: max(21.88px, min(calc(21.88px * var(--a11y-scale)), 3.7vw)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .arrow {
        font-size: max(28px, min(calc(28px * var(--a11y-scale)), 5.2vw)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .arrow.black {
        font-size: max(43px, min(calc(43px * var(--a11y-scale)), 7.7vw)) !important;
    }
}
html body[class*="pojo-a11y-resize-font-"] #scroll-bubble h2 {
    font-size: min(calc(20px * var(--a11y-scale)), 23px) !important;
}
@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"] .main-banner-text h2 {
        font-size: min(calc(48px * var(--a11y-scale)), 14.5vw) !important;
        line-height: min(calc(48px * var(--a11y-scale)), 14.5vw) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .icon-box-top h2 {
        font-size: min(calc(20px * var(--a11y-scale)), 6.8vw) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .bottam-wala h2,
    html body[class*="pojo-a11y-resize-font-"] .bottam-wala h2 p {
        font-size: min(calc(45px * var(--a11y-scale)), 15.5vw) !important;
    }
}
/* Investment badge (.right-investment-main, "השקעה ₪329K"): absolutely
   positioned beside the icon row with no spare room - measured gap to the
   nearest card at rest: 768 -23px, 900 +6, 1024 +29, 1200 -107, 1366 -29,
   1440 +5, 1600 -15, 1920 +191. Growing it runs it into the cards, so it
   grows only a little (max 1.2x) below 1920px, and at most
   1.5x on wider screens. It is hidden below 768px. */
@media (min-width: 768px) and (max-width: 1919px) {
    html body[class*="pojo-a11y-resize-font-"] .right-investment-main h3 { font-size: calc(32px * min(var(--a11y-scale), 1.2)) !important; }
    html body[class*="pojo-a11y-resize-font-"] .right-investment-main h2 { font-size: calc(68px * min(var(--a11y-scale), 1.2)) !important; line-height: calc(50px * min(var(--a11y-scale), 1.2)) !important; }
    html body[class*="pojo-a11y-resize-font-"] .right-investment-main h2 span { font-size: calc(35px * min(var(--a11y-scale), 1.2)) !important; }
    html body[class*="pojo-a11y-resize-font-"] .right-investment-main h2 p { font-size: calc(68px * min(var(--a11y-scale), 1.2)) !important; }
}
@media (min-width: 1920px) {
    html body[class*="pojo-a11y-resize-font-"] .right-investment-main h3 { font-size: calc(32px * min(var(--a11y-scale), 1.5)) !important; }
    html body[class*="pojo-a11y-resize-font-"] .right-investment-main h2 { font-size: calc(68px * min(var(--a11y-scale), 1.5)) !important; line-height: calc(50px * min(var(--a11y-scale), 1.5)) !important; }
    html body[class*="pojo-a11y-resize-font-"] .right-investment-main h2 span { font-size: calc(35px * min(var(--a11y-scale), 1.5)) !important; }
    html body[class*="pojo-a11y-resize-font-"] .right-investment-main h2 p { font-size: calc(68px * min(var(--a11y-scale), 1.5)) !important; }
}

/* Mobile sticky bar (.sticky-button-group, fixed 10px above the bottom).
   Scaled, its two buttons wrap to 2 lines and the bar grows to
   2 x 25px x form-scale + 46px (measured 111 / 123.5 / 133.5px at
   130 / 160 / 200), covering the end of the footer form and the footer
   links. Reserve that height + its 10px offset + a 16px gap. */
@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"] .main-footer {
        padding-bottom: calc(50px * var(--a11y-scale-form) + 72px) !important;
    }
}

/* Section 4d: VALIDATION TIP POSITIONING (middle lead form, mobile).
   responsive.css takes .form-wrap tips out of flow (position:absolute, no
   top) below each full-width field. Scaled, the message wraps to 2 lines and
   is drawn over the next field (measured @375: +7px @130, +44px @160,
   +53px @200). Put it back in flow while a size is active - the column is
   full-width here, so it cannot be squeezed. */
@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"] .form-wrap .wpcf7-not-valid-tip {
        position: static !important;
        margin-top: 2px !important;
    }
}

/* =========================================================================
   Section 6: CONTRAST MODES - check icons and toggle "boxes"
   ========================================================================= */

/* Round check icons (green-check.png: green circle + white tick, transparent
   corners). Every contrast mode fills the <img> box (#808080 / #000 / #fff),
   which drew a square around the circle and notched the card border. Keep it
   transparent and lift it above the card outline it overlaps. */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) :is(.icon-wrap-green, .ragden-box) img:not(#pojo-a11y-toolbar) {
    background: transparent !important;
    background-color: transparent !important;
    position: relative;
    z-index: 1;
}

/* Video: the play/pause <button> is a full-size transparent overlay on the
   Vimeo iframe. The plugin fills buttons (#600040 / #000 / #fff) and svgs,
   which hid the video completely. */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .video__play-button:not(#pojo-a11y-toolbar),
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .video__play-button *:not(#pojo-a11y-toolbar) {
    background: transparent !important;
    border: 0 !important;
}

/* Video popup overlay: keep the default look (page dimmed by Bootstrap's
   50% black backdrop + blur) in every mode. The plugin painted the full-screen
   .modal wrapper and .modal-dialog solid, hiding the page, and light mode
   turned the backdrop white. The popup's own content box keeps the mode fill. */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) :is(.video-modal, .video-modal .modal-dialog):not(#pojo-a11y-toolbar) {
    background: transparent !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .modal-backdrop:not(#pojo-a11y-toolbar) {
    background: #000 !important;
}

/* Popup close button: green circle + white X. Light mode filled the button
   white, so the white X vanished - use a black circle there. The svg itself
   stays transparent in every mode. */
html body.pojo-a11y-light-background .modal-close-btn:not(#pojo-a11y-toolbar) {
    background: #000 !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .modal-close-btn svg:not(#pojo-a11y-toolbar) {
    background: transparent !important;
    fill: #fff !important;
}

/* CF7 loading spinner (24px #23282d circle + light dot in ::before). Dark
   modes painted the circle black-on-black, light mode painted it white so
   the white dot vanished. Invert it per mode, fully opaque. */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .wpcf7 form .wpcf7-spinner:not(#pojo-a11y-toolbar) {
    background: #fff !important;
    opacity: 1 !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .wpcf7 form .wpcf7-spinner::before {
    background: #000 !important;
}
html body.pojo-a11y-light-background .wpcf7 form .wpcf7-spinner:not(#pojo-a11y-toolbar) {
    background: #000 !important;
    opacity: 1 !important;
}
html body.pojo-a11y-light-background .wpcf7 form .wpcf7-spinner::before {
    background: #fff !important;
}

/* Page background: black in high / negative contrast. High contrast never
   paints <body> itself (its selector list only has "body body"), so the
   theme's white body showed; <html> stays transparent in both modes. */
html:has(> body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast)),
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast):not(#pojo-a11y-toolbar) {
    background: #000 !important;
}

/* BRAND BOXES - background colour + shape in every contrast mode.
   The plugin fills every element with the page colour, so coloured boxes -
   and the clip-path arrow shapes, which exist only through their fill -
   vanished. Restore the theme colours; boxes whose colour is black turn
   white in the dark modes so their shape still shows. Text colour is picked
   for contrast. Box children are transparent so the plugin's fill on them
   doesn't cover the box. */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .numberspeak .green-number-head:not(#pojo-a11y-toolbar) { background: #5faf5b !important; }
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .numberspeak .lower-number-gray:not(#pojo-a11y-toolbar) { background: #eeeff0 !important; }
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .how-it-works .last-green-how-work:not(#pojo-a11y-toolbar) { background: #3b8749 !important; }
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .arrow-container .arrow.green:not(#pojo-a11y-toolbar) { background: #65b55e !important; }
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) :is(.main-footer, .video-modal) .footer-form-submit input[type="submit"]:not(#pojo-a11y-toolbar) { background: #65b55e !important; }
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .sticky-button-group:not(#pojo-a11y-toolbar) { background: #327e45 !important; }
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .sticky-button-group > .global-btn.yellow-btn:not(#pojo-a11y-toolbar) { background: #65b55e !important; }
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) :is(.mainbanner .main-banner-text h2, .fast-track .fast-track-heading-01) span:not(#pojo-a11y-toolbar) { background: #fbda00 !important; }
/* black-brand boxes: black in light mode, white in the dark modes */
html body.pojo-a11y-light-background :is(.numberspeak .lower-number-gray.last-black-num, .arrow-container .arrow.black, .financing-sec .main-button, .form-wrap input[type="submit"], .sticky-button-group > .global-btn:not(.yellow-btn)):not(#pojo-a11y-toolbar) { background: #000 !important; }
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) :is(.numberspeak .lower-number-gray.last-black-num, .arrow-container .arrow.black, .financing-sec .main-button, .form-wrap input[type="submit"], .sticky-button-group > .global-btn:not(.yellow-btn)):not(#pojo-a11y-toolbar) { background: #fff !important; }
html body.pojo-a11y-light-background .investors-says:not(#pojo-a11y-toolbar) { background: #f7f8fa !important; }
/* children of the boxes: no page-colour fill on top */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) :is(.green-number-head, .lower-number-gray, .last-green-how-work, .arrow, .main-button, .sticky-button-group, .main-banner-text h2 span, .fast-track-heading-01 span) *:not(#pojo-a11y-toolbar) {
    background: transparent !important;
}
/* text: black on light boxes (green / grey / yellow / white) */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) :is(.green-number-head, .green-number-head *, .lower-number-gray, .lower-number-gray *, .arrow.green, .arrow.green *, .footer-form-submit input[type="submit"], .sticky-button-group > .global-btn.yellow-btn, .sticky-button-group > .global-btn.yellow-btn *, .main-banner-text h2 span, .fast-track-heading-01 span):not(#pojo-a11y-toolbar),
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) :is(.last-black-num, .last-black-num *, .arrow.black, .arrow.black *, .financing-sec .main-button, .form-wrap input[type="submit"], .sticky-button-group > .global-btn:not(.yellow-btn), .sticky-button-group > .global-btn:not(.yellow-btn) *):not(#pojo-a11y-toolbar) {
    color: #000 !important;
}
/* text: white on dark boxes (dark green, and black in light mode) */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) :is(.last-green-how-work, .last-green-how-work *):not(#pojo-a11y-toolbar),
html body.pojo-a11y-light-background :is(.last-black-num, .last-black-num *, .arrow.black, .arrow.black *, .financing-sec .main-button, .form-wrap input[type="submit"], .sticky-button-group > .global-btn:not(.yellow-btn), .sticky-button-group > .global-btn:not(.yellow-btn) *):not(#pojo-a11y-toolbar) {
    color: #fff !important;
}

/* Custom scroll bar (desktop): grey track, green progress line, green
   gradient bubble. The plugin filled all three with the page colour, so
   they disappeared. Draw them in the mode's contrast colours. */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .custom-scrollbar:not(#pojo-a11y-toolbar) {
    background: #000 !important;
    border: 2px solid #fff !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .custom-scrollbar .progress:not(#pojo-a11y-toolbar) {
    background: #fff !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) #scroll-bubble:not(#pojo-a11y-toolbar) {
    background: #000 !important;
    border: 2px solid #fff !important;
}
html body.pojo-a11y-light-background .custom-scrollbar:not(#pojo-a11y-toolbar) {
    background: #fff !important;
    border: 2px solid #000 !important;
}
html body.pojo-a11y-light-background .custom-scrollbar .progress:not(#pojo-a11y-toolbar) {
    background: #000 !important;
}
html body.pojo-a11y-light-background #scroll-bubble:not(#pojo-a11y-toolbar) {
    background: #fff !important;
    border: 2px solid #000 !important;
}
/* the bubble is round (border-radius 50%) but its <h2> got its own square
   fill from the plugin, poking square corners out past the circle */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) #scroll-bubble *:not(#pojo-a11y-toolbar) {
    background: transparent !important;
}

/* Buttons: always outlined. The plugin borders only real <button>/<input>
   and only in the dark modes; the theme's pill buttons (.main-button, the
   mobile sticky .global-btn) are <a class="btn"> and got no border at all,
   and light mode borders nothing. .btn already reserves a 1px border in
   Bootstrap, so this causes no layout shift there. */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) :is(.btn, .main-button, .global-btn, .cc-btn, input[type="submit"]):not(#pojo-a11y-toolbar) {
    border: 1px solid #fff !important;
}
html body.pojo-a11y-light-background :is(.btn, .main-button, .global-btn, .cc-btn, input[type="submit"]):not(#pojo-a11y-toolbar) {
    border: 1px solid #000 !important;
}

/* FAQ accordion: the item borders are the frame and dividers, but their
   rgba(0,0,0,.125) grey is invisible on black and faint on white. Draw them
   in the mode's colour; the question <button> itself gets no border (the
   plugin's own button border would double every line). */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .faqs-accordian .accordion-item:not(#pojo-a11y-toolbar) {
    border-color: #fff !important;
}
html body.pojo-a11y-light-background .faqs-accordian .accordion-item:not(#pojo-a11y-toolbar) {
    border-color: #000 !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .faqs-accordian .accordion-button:not(#pojo-a11y-toolbar) {
    border: 0 !important;
}

/* Project cards: the name sits on the photo (over the theme's dark gradient
   ::before). The plugin gave the <h3> and the card wrappers a solid fill,
   drawing a black/white bar across the photo. Keep them transparent. The status ribbon keeps its contrast fill. */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) :is(.project-sec .slide-item, .project-wrapper, .project-wrapper .project-name):not(#pojo-a11y-toolbar) {
    background: transparent !important;
}

/* Slick carousels (gallery + testimonials): the arrow / dot <button>s were
   filled and bordered by the plugin, showing default square buttons. The
   theme artwork lives in ::before (arrow images, dot bars) and is untouched. */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) :is(.slick-prev, .slick-next, .slick-dots button):not(#pojo-a11y-toolbar) {
    background: transparent !important;
    border: 0 !important;
    color: transparent !important;
    box-shadow: none !important;
}

/* The check cards are outlined only by a box-shadow. High contrast removes
   all shadows and negative contrast paints them black-on-black, so the card
   "box" around the check vanished. Draw it with an outline (no layout shift). */
body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) :is(.ragden-box, .how-word-card, .says-card) {
    outline: 2px solid #fff !important;
    outline-offset: -2px;
}

/* Cookie settings toggles (<input type=checkbox> + .cc-slider track/knob).
   High/negative contrast: black track on black modal, no border -> only a
   floating knob. Light background: white track + white knob -> invisible.
   Give the track a border and make ON/OFF differ by fill, not just position.
   :not(#pojo-a11y-toolbar) matches the plugin's own (1,x,x) specificity.
   The 2px border shrinks the inner box to 40x20, so the knob becomes 14px
   (3px inset each side, 20px travel stays symmetric). */
body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .cc-toggle .cc-slider:not(#pojo-a11y-toolbar) {
    border: 2px solid currentColor !important;
}
body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .cc-toggle .cc-slider::before {
    width: 14px !important;
    height: 14px !important;
    box-shadow: none !important;
}
/* dark modes: OFF = black track, white knob; ON = yellow track, black knob */
body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .cc-toggle .cc-slider:not(#pojo-a11y-toolbar) {
    background: #000 !important;
    color: #fff !important;
}
body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .cc-toggle .cc-slider::before {
    background: #fff !important;
}
body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .cc-toggle input:checked + .cc-slider:not(#pojo-a11y-toolbar) {
    background: #ff0 !important;
    color: #ff0 !important;
}
body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .cc-toggle input:checked + .cc-slider::before {
    background: #000 !important;
}
/* light mode: OFF = white track, black knob; ON = black track, white knob */
body.pojo-a11y-light-background .cc-toggle .cc-slider:not(#pojo-a11y-toolbar) {
    background: #fff !important;
    color: #000 !important;
}
body.pojo-a11y-light-background .cc-toggle .cc-slider::before {
    background: #000 !important;
}
body.pojo-a11y-light-background .cc-toggle input:checked + .cc-slider:not(#pojo-a11y-toolbar) {
    background: #000 !important;
}
body.pojo-a11y-light-background .cc-toggle input:checked + .cc-slider::before {
    background: #fff !important;
}
/* ---------------------------------------------------------------------------
   BACKGROUND IMAGES in contrast modes.
   The plugin's "background: #000|#fff !important" (and high contrast's
   background-image:none) wipes the hero / numbers / footer photos. Their URLs
   come from ACF inline styles, which CSS can't read back - a small footer
   script in functions.php copies each inline background-image into
   --a11y-bg on the same element (no visual effect on its own).
   :not(#pojo-a11y-toolbar) out-specifies the plugin's (1,2,1) rules. */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) [style*="--a11y-bg"]:not(#pojo-a11y-toolbar) {
    background-image: var(--a11y-bg) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}
/* High / negative contrast: the text is light, the photos are bright (sky,
   haze) - darken the photo with a 60% black layer so light text stays
   readable (white on the brightest sky ~5.9:1) while the image still shows. */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) [style*="--a11y-bg"]:not(#pojo-a11y-toolbar) {
    background-image: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)), var(--a11y-bg) !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .numberspeak[style*="--a11y-bg"]:not(#pojo-a11y-toolbar) {
    background-position: center bottom !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .main-footer[style*="--a11y-bg"]:not(#pojo-a11y-toolbar) {
    background-position: 0 0 !important;
}
/* mirror responsive.css: mobile hero/numbers use an <img> instead, and the
   footer switches to its mobile artwork */
@media (max-width: 767px) {
    html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) :is(.mainbanner, .numberspeak)[style*="--a11y-bg"]:not(#pojo-a11y-toolbar) {
        background-image: none !important;
    }
}
@media (max-width: 550px) {
    html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) .main-footer[style*="--a11y-bg"]:not(#pojo-a11y-toolbar) {
        background-image: url("../images/footer-mb-bg.png") !important;
    }
    html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) .main-footer[style*="--a11y-bg"]:not(#pojo-a11y-toolbar) {
        background-image: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)), url("../images/footer-mb-bg.png") !important;
    }
}
/* The plugin also paints every wrapper/heading inside those sections solid
   black/white, which would sit on top of the photo. Make the layout
   wrappers transparent; real boxes (fields, buttons, number tiles) keep the
   plugin's contrast fill. */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) :is(.mainbanner, .numberspeak, .main-footer, .all-over-header, .icons-section) *:not(input, button, textarea, select, img, .btn, .wpcf7-spinner, .green-number-head, .green-number-head *, .lower-number-gray, .lower-number-gray *):not(#pojo-a11y-toolbar) {
    background-color: transparent !important;
}

/* ---------------------------------------------------------------------------
   FORM FIELDS in contrast modes: placeholder + border always visible.
   Theme placeholder is #000 (black-on-black in dark modes); theme inputs
   have border:none (invisible white-on-white in light mode). */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) :is(.mainbanner, .overall-wrap, .main-footer, .sticky-button-group, .video-modal, .description-section, .all-over-header) input:not([type="hidden"]):not(#pojo-a11y-toolbar) {
    border: 1px solid #fff !important;
}
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) :is(.mainbanner, .overall-wrap, .main-footer, .sticky-button-group, .video-modal, .description-section, .all-over-header) input::placeholder {
    color: #c8c8c8 !important;
    opacity: 1 !important;
}
html body.pojo-a11y-light-background :is(.mainbanner, .overall-wrap, .main-footer, .sticky-button-group, .video-modal, .description-section, .all-over-header) input:not([type="hidden"]):not(#pojo-a11y-toolbar) {
    border: 1px solid #000 !important;
}
html body.pojo-a11y-light-background :is(.mainbanner, .overall-wrap, .main-footer, .sticky-button-group, .video-modal, .description-section, .all-over-header) input::placeholder {
    color: #555 !important;
    opacity: 1 !important;
}
/* Browser autofill paints its own pale-yellow fill (UA !important, can't be
   overridden with background) - cover it with an inset shadow in the mode's
   colour and force the text colour. */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) :is(.mainbanner, .overall-wrap, .main-footer, .sticky-button-group, .video-modal, .description-section, .all-over-header) input:-webkit-autofill:not(#pojo-a11y-toolbar) {
    box-shadow: 0 0 0 1000px #000 inset !important;
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff;
}
html body.pojo-a11y-light-background :is(.mainbanner, .overall-wrap, .main-footer, .sticky-button-group, .video-modal, .description-section, .all-over-header) input:-webkit-autofill:not(#pojo-a11y-toolbar) {
    box-shadow: 0 0 0 1000px #fff inset !important;
    -webkit-text-fill-color: #000 !important;
    caret-color: #000;
}
/* invalid field: keep a distinct border colour */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast) :is(.mainbanner, .overall-wrap, .main-footer, .sticky-button-group, .video-modal, .description-section, .all-over-header) input.wpcf7-not-valid:not(#pojo-a11y-toolbar) {
    border: 2px solid #ff0 !important;
}
html body.pojo-a11y-light-background :is(.mainbanner, .overall-wrap, .main-footer, .sticky-button-group, .video-modal, .description-section, .all-over-header) input.wpcf7-not-valid:not(#pojo-a11y-toolbar) {
    border: 2px solid #c00 !important;
}
/* The theme pulls the error message 4px up over its field; the plugin's
   solid fill on the message then hid the field's bottom border. */
html body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background) :is(.mainbanner, .overall-wrap, .main-footer, .sticky-button-group, .video-modal, .description-section, .all-over-header) .wpcf7-not-valid-tip:not(#pojo-a11y-toolbar) {
    background: transparent !important;
}

/* keyboard focus on the hidden checkbox must stay visible in every mode */
body:is(.pojo-a11y-high-contrast, .pojo-a11y-negative-contrast, .pojo-a11y-light-background, .pojo-a11y-grayscale) .cc-toggle input:focus-visible + .cc-slider {
    outline: 2px dashed currentColor !important;
    outline-offset: 2px;
}