/* ==========================================================================
   accessibility.css — Fingold theme override for Pojo "One Click Accessibility"
   --------------------------------------------------------------------------
   Every rule in this file is gated behind body[class*="pojo-a11y-resize-font-"]
   so at rest the design is unchanged. When the plugin adds one of its resize
   classes (…-130 … …-200), the rules here override its % compounding with an
   explicit px * scale value, per-selector per-breakpoint.

   The theme has NO Elementor. Main content wrappers are:
     .header-wrap-inner, #hero, #eligibility, #who-we-are,
     #middle-form, #how-does-work, #saying, #footer
   Section 3 uses those to keep the inherit-flatten away from the toolbar
   (#pojo-a11y-toolbar) and the cookie banner (#cc-banner-root).

   The Pojo toolbar has its own `font-size: 16px !important` pin at the root
   so nothing here reaches it — verify: toolbar item span 12.8 -> 25.6 stays
   identical with vs without this file.
   ========================================================================== */


/* ---------------------------------------------------------------------------
   Section 1 — STEP -> MULTIPLIERS
   --------------------------------------------------------------------------
   Two curves. Form controls, submit buttons, response messages and cookie
   title/buttons feel small so they get the bigger jump on step 1 and a
   higher ceiling at step 200. Body copy uses the calmer curve.
   --------------------------------------------------------------------------- */
:root {
    --a11y-scale: 1;
    --a11y-scale-form: 1;
    --a11y-scale-hero: 1;
    --a11y-scale-menu: 1;
}
body.pojo-a11y-resize-font-130 { --a11y-scale: 1.15; --a11y-scale-form: 1.30; --a11y-scale-hero: 1.09; --a11y-scale-menu: 1.05; }
body.pojo-a11y-resize-font-140 { --a11y-scale: 1.22; --a11y-scale-form: 1.40; --a11y-scale-hero: 1.13; --a11y-scale-menu: 1.07; }
body.pojo-a11y-resize-font-150 { --a11y-scale: 1.28; --a11y-scale-form: 1.48; --a11y-scale-hero: 1.17; --a11y-scale-menu: 1.09; }
body.pojo-a11y-resize-font-160 { --a11y-scale: 1.35; --a11y-scale-form: 1.55; --a11y-scale-hero: 1.21; --a11y-scale-menu: 1.12; }
body.pojo-a11y-resize-font-170 { --a11y-scale: 1.42; --a11y-scale-form: 1.62; --a11y-scale-hero: 1.25; --a11y-scale-menu: 1.14; }
body.pojo-a11y-resize-font-180 { --a11y-scale: 1.48; --a11y-scale-form: 1.68; --a11y-scale-hero: 1.29; --a11y-scale-menu: 1.16; }
body.pojo-a11y-resize-font-190 { --a11y-scale: 1.54; --a11y-scale-form: 1.72; --a11y-scale-hero: 1.32; --a11y-scale-menu: 1.18; }
body.pojo-a11y-resize-font-200 { --a11y-scale: 1.60; --a11y-scale-form: 1.75; --a11y-scale-hero: 1.36; --a11y-scale-menu: 1.20; }


/* ---------------------------------------------------------------------------
   Section 2 — BASE BODY PIN
   --------------------------------------------------------------------------
   Overrides the plugin's `body { font-size: NN% !important }`. This
   contains every unclassed inheriting element to our scale curve instead
   of the plugin's harsher curve. Not scoped: the accessibility toolbar
   has its own `#pojo-a11y-toolbar { font-size: 16px !important }` pin
   inside the plugin CSS, so this line does not reach it.
   --------------------------------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] {
    font-size: calc(16px * var(--a11y-scale)) !important;
}


/* ---------------------------------------------------------------------------
   Section 3 — Kill plugin's compounding % inside the main content wrappers
   --------------------------------------------------------------------------
   The plugin sets p, li, span, label { font-size: 200% !important } and
   h_ span { font-size: 266% !important } which multiply on top of scaled
   parents. Force these to `inherit` so they take the scaled cascade
   exactly once. Scoped to the actual content sections — NOT the toolbar,
   NOT the cookie banner (that gets its own explicit pins in 4c).
   --------------------------------------------------------------------------- */
body[class*="pojo-a11y-resize-font-"] :is(.header-wrap-inner, #hero, #eligibility, #who-we-are, #middle-form, #how-does-work, #saying, #footer) p,
body[class*="pojo-a11y-resize-font-"] :is(.header-wrap-inner, #hero, #eligibility, #who-we-are, #middle-form, #how-does-work, #saying, #footer) li,
body[class*="pojo-a11y-resize-font-"] :is(.header-wrap-inner, #hero, #eligibility, #who-we-are, #middle-form, #how-does-work, #saying, #footer) span,
body[class*="pojo-a11y-resize-font-"] :is(.header-wrap-inner, #hero, #eligibility, #who-we-are, #middle-form, #how-does-work, #saying, #footer) label,
body[class*="pojo-a11y-resize-font-"] :is(.header-wrap-inner, #hero, #eligibility, #who-we-are, #middle-form, #how-does-work, #saying, #footer) blockquote,
body[class*="pojo-a11y-resize-font-"] :is(.header-wrap-inner, #hero, #eligibility, #who-we-are, #middle-form, #how-does-work, #saying, #footer) dd,
body[class*="pojo-a11y-resize-font-"] :is(.header-wrap-inner, #hero, #eligibility, #who-we-are, #middle-form, #how-does-work, #saying, #footer) dt {
    font-size: inherit !important;
}


/* ---------------------------------------------------------------------------
   Section 4 — FORM CONTROLS + validation/response messages
   --------------------------------------------------------------------------
   Explicit px * scale-form pins so CF7's <p><span class="wpcf7-form-control-wrap">
   wrappers can NEVER compound the size (measured runaway without this:
   input[type=text] at step 200 = 512 px). Line-heights included where
   the theme is silent or uses non-scaling units.
   --------------------------------------------------------------------------- */

/* Text/select inputs — theme size 16 px at every breakpoint */
body[class*="pojo-a11y-resize-font-"] .form-steps-sty li input,
body[class*="pojo-a11y-resize-font-"] .form-steps-sty li select,
body[class*="pojo-a11y-resize-font-"] .form-steps-sty li select option,
body[class*="pojo-a11y-resize-font-"] .form-middle-wrp input,
body[class*="pojo-a11y-resize-font-"] #middle-form input[type="text"],
body[class*="pojo-a11y-resize-font-"] #middle-form input[type="email"],
body[class*="pojo-a11y-resize-font-"] #middle-form input[type="tel"] {
    font-size: calc(16px * var(--a11y-scale-form)) !important;
    line-height: 1.5 !important;
}

/* Field label — theme 18 px desktop, 16 px mobile */
body[class*="pojo-a11y-resize-font-"] .form-steps-sty li label {
    font-size: calc(18px * var(--a11y-scale-form)) !important;
    line-height: 1.4 !important;
}

/* Eligibility next/prev/submit — theme 18 px */
body[class*="pojo-a11y-resize-font-"] .next-prev-eligi button,
body[class*="pojo-a11y-resize-font-"] .cf7mls_back,
body[class*="pojo-a11y-resize-font-"] .cf7mls_next,
body[class*="pojo-a11y-resize-font-"] .ads_next_cf7,
body[class*="pojo-a11y-resize-font-"] #eligibility .wpcf7-submit {
    font-size: calc(18px * var(--a11y-scale-form)) !important;
    line-height: 1.4 !important;
}

/* Middle-form submit — theme 24 px */
body[class*="pojo-a11y-resize-font-"] .form-middle-wrp input[type="submit"] {
    font-size: calc(24px * var(--a11y-scale-form)) !important;
    line-height: 1.4 !important;
}

/* Footer form inputs — theme 21 px */
body[class*="pojo-a11y-resize-font-"] .footer-form-wrp input {
    font-size: calc(21px * var(--a11y-scale-form)) !important;
    line-height: 1.4 !important;
}
body[class*="pojo-a11y-resize-font-"] .footer-form-wrp input::placeholder {
    font-size: calc(21px * var(--a11y-scale-form)) !important;
}
/* Footer submit — theme 31 px */
body[class*="pojo-a11y-resize-font-"] .footer-form-submit input {
    font-size: calc(31px * var(--a11y-scale-form)) !important;
    line-height: 1.4 !important;
}

/* CF7 response output — theme had no explicit size, div inherits body;
   pin explicitly with unitless line-height so lines don't crowd. */
body[class*="pojo-a11y-resize-font-"] .wpcf7-response-output {
    font-size: calc(16px * var(--a11y-scale-form)) !important;
    line-height: 1.5 !important;
}

/* CF7 per-field validation tip — pin + unitless line-height */
body[class*="pojo-a11y-resize-font-"] .wpcf7-not-valid-tip {
    font-size: calc(14px * var(--a11y-scale-form)) !important;
    line-height: 1.5 !important;
}


/* ---------------------------------------------------------------------------
   Section 4b — Spans that carry an intentional size of their own
   --------------------------------------------------------------------------
   Section 3 flattens all spans inside main content to `inherit`. These
   ones have an explicit theme size that must survive; re-declare with
   scale so they still grow.
   --------------------------------------------------------------------------- */

/* Banner box currency-in-heading spans — theme 28 px */
body[class*="pojo-a11y-resize-font-"] .banner-box h2 span,
body[class*="pojo-a11y-resize-font-"] .banner-box h2:before {
    font-size: calc(28px * var(--a11y-scale)) !important;
}

/* Eligibility step-number circles — 20 default, 34 when active (desktop);
   22 when active on mobile */
body[class*="pojo-a11y-resize-font-"] .eligibility-form ul li a span {
    font-size: calc(20px * var(--a11y-scale)) !important;
}
body[class*="pojo-a11y-resize-font-"] .eligibility-form ul li a.active span {
    font-size: calc(34px * var(--a11y-scale)) !important;
}
@media (max-width: 767px) {
    body[class*="pojo-a11y-resize-font-"] .eligibility-form ul li a.active span {
        font-size: calc(22px * var(--a11y-scale)) !important;
    }
}


/* ---------------------------------------------------------------------------
   Section 4c — Cookie banner (#cc-banner-root)
   --------------------------------------------------------------------------
   The banner sits OUTSIDE the main content wrappers so Section 3's
   inherit-flatten does not reach it. Without pinning: .cc-body runs from
   14 -> 28 px, .cc-title from 16 -> 37 px, .cc-btn is `font-size: inherit`
   in the banner's own stylesheet so it stays frozen at 14 px.

   Every pin uses calc(<px> * var(--a11y-scale…)) — a fixed pixel value
   would stop the runaway but also freeze the banner entirely. Gated by
   the resize-class attribute selector so at default the banner renders
   at its original theme sizes.
   --------------------------------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] .cc-root           { font-size: calc(14px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .cc-title          { font-size: calc(18px * var(--a11y-scale-form)) !important; line-height: 1.3 !important; }
html body[class*="pojo-a11y-resize-font-"] .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            { font-size: calc(15px * var(--a11y-scale-form)) !important; line-height: 1.4 !important; }
html body[class*="pojo-a11y-resize-font-"] .cc-btn.cc-btn-text{ font-size: calc(14px * var(--a11y-scale-form)) !important; line-height: 1.4 !important; }
html body[class*="pojo-a11y-resize-font-"] .cc-lang-toggle    { font-size: calc(12px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .cc-modal-head h2  { font-size: calc(18px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .cc-modal-close    { font-size: calc(24px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .cc-cat-desc       { font-size: calc(13px * var(--a11y-scale)) !important; }
html body[class*="pojo-a11y-resize-font-"] .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-"] .cc-cookies-list th,
html body[class*="pojo-a11y-resize-font-"] .cc-cookies-list td { font-size: calc(12px * var(--a11y-scale)) !important; }


/* ---------------------------------------------------------------------------
   Section 5 — Per-element heading/paragraph rules
   --------------------------------------------------------------------------
   Every font-size rule from style.css and responsive.css re-emitted with
   calc(<theme_value> * var(--a11y-scale)) !important. Emitted at each
   breakpoint the theme itself uses so mobile/tablet stay in step with
   design. Order: base (>=1551 px) then descending max-width media queries.
   --------------------------------------------------------------------------- */

/* ---------- Base (>= 1551 px) ---------- */

/* Header / nav */
body[class*="pojo-a11y-resize-font-"] .main-menu ul li a { font-size: calc(18px * var(--a11y-scale)) !important; }
body[class*="pojo-a11y-resize-font-"] .left-button a     { font-size: calc(14px * var(--a11y-scale)) !important; }

/* Hero */
body[class*="pojo-a11y-resize-font-"] .top-banner-text h1 { font-size: calc(62px * var(--a11y-scale)) !important; line-height: 1.1 !important; }
body[class*="pojo-a11y-resize-font-"] .top-banner-text h2 { font-size: calc(71px * var(--a11y-scale)) !important; line-height: 1.05 !important; }
body[class*="pojo-a11y-resize-font-"] .top-banner-text p  { font-size: calc(25.9px * var(--a11y-scale)) !important; line-height: 1.4 !important; }
body[class*="pojo-a11y-resize-font-"] .banner-box h2      { font-size: calc(32px * var(--a11y-scale)) !important; line-height: 1.15 !important; }
body[class*="pojo-a11y-resize-font-"] .banner-box p       { font-size: calc(14px * var(--a11y-scale)) !important; }
body[class*="pojo-a11y-resize-font-"] .hero-button        { font-size: calc(24px * var(--a11y-scale-form)) !important; line-height: 1.4 !important; }
body[class*="pojo-a11y-resize-font-"] .toggle-sound-btn   { font-size: calc(18px * var(--a11y-scale)) !important; }

/* Eligibility */
body[class*="pojo-a11y-resize-font-"] .eligibility-head h2,
body[class*="pojo-a11y-resize-font-"] .eligibility-head h3 { font-size: calc(42px * var(--a11y-scale)) !important; line-height: 1.2 !important; }
body[class*="pojo-a11y-resize-font-"] .eligibility-head p  { font-size: calc(20px * var(--a11y-scale)) !important; line-height: 1.5 !important; }
body[class*="pojo-a11y-resize-font-"] .eligibility-form ul li a p { font-size: calc(14px * var(--a11y-scale)) !important; }

/* Who we are */
body[class*="pojo-a11y-resize-font-"] .who-we-are-head h2 { font-size: calc(42px * var(--a11y-scale)) !important; line-height: 1.2 !important; }
body[class*="pojo-a11y-resize-font-"] .who-we-are-head p  { font-size: calc(20px * var(--a11y-scale)) !important; line-height: 1.5 !important; }
body[class*="pojo-a11y-resize-font-"] .service-box p      { font-size: calc(17px * var(--a11y-scale)) !important; line-height: 1.5 !important; }

/* Middle form */
body[class*="pojo-a11y-resize-font-"] .middle-form-head h2 { font-size: calc(39px * var(--a11y-scale)) !important; line-height: 1.1 !important; }
body[class*="pojo-a11y-resize-font-"] .middle-form-head p  { font-size: calc(26px * var(--a11y-scale)) !important; line-height: 1.15 !important; }

/* How does it work */
body[class*="pojo-a11y-resize-font-"] .how-work-head h2      { font-size: calc(42px * var(--a11y-scale)) !important; line-height: 1.2 !important; }
body[class*="pojo-a11y-resize-font-"] .how-does-work-stpe h2 { font-size: calc(26px * var(--a11y-scale)) !important; line-height: 1.2 !important; }
body[class*="pojo-a11y-resize-font-"] .how-does-work-stpe p  { font-size: calc(20px * var(--a11y-scale)) !important; line-height: 1.5 !important; }
body[class*="pojo-a11y-resize-font-"] .how-does-work-stpe a  { font-size: calc(20px * var(--a11y-scale)) !important; line-height: 1.5 !important; }
body[class*="pojo-a11y-resize-font-"] .how-stp-cont          { font-size: calc(35px * var(--a11y-scale)) !important; line-height: 1.4 !important; }

/* Saying */
body[class*="pojo-a11y-resize-font-"] .saying-head h2   { font-size: calc(42px * var(--a11y-scale)) !important; line-height: 1.2 !important; }
body[class*="pojo-a11y-resize-font-"] .saying-box p     { font-size: calc(16px * var(--a11y-scale)) !important; line-height: 1.5 !important; }
body[class*="pojo-a11y-resize-font-"] .saying-box .author { font-size: calc(20px * var(--a11y-scale)) !important; }

/* Footer */
body[class*="pojo-a11y-resize-font-"] .footer-right-content h2      { font-size: calc(24px * var(--a11y-scale)) !important; line-height: 1.2 !important; }
body[class*="pojo-a11y-resize-font-"] .footer-right-content ul li p { font-size: calc(17px * var(--a11y-scale)) !important; line-height: 1.5 !important; }
body[class*="pojo-a11y-resize-font-"] .footer-fprm-head h2          { font-size: calc(36px * var(--a11y-scale)) !important; line-height: 1.2 !important; }
body[class*="pojo-a11y-resize-font-"] .footer-fprm-head p           { font-size: calc(26px * var(--a11y-scale)) !important; line-height: 1.4 !important; }
body[class*="pojo-a11y-resize-font-"] .footer-sticky-btn a          { font-size: calc(16px * var(--a11y-scale)) !important; }


/* ---------- @media (max-width: 1550px) — desktop below 1550 ---------- */
@media (max-width: 1550px) {
    body[class*="pojo-a11y-resize-font-"] .top-banner-text h1 { font-size: calc(65px * var(--a11y-scale)) !important; }
    body[class*="pojo-a11y-resize-font-"] .top-banner-text h2 { font-size: calc(67px * var(--a11y-scale)) !important; }
    body[class*="pojo-a11y-resize-font-"] .top-banner-text p  { font-size: calc(24.13px * var(--a11y-scale)) !important; }
    body[class*="pojo-a11y-resize-font-"] .banner-box h2      { font-size: calc(32px * var(--a11y-scale)) !important; }
}


/* ---------- @media (min-width: 768px) and (max-width: 1200px) ---------- */
@media (min-width: 768px) and (max-width: 1200px) {
    body[class*="pojo-a11y-resize-font-"] .banner-box h2 { font-size: calc(28px * var(--a11y-scale)) !important; line-height: 1.1 !important; }
}


/* ---------- @media (max-width: 767px) — main mobile ---------- */
@media (max-width: 767px) {
    body[class*="pojo-a11y-resize-font-"] .top-banner-text h1 { font-size: calc(48px * var(--a11y-scale)) !important; }
    body[class*="pojo-a11y-resize-font-"] .top-banner-text h2 { font-size: calc(51px * var(--a11y-scale)) !important; }
    body[class*="pojo-a11y-resize-font-"] .top-banner-text p  { font-size: calc(18px * var(--a11y-scale)) !important; }
    body[class*="pojo-a11y-resize-font-"] .banner-box h2      { font-size: calc(24px * var(--a11y-scale)) !important; }
    body[class*="pojo-a11y-resize-font-"] .banner-box p       { font-size: calc(16px * var(--a11y-scale)) !important; }
    body[class*="pojo-a11y-resize-font-"] .banner-box h2:before,
    body[class*="pojo-a11y-resize-font-"] .banner-box h2 span { font-size: calc(22px * var(--a11y-scale)) !important; }

    body[class*="pojo-a11y-resize-font-"] .eligibility-head h2,
    body[class*="pojo-a11y-resize-font-"] .eligibility-head h3 { font-size: calc(36px * var(--a11y-scale)) !important; }
    body[class*="pojo-a11y-resize-font-"] .eligibility-head p  { font-size: calc(18px * var(--a11y-scale)) !important; }

    body[class*="pojo-a11y-resize-font-"] .form-steps-sty li label { font-size: calc(16px * var(--a11y-scale-form)) !important; }

    body[class*="pojo-a11y-resize-font-"] .who-we-are-head p  { font-size: calc(18px * var(--a11y-scale)) !important; }

    body[class*="pojo-a11y-resize-font-"] .middle-form-head p { font-size: calc(24px * var(--a11y-scale)) !important; }

    body[class*="pojo-a11y-resize-font-"] .how-does-work-stpe h2 { font-size: calc(22px * var(--a11y-scale)) !important; }
    body[class*="pojo-a11y-resize-font-"] .how-does-work-stpe p  { font-size: calc(17px * var(--a11y-scale)) !important; }

    body[class*="pojo-a11y-resize-font-"] .saying-head h2 { font-size: calc(36px * var(--a11y-scale)) !important; }

    body[class*="pojo-a11y-resize-font-"] .footer-fprm-head h2 { font-size: calc(34px * var(--a11y-scale)) !important; }
    body[class*="pojo-a11y-resize-font-"] .footer-fprm-head p  { font-size: calc(20px * var(--a11y-scale)) !important; }

    body[class*="pojo-a11y-resize-font-"] .next-prev-eligi button { font-size: calc(16px * var(--a11y-scale-form)) !important; }
}


/* ---------- @media (max-width: 400px) — small mobile ---------- */
@media (max-width: 400px) {
    body[class*="pojo-a11y-resize-font-"] .top-banner-text h1 { font-size: calc(43px * var(--a11y-scale)) !important; }
    body[class*="pojo-a11y-resize-font-"] .top-banner-text h2 { font-size: calc(46px * var(--a11y-scale)) !important; }
    body[class*="pojo-a11y-resize-font-"] .banner-box h2      { font-size: calc(24px * var(--a11y-scale)) !important; }
    body[class*="pojo-a11y-resize-font-"] .banner-box p       { font-size: calc(15px * var(--a11y-scale)) !important; }
    body[class*="pojo-a11y-resize-font-"] .eligibility-head h2,
    body[class*="pojo-a11y-resize-font-"] .eligibility-head h3 { font-size: calc(40px * var(--a11y-scale)) !important; }
    body[class*="pojo-a11y-resize-font-"] .middle-form-head h2 { font-size: calc(36px * var(--a11y-scale)) !important; }
}


/* ---------- @media (max-width: 370px) — tiny mobile ---------- */
@media (max-width: 370px) {
    body[class*="pojo-a11y-resize-font-"] .top-banner-text h2 { font-size: calc(48px * var(--a11y-scale)) !important; }
    body[class*="pojo-a11y-resize-font-"] .middle-form-head p { font-size: calc(20px * var(--a11y-scale)) !important; }
}


/* ---------------------------------------------------------------------------
   Section 6 — Safety nets
   --------------------------------------------------------------------------
   Prevent horizontal overflow at max scale on mobile (long Hebrew words +
   inflated font can push layout wider than viewport).
   --------------------------------------------------------------------------- */
body[class*="pojo-a11y-resize-font-"] {
    overflow-x: hidden;
}
body[class*="pojo-a11y-resize-font-"] :is(#hero, #eligibility, #who-we-are, #middle-form, #how-does-work, #saying, #footer) {
    max-width: 100%;
}


/* ---------------------------------------------------------------------------
   Section 7 — Layout robustness under scale
   --------------------------------------------------------------------------
   Fixes for the design breaks that appear when text is scaled: header
   button wrapping, form input misalignment when labels wrap, how-it-works
   cards overflowing their fixed 160px height, button-arrow icons drifting
   out of centre when the button grows, hero heading spilling into the
   video area. All gated behind the resize class so at default nothing
   changes.
   --------------------------------------------------------------------------- */

/* 7a — Hero heading gentler growth curve.
   Straight scale-1.60 on 65px h1 = 104px which forces 3+ lines and pushes
   the text into the video overlay (screenshot 1). A gentler curve keeps
   the hero balanced with the columns beside it. */
html body[class*="pojo-a11y-resize-font-"] .top-banner-text h1,
html body[class*="pojo-a11y-resize-font-"] .top-banner-text h2 {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    line-height: 1.1 !important;
}
html body[class*="pojo-a11y-resize-font-"] .top-banner-text h1 { font-size: calc(62px * var(--a11y-scale-hero)) !important; }
html body[class*="pojo-a11y-resize-font-"] .top-banner-text h2 { font-size: calc(71px * var(--a11y-scale-hero)) !important; }
@media (max-width: 1550px) {
    html body[class*="pojo-a11y-resize-font-"] .top-banner-text h1 { font-size: calc(65px * var(--a11y-scale-hero)) !important; }
    html body[class*="pojo-a11y-resize-font-"] .top-banner-text h2 { font-size: calc(67px * var(--a11y-scale-hero)) !important; }
}
@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"] .top-banner-text h1 { font-size: calc(48px * var(--a11y-scale-hero)) !important; }
    html body[class*="pojo-a11y-resize-font-"] .top-banner-text h2 { font-size: calc(51px * var(--a11y-scale-hero)) !important; }
}
@media (max-width: 400px) {
    html body[class*="pojo-a11y-resize-font-"] .top-banner-text h1 { font-size: calc(43px * var(--a11y-scale-hero)) !important; }
    html body[class*="pojo-a11y-resize-font-"] .top-banner-text h2 { font-size: calc(46px * var(--a11y-scale-hero)) !important; }
}


/* 7b — Header "לבדיקת זכאות מהירה" sticky button.
   The theme puts this in a fixed-width Bootstrap col-md-2. At scale the
   text overflows to two lines and the SVG arrow icon lands mid-height.
   Force one line, let the anchor size to content, keep the icon inline. */
body[class*="pojo-a11y-resize-font-"] .left-button {
    display: flex;
    justify-content: flex-end;
}
body[class*="pojo-a11y-resize-font-"] .left-button a {
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px;
    width: max-content;
}
body[class*="pojo-a11y-resize-font-"] .left-button a img {
    flex-shrink: 0;
    margin-right: 0 !important;
    margin-left: 0 !important;
}


/* 7c — Eligibility step-1 field row.
   Labels wrap to different line counts, so inputs land at different
   heights (screenshot 2). Aligning items to the bottom of the flex row
   pins every input to the same baseline regardless of label height. */
body[class*="pojo-a11y-resize-font-"] .form-steps-sty {
    align-items: flex-end !important;
}
body[class*="pojo-a11y-resize-font-"] .form-steps-sty li {
    justify-content: flex-end;
}
body[class*="pojo-a11y-resize-font-"] .form-steps-sty li label {
    margin-bottom: 12px !important;
    min-height: 2em;
}


/* 7d — Eligibility "הבא" (next) / "הקודם" (back) buttons keep their
   arrow icon centred when the button gets taller. Theme pins the arrow
   with a fixed top: 10px which drifts up as the button grows. */
body[class*="pojo-a11y-resize-font-"] .cf7mls_next:before,
body[class*="pojo-a11y-resize-font-"] .ads_next_cf7:before {
    top: 50% !important;
    transform: translateY(-50%);
}
body[class*="pojo-a11y-resize-font-"] .cf7mls_back:before {
    top: 50% !important;
    transform: translateY(-50%) scaleX(-1);
}
body[class*="pojo-a11y-resize-font-"] .next-prev-eligi .prev-eligibilty:disabled:before {
    top: 50% !important;
    transform: translateY(-50%);
}
body[class*="pojo-a11y-resize-font-"] .next-prev-eligi .next-eligibilty:disabled:after {
    top: 50% !important;
    transform: translateY(-50%) scaleX(-1);
}
/* Middle-form + footer submit arrow — theme has top:11px / top:17px
   fixed, drift out of centre at scale (screenshot 3). */
body[class*="pojo-a11y-resize-font-"] .form-submit:after,
body[class*="pojo-a11y-resize-font-"] .footer-form-submit:after {
    top: 50% !important;
    transform: translateY(-50%);
}


/* 7e — Submit / next / back buttons should always fit their label
   comfortably at scale. Give them auto height + a real inline-flex row so
   text + icon stay level. */
body[class*="pojo-a11y-resize-font-"] .next-prev-eligi button,
body[class*="pojo-a11y-resize-font-"] .cf7mls_back,
body[class*="pojo-a11y-resize-font-"] .cf7mls_next,
body[class*="pojo-a11y-resize-font-"] .ads_next_cf7,
body[class*="pojo-a11y-resize-font-"] #eligibility .wpcf7-submit,
body[class*="pojo-a11y-resize-font-"] .form-middle-wrp input[type="submit"],
body[class*="pojo-a11y-resize-font-"] .footer-form-submit input,
body[class*="pojo-a11y-resize-font-"] .hero-button {
    height: auto !important;
    min-height: auto !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    white-space: nowrap;
}


/* 7f — "איך זה עובד" cards.
   Theme pins .how-does-work-stpe to a fixed 160px height. Once the
   paragraph text scales, content spills out (screenshot 4). Convert to
   content-driven height with 160px as a floor so short cards keep their
   original shape. */
body[class*="pojo-a11y-resize-font-"] .how-does-work-stpe {
    height: auto !important;
    min-height: 160px;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
}
/* The vertical connector line between cards uses a fixed 212px png
   background; at scale it lands weirdly. Drop it in a11y mode. */
body[class*="pojo-a11y-resize-font-"] .how-work-steps .how-does-work-stpe span:after {
    display: none !important;
}


/* 7g — Banner boxes (3 pill cards under the hero heading).
   Allow them to wrap and grow instead of overflowing horizontally at max
   scale. */
body[class*="pojo-a11y-resize-font-"] .banner-boxes-wrap {
    flex-wrap: wrap !important;
    row-gap: 8px;
    align-items: stretch;
}
body[class*="pojo-a11y-resize-font-"] .banner-box {
    min-width: 30%;
}


/* 7h — Testimonials + service boxes: give them room to grow.
   .saying-box has min-height:510px, .service-box has min-height:292px —
   both freeze the card. Convert to content-driven with the original as a
   floor. */
body[class*="pojo-a11y-resize-font-"] .saying-box {
    height: auto !important;
    min-height: 510px;
    padding: 16px !important;
}
body[class*="pojo-a11y-resize-font-"] .service-box {
    height: auto !important;
    min-height: 292px;
    padding: 20px !important;
}


/* 7i — Eligibility form step tabs.
   The step-number circles inside .eligibility-form ul li a span have
   fixed 60x60 size and absolute pseudo bg. When the number inside grows,
   digits still fit because we pin the span font. Just make sure the
   circle grows proportionally so digits don't clip. */
body[class*="pojo-a11y-resize-font-"] .eligibility-form ul li a span {
    line-height: 1 !important;
}


/* 7j — Footer sticky button: stay compact + inline. */
body[class*="pojo-a11y-resize-font-"] .footer-sticky-btn a {
    display: inline-flex;
    align-items: center;
}


/* 7k — Mobile-specific tweaks.
   Below 767px the hero, form and cards use their smaller theme sizes.
   Reinforce content-fit and prevent inputs / submit buttons from becoming
   wider than the viewport at max scale. */
@media (max-width: 767px) {
    body[class*="pojo-a11y-resize-font-"] .top-banner-text h1,
    body[class*="pojo-a11y-resize-font-"] .top-banner-text h2 {
        text-align: center;
    }
    body[class*="pojo-a11y-resize-font-"] .banner-box {
        min-width: 45%;
    }
    body[class*="pojo-a11y-resize-font-"] .form-steps-sty {
        align-items: stretch !important;
    }
    body[class*="pojo-a11y-resize-font-"] .footer-form-wrp input,
    body[class*="pojo-a11y-resize-font-"] .footer-form-submit input,
    body[class*="pojo-a11y-resize-font-"] .form-middle-wrp input,
    body[class*="pojo-a11y-resize-font-"] .form-middle-wrp input[type="submit"] {
        max-width: 100%;
        box-sizing: border-box;
    }
    body[class*="pojo-a11y-resize-font-"] .how-does-work-stpe {
        min-height: auto;
    }
}


/* ---------------------------------------------------------------------------
   Section 8 — Second-pass layout fixes
   --------------------------------------------------------------------------
   Issues reported after the first round: header menu collapses against the
   sticky button, service-box (diamond) text overflows its background,
   how-does-work numbered badge overlaps text on mobile, banner-box text
   overflows on narrow phones, footer sticky button peeks out too far.
   --------------------------------------------------------------------------- */

/* 8a — Main menu items use the calmer --a11y-scale-menu curve so all 5
   items still fit inside col-md-8 at max scale. Same for the header
   sticky button on the far left. */
html body[class*="pojo-a11y-resize-font-"] .main-menu ul li a {
    font-size: calc(18px * var(--a11y-scale-menu)) !important;
}
html body[class*="pojo-a11y-resize-font-"] .left-button a {
    font-size: calc(14px * var(--a11y-scale-menu)) !important;
}

/* 8b — Space between menu items and between menu and the sticky button.
   Do NOT add gap on the .row itself — Bootstrap's total column widths
   already sum to ~100%, so any row-level column-gap pushes the last col
   to the next line (button dropped below the logo). Instead:
     - keep the theme's `justify-content: space-around` on .main-menu ul
       and add a small `gap` for a guaranteed minimum between items
     - add `padding-left` on the menu wrap so the leftmost menu item
       (right-most in RTL flow terms is start; padding-left is the LTR
       side facing the button col) never sits flush against the button */
body[class*="pojo-a11y-resize-font-"] .main-menu ul {
    gap: 12px;
}
body[class*="pojo-a11y-resize-font-"] .main-menu-wrap {
    padding-left: 20px;
}


/* 8c — Service box (diamond).
   The theme uses a fixed-size PNG background for the diamond shape which
   does NOT grow with content. At scale the paragraph runs outside the
   diamond (screenshot 2). Stretch the background to fill the container,
   remove the max-width cap, let the box grow. */
html body[class*="pojo-a11y-resize-font-"] .service-box {
    background-size: 100% 100% !important;
    background-position: center !important;
    max-width: 100% !important;
    min-height: 292px;
    height: auto !important;
    padding: 36px 24px !important;
    box-sizing: border-box;
}
html body[class*="pojo-a11y-resize-font-"] .service-box p {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}


/* 8d — How-does-work numbered badge (mobile) — see Section 9a.
   The percentage-based `top` this block used to set is the bug fixed
   there; nothing is declared here any more. */


/* 8e — Banner-box text overflow on mobile.
   At max scale h2 grows to ~38px; two-column layout leaves each box only
   ~45vw wide, and "1,000,000₪" runs outside. Stack the boxes to a single
   column on mobile when a11y is active so each box gets the full width. */
@media (max-width: 767px) {
    body[class*="pojo-a11y-resize-font-"] .banner-box {
        min-width: 100% !important;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    body[class*="pojo-a11y-resize-font-"] .banner-box h2,
    body[class*="pojo-a11y-resize-font-"] .banner-box p,
    body[class*="pojo-a11y-resize-font-"] .banner-box span {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }
    /* Sticky button off-screen offset is handled in Section 9c — it has to
       track the pill's own width, which a viewport unit cannot do. */
}


/* 8f — Footer sticky button label growth.
   At default the label "לבדיקת זכאות לעסק שלך" reads at 16px inside a
   compact pill. With the wider --a11y-scale (up to 1.60x = 25.6px) the
   pill grows past ~250px wide and the label sticks out past the visible
   button edge (screenshot 4). Downgrade this label to the calmer
   --a11y-scale-menu curve so it never gets big enough to overflow. */
html body[class*="pojo-a11y-resize-font-"] .footer-sticky-btn a,
html body[class*="pojo-a11y-resize-font-"] .footer-sticky-btn a span {
    font-size: calc(16px * var(--a11y-scale-menu)) !important;
    white-space: nowrap;
}
body[class*="pojo-a11y-resize-font-"] .footer-sticky-btn {
    max-width: 90vw;
}


/* 8g — Testimonial slider carousel (Slick) height fluidity.
   Slick sets track height dynamically from the tallest slide; make sure
   the slide itself grows so Slick reads a taller box. */
body[class*="pojo-a11y-resize-font-"] .sayings-wrap .slick-slide {
    height: auto;
}
body[class*="pojo-a11y-resize-font-"] .sayings-wrap .slick-track {
    display: flex;
    align-items: stretch;
}


/* 8h — Mobile hero: gap between video and heading.
   Two issues combine here:
   1. The theme's .banner-content uses `min-height: 615px; align-items:
      flex-end;` so content is pinned to the bottom of a 615 px block.
   2. .top-banner-text has data-aos="fade-down" whose CSS keeps a
      `transform: translate3d(0, -100px, 0)` slide-in offset — that
      pulls the heading UP into the 220px-tall video area at rest.
   Fix: top-align the row and give it a padding-top that clears the
   video, PLUS neutralise the fade-down transform on the heading so
   the padding actually shows as visible gap. */
@media (max-width: 767px) {
    body[class*="pojo-a11y-resize-font-"] .banner-content {
        align-items: flex-start !important;
        padding-top: 240px !important;
        min-height: auto !important;
        padding-bottom: 24px !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .top-banner-text {
        margin-top: 0 !important;
    }
    /* Beat AOS `[data-aos^=fade][data-aos^=fade].aos-animate` (spec 0,3,0)
       by chaining another class — .aos-init or .aos-animate — giving
       spec (0,3,2) so `transform: none` reliably wins over the fade
       animation transforms that leave the heading offset by -100px. */
    html body[class*="pojo-a11y-resize-font-"] .top-banner-text.aos-init,
    html body[class*="pojo-a11y-resize-font-"] .top-banner-text.aos-animate {
        transform: none !important;
    }
}


/* ---------------------------------------------------------------------------
   Section 9 — Third-pass mobile fixes
   --------------------------------------------------------------------------
   Everything below is inside @media (max-width: 767px) and gated behind the
   resize class, so the desktop layout and the default mobile design are
   untouched.
   --------------------------------------------------------------------------- */

/* Badge size travels on the calm menu curve: 85px -> 102px at step 200.
   Declared on the body so both the badge and the card padding that has to
   clear it can read the same number. */
body[class*="pojo-a11y-resize-font-"] {
    --a11y-badge: calc(85px * var(--a11y-scale-menu));
}


/* 9a — How-does-work numbered badge (mobile). Replaces the old 8d.
   responsive.css positions .how-stp-cont with a PERCENTAGE top (-15%), and a
   percentage top resolves against the card's height. As the scaled text makes
   the card taller the badge is pushed proportionally further up, until at
   step 200 it has left the card altogether and collides with the
   "איך זה עובד?" heading (measured: badge sat 104px above the card top, and
   overlapped the heading by 85x56px).

   Fix: anchor it with a pixel offset of exactly half its own height. That
   reproduces the default design — badge straddling the card's top edge,
   measured at -42/+43 with no resize class — at every single step, because
   the offset no longer depends on how tall the card is. */
@media (max-width: 767px) {
    /* Box and digit grow together, centred on the card's top edge.
       `html … #how-does-work …` outranks Section 3's `span {font-size:
       inherit}` flatten, which was otherwise shrinking the step number to
       body size (25.6px at step 200 — smaller than the 35px it shows with
       the toolbar off). */
    html body[class*="pojo-a11y-resize-font-"] #how-does-work .how-stp-cont {
        width: var(--a11y-badge) !important;
        height: var(--a11y-badge) !important;
        font-size: calc(35px * var(--a11y-scale-menu)) !important;
        line-height: 1 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 0 !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
        background-position: center !important;
        top: calc(var(--a11y-badge) / -2) !important;
        right: calc(50% - (var(--a11y-badge) / 2)) !important;
    }
    /* Card top padding clears the half of the badge that hangs inside it. */
    body[class*="pojo-a11y-resize-font-"] .how-does-work-stpe {
        padding-top: calc((var(--a11y-badge) / 2) + 24px) !important;
        padding-bottom: 24px !important;
    }
    /* Cards 2-4 sit under the previous card's 80px bottom margin, but the
       first one has only the section heading's 48px — give it room for the
       half badge that hangs outside the card. */
    body[class*="pojo-a11y-resize-font-"] .how-work-steps .how-does-work-stpe:first-child {
        margin-top: calc((var(--a11y-badge) / 2) + 16px) !important;
    }
}


/* 9b — Hero CTA "לבדיקת זכאות חינם" overflowing the viewport.
   It reads the --a11y-scale-form curve (24px -> 42px) and 7e pins it to
   `white-space: nowrap`, which on a 390px phone made it 414px wide — wider
   than the screen. Move it to the gentler hero curve on mobile and allow a
   wrap, so it can never outgrow its column whatever the label says. */
@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"] .hero-button {
        font-size: calc(24px * var(--a11y-scale-hero)) !important;
        white-space: normal !important;
        max-width: 100% !important;
        text-align: center;
    }
}


/* 9c — Footer sticky button: keep a constant grab area on screen.
   The theme parks the pill at a fixed `right: -189px`, sized for the label
   at 16px. Once the label scales the pill gets wider and the fixed offset
   no longer describes how much of it is left on screen. Anchor it at
   `right: 0` and push it out by its OWN width instead, minus the strip that
   must stay tappable — that strip is then 56px at every step and for any
   label length. `transform` is covered by the theme's `transition: all .5s`,
   so it slides exactly as before. */
@media (max-width: 767px) {
    body[class*="pojo-a11y-resize-font-"] .footer-sticky-btn {
        right: 0 !important;
        transform: translateX(calc(100% - 45px));
    }
    body[class*="pojo-a11y-resize-font-"] .footer-sticky-btn.focused {
        transform: none;
    }
}


/* 9d — Eligibility step buttons "הקודם" / "הבא": label runs under the arrow.
   The arrow is an absolutely positioned pseudo-element pinned a fixed 13px
   from the button edge, so it occupies 13->36px of that edge. The label is a
   normal flex/inline child with only the 20px side padding between them, so
   nothing actually reserves the arrow's strip — the two clear each other at
   rest purely because `min-width: 125px` leaves slack around a short word.

   Scale the text and that slack is eaten: "הקודם" (49px at rest) reaches the
   arrow at step 150 and overlaps it by 16px at step 200. "הבא" is shorter so
   it survives to step 200 with 11px to spare, but on the same borrowed slack.

   Fix: reserve the arrow's strip as real padding on the side it sits — 36px
   for the arrow plus 8px of breathing room. The button then grows to fit its
   label instead of letting it slide underneath. The arrow image is a fixed
   23px at every step, so a fixed 44px covers the whole range. Side padding
   only — 7e's vertical padding and 7d's arrow centring are untouched.

   Not scoped to mobile: these buttons keep their base sizing at every
   breakpoint (responsive.css's overrides target `.next-prev-eligi button`,
   which this markup does not use), so the collision is identical on desktop. */
body[class*="pojo-a11y-resize-font-"] .cf7mls_back {
    padding-right: 32px !important;
}
body[class*="pojo-a11y-resize-font-"] .cf7mls_next,
body[class*="pojo-a11y-resize-font-"] .ads_next_cf7 {
    padding-left: 32px !important;
}


/* 9e — Header "לבדיקת זכאות מהירה" button inside the open mobile menu.
   Two things went wrong here.

   1. responsive.css hides this button on mobile with
      `.left-button .site-btn { display: none }`, but 7b above re-declares
      `display: inline-flex !important` at every width. 7b was written for the
      DESKTOP header (keeping the label on one line inside its col-md-2), so on
      mobile it was resurrecting an element the theme deliberately hides — which
      is why the button only appears once the text is scaled up.

   2. Once visible it rendered in the wrong place: it lives in its own column of
      the header row, and the mobile menu panel is position:fixed and out of
      that row's flow, so the button stayed up beside the logo and overlapped
      the panel's top edge (measured y 98-143 against a panel starting at 114).

   custom.js now relocates the column into the panel so the button flows
   directly after the menu list. These rules give it the panel's centred layout
   instead of the right-aligned desktop one 7b sets, and let the label wrap
   rather than run past the screen edge. Still gated behind the resize class,
   so with the toolbar off the button stays hidden on mobile exactly as before. */
@media (max-width: 767px) {
    html body[class*="pojo-a11y-resize-font-"] .mobile-menu-wrap .left-button {
        display: flex !important;
        justify-content: center !important;
        margin-top: 0 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .mobile-menu-wrap .left-button a {
        white-space: normal !important;
        justify-content: center;
        text-align: center;
        max-width: 100%;
    }
    body[class*="pojo-a11y-resize-font-"] .mobile-menu-wrap .mobil-head-phone {
        padding: 0 16px !important;
    }
}