/* ==========================================================================
   accessibility.css
   Compatibility layer for the "One Click Accessibility" (Pojo) font-resize
   tool on the Pzeev DonnaTwo theme.   v1.1

   v1.1  - Added Section 4e and the `.elementor` content root: /dona-new-lp/ is
           page-template-elementor_header_footer and carries NO theme wrapper,
           so every .page-wrapper-scoped rule missed it and the page had zero
           coverage (its CF7 form still compounded, its 9 post-79.css vw sizes
           still ignored the plugin entirely).
         - Fixed three SHRINK GUARD cases where a gated value at step 1 was
           SMALLER than the value at rest: .submit-btn input under 767px
           (22 -> 20.8px), .detail-mob/.phone-mob a under 380px (20 -> 18.2px),
           and the latent .global-btn / .field-col label input pair.

   WHY THIS FILE EXISTS
   ---------------------------------------------------------------------------
   The plugin only adds a body class and emits two !important rules:

     body...NN, p, li, label, input, select, textarea, legend, code, pre,
     dd, dt, span, blockquote           { font-size: NN%      !important }
     body...NN h1..h6, h1 span..h6 span { font-size: NN*1.33% !important }

   On this vw-based design that produces seven separate failures. Every number
   below was measured on the live site with this file removed from the DOM:

     1. vw ignores body font-size, so vw-sized text cannot follow the plugin.
     2. The percentages COMPOUND through CF7's p > span > span nesting:
          .wpcf7-list-item-label   11.088px  ->  2048px   (step 200)
          #firstName (text input)  14.400px  ->   256px
     3. Elements switch units per breakpoint (.main-heading-1 is 2.8vw at base
        and 30px under max-width:767px). Overriding one destroys the other, so
        BOTH are emitted.
     4. The `h_ span` rule stacks 266% on top of already-scaled headings.
     5. Elements the plugin's selector list cannot reach stay frozen:
          .in-privacy-ytr-wrap li a   12.96px at every step  (<a>)
          .wpcf7-response-output      12.96px at every step  (<div>)
          .detail-mob a               14.00px at every step  (<a>)
          .cc-root / .cc-btn          14.00px at every step
     6. #cc-banner-root is a direct child of <body>, outside every content
        root: .cc-title ran to 37.24px and .cc-body to 28px while .cc-root and
        .cc-btn stayed frozen at 14px.
     7. Layout. .main-wrapper is `height:100vh; overflow-y:hidden`, so at step
        200 the left column held 2803px of content in an 885px box that could
        not be scrolled at all; .features-wrap fell into the dark (#1B2331)
        panel and the contact form fell out of it. On single.php the comment
        form pushed the document to 3191px wide.

   THE TWO RULES THIS FILE OBEYS
   ---------------------------------------------------------------------------
     A. Every rule is gated behind a pojo-a11y body class, so with nothing
        selected - and again after Reset - this file contributes ZERO computed
        differences. Two gates are in use, and no rule is ungated:
          Sections 1-6  body[class*="pojo-a11y-resize-font-"]   (font resize)
          Section 7     body.pojo-a11y-light-background,
                        body.pojo-a11y-high-contrast,
                        body.pojo-a11y-negative-contrast        (contrast modes)
        The font-resize gate was verified element-by-element at 360 / 375 /
        900 / 1440 on the home page, /sample-page/, the single post, 404 and
        search. Section 7 is colour-only and each of its classes is applied by
        the plugin exclusively while that mode is on.
     B. #pojo-a11y-toolbar is never touched. The plugin pins it with its own
        `#pojo-a11y-toolbar { font-size:16px !important }`, so the toolbar item
        text keeps going 12.8px -> 16.64px -> 25.6px, byte-identical with and
        without this file. Nothing here is scoped to <body> alone except the
        body font-size itself, which the plugin's ID rule outranks.

   SPECIFICITY NOTE
   ---------------------------------------------------------------------------
   Section 3 selectors are (0,2,3). Any pin that must survive Section 3
   therefore carries THREE class/attribute units, e.g.
     html body[attr] .page-wrapper .main-heading-1   -> (0,3,2)
   which wins because the class column is compared before the element column.
   ========================================================================== */


/* ==========================================================================
   SECTION 1 - STEP -> MULTIPLIERS (two curves)

   Two curves, because the form controls and the cookie banner start from the
   smallest sizes on the page and need a bigger first jump to read as "bigger":

     --a11y-scale       text, headings, lists, links    step 1 +15% ... max +60%
     --a11y-scale-form  inputs, submit, response output, validation tips,
                        checkbox labels, cookie title/body/buttons, mobile CTA
                                                        step 1 +30% ... max +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
   The measured <body> baseline on this site is 16px (not a guessed value).
   calc(), never a flat px, so everything that inherits still grows per step.
   The plugin's own #pojo-a11y-toolbar{font-size:16px!important} outranks this,
   which is exactly why the toolbar keeps its original behaviour (Rule B).
   ========================================================================== */
html body[class*="pojo-a11y-resize-font-"] {
    font-size: calc(16px * var(--a11y-scale)) !important;
    line-height: 1.6 !important;
}


/* ==========================================================================
   SECTION 3 - KILL THE COMPOUNDING PERCENTAGES

   One block per content root actually present on this install:

     .page-wrapper          template-home.php  (/)
     .mobile-menu           template-home.php, sibling of .page-wrapper
     .elementor             /dona-new-lp/  (page-template-elementor_header_footer,
                            body has .elementor-page-79; the ONLY root on that
                            page - it carries no theme wrapper at all)
     .description-section   page.php / single.php / 404.php / search.php
     .gold-card-banner      404.php
     .login-banner          single.php
     .login-section         single.php
     .home-banner           search.php
     .users-grid            search.php
     .website-presentation  search.php
     body > .container      404.php / search.php breadcrumb strip

   #pojo-a11y-toolbar and #cc-banner-root are siblings of these roots, never
   descendants, so neither is reached from here.

   input / select / textarea are deliberately absent - Section 4 owns them.
   h1..h6 are deliberately absent - Sections 4b / 4d own them.
   ========================================================================== */
html body[class*="pojo-a11y-resize-font-"] .page-wrapper p,
html body[class*="pojo-a11y-resize-font-"] .page-wrapper li,
html body[class*="pojo-a11y-resize-font-"] .page-wrapper span,
html body[class*="pojo-a11y-resize-font-"] .page-wrapper label,
html body[class*="pojo-a11y-resize-font-"] .page-wrapper blockquote,
html body[class*="pojo-a11y-resize-font-"] .page-wrapper legend,
html body[class*="pojo-a11y-resize-font-"] .page-wrapper code,
html body[class*="pojo-a11y-resize-font-"] .page-wrapper pre,
html body[class*="pojo-a11y-resize-font-"] .page-wrapper dd,
html body[class*="pojo-a11y-resize-font-"] .page-wrapper dt,
html body[class*="pojo-a11y-resize-font-"] .page-wrapper td,
html body[class*="pojo-a11y-resize-font-"] .page-wrapper th,
html body[class*="pojo-a11y-resize-font-"] .page-wrapper small,
html body[class*="pojo-a11y-resize-font-"] .page-wrapper strong,
html body[class*="pojo-a11y-resize-font-"] .page-wrapper em,
html body[class*="pojo-a11y-resize-font-"] .page-wrapper b,
html body[class*="pojo-a11y-resize-font-"] .page-wrapper i,
html body[class*="pojo-a11y-resize-font-"] .page-wrapper cite,

html body[class*="pojo-a11y-resize-font-"] .mobile-menu p,
html body[class*="pojo-a11y-resize-font-"] .mobile-menu li,
html body[class*="pojo-a11y-resize-font-"] .mobile-menu span,
html body[class*="pojo-a11y-resize-font-"] .mobile-menu label,
html body[class*="pojo-a11y-resize-font-"] .mobile-menu blockquote,
html body[class*="pojo-a11y-resize-font-"] .mobile-menu legend,
html body[class*="pojo-a11y-resize-font-"] .mobile-menu code,
html body[class*="pojo-a11y-resize-font-"] .mobile-menu pre,
html body[class*="pojo-a11y-resize-font-"] .mobile-menu dd,
html body[class*="pojo-a11y-resize-font-"] .mobile-menu dt,
html body[class*="pojo-a11y-resize-font-"] .mobile-menu td,
html body[class*="pojo-a11y-resize-font-"] .mobile-menu th,
html body[class*="pojo-a11y-resize-font-"] .mobile-menu small,
html body[class*="pojo-a11y-resize-font-"] .mobile-menu strong,
html body[class*="pojo-a11y-resize-font-"] .mobile-menu em,
html body[class*="pojo-a11y-resize-font-"] .mobile-menu b,
html body[class*="pojo-a11y-resize-font-"] .mobile-menu i,
html body[class*="pojo-a11y-resize-font-"] .mobile-menu cite,

html body[class*="pojo-a11y-resize-font-"] .description-section p,
html body[class*="pojo-a11y-resize-font-"] .description-section li,
html body[class*="pojo-a11y-resize-font-"] .description-section span,
html body[class*="pojo-a11y-resize-font-"] .description-section label,
html body[class*="pojo-a11y-resize-font-"] .description-section blockquote,
html body[class*="pojo-a11y-resize-font-"] .description-section legend,
html body[class*="pojo-a11y-resize-font-"] .description-section code,
html body[class*="pojo-a11y-resize-font-"] .description-section pre,
html body[class*="pojo-a11y-resize-font-"] .description-section dd,
html body[class*="pojo-a11y-resize-font-"] .description-section dt,
html body[class*="pojo-a11y-resize-font-"] .description-section td,
html body[class*="pojo-a11y-resize-font-"] .description-section th,
html body[class*="pojo-a11y-resize-font-"] .description-section small,
html body[class*="pojo-a11y-resize-font-"] .description-section strong,
html body[class*="pojo-a11y-resize-font-"] .description-section em,
html body[class*="pojo-a11y-resize-font-"] .description-section b,
html body[class*="pojo-a11y-resize-font-"] .description-section i,
html body[class*="pojo-a11y-resize-font-"] .description-section cite,

html body[class*="pojo-a11y-resize-font-"] .gold-card-banner p,
html body[class*="pojo-a11y-resize-font-"] .gold-card-banner li,
html body[class*="pojo-a11y-resize-font-"] .gold-card-banner span,
html body[class*="pojo-a11y-resize-font-"] .gold-card-banner label,
html body[class*="pojo-a11y-resize-font-"] .gold-card-banner blockquote,
html body[class*="pojo-a11y-resize-font-"] .gold-card-banner legend,
html body[class*="pojo-a11y-resize-font-"] .gold-card-banner code,
html body[class*="pojo-a11y-resize-font-"] .gold-card-banner pre,
html body[class*="pojo-a11y-resize-font-"] .gold-card-banner dd,
html body[class*="pojo-a11y-resize-font-"] .gold-card-banner dt,
html body[class*="pojo-a11y-resize-font-"] .gold-card-banner td,
html body[class*="pojo-a11y-resize-font-"] .gold-card-banner th,
html body[class*="pojo-a11y-resize-font-"] .gold-card-banner small,
html body[class*="pojo-a11y-resize-font-"] .gold-card-banner strong,
html body[class*="pojo-a11y-resize-font-"] .gold-card-banner em,
html body[class*="pojo-a11y-resize-font-"] .gold-card-banner b,
html body[class*="pojo-a11y-resize-font-"] .gold-card-banner i,
html body[class*="pojo-a11y-resize-font-"] .gold-card-banner cite,

html body[class*="pojo-a11y-resize-font-"] .login-banner p,
html body[class*="pojo-a11y-resize-font-"] .login-banner li,
html body[class*="pojo-a11y-resize-font-"] .login-banner span,
html body[class*="pojo-a11y-resize-font-"] .login-banner label,
html body[class*="pojo-a11y-resize-font-"] .login-banner blockquote,
html body[class*="pojo-a11y-resize-font-"] .login-banner legend,
html body[class*="pojo-a11y-resize-font-"] .login-banner code,
html body[class*="pojo-a11y-resize-font-"] .login-banner pre,
html body[class*="pojo-a11y-resize-font-"] .login-banner dd,
html body[class*="pojo-a11y-resize-font-"] .login-banner dt,
html body[class*="pojo-a11y-resize-font-"] .login-banner td,
html body[class*="pojo-a11y-resize-font-"] .login-banner th,
html body[class*="pojo-a11y-resize-font-"] .login-banner small,
html body[class*="pojo-a11y-resize-font-"] .login-banner strong,
html body[class*="pojo-a11y-resize-font-"] .login-banner em,
html body[class*="pojo-a11y-resize-font-"] .login-banner b,
html body[class*="pojo-a11y-resize-font-"] .login-banner i,
html body[class*="pojo-a11y-resize-font-"] .login-banner cite,

html body[class*="pojo-a11y-resize-font-"] .login-section p,
html body[class*="pojo-a11y-resize-font-"] .login-section li,
html body[class*="pojo-a11y-resize-font-"] .login-section span,
html body[class*="pojo-a11y-resize-font-"] .login-section label,
html body[class*="pojo-a11y-resize-font-"] .login-section blockquote,
html body[class*="pojo-a11y-resize-font-"] .login-section legend,
html body[class*="pojo-a11y-resize-font-"] .login-section code,
html body[class*="pojo-a11y-resize-font-"] .login-section pre,
html body[class*="pojo-a11y-resize-font-"] .login-section dd,
html body[class*="pojo-a11y-resize-font-"] .login-section dt,
html body[class*="pojo-a11y-resize-font-"] .login-section td,
html body[class*="pojo-a11y-resize-font-"] .login-section th,
html body[class*="pojo-a11y-resize-font-"] .login-section small,
html body[class*="pojo-a11y-resize-font-"] .login-section strong,
html body[class*="pojo-a11y-resize-font-"] .login-section em,
html body[class*="pojo-a11y-resize-font-"] .login-section b,
html body[class*="pojo-a11y-resize-font-"] .login-section i,
html body[class*="pojo-a11y-resize-font-"] .login-section cite,

html body[class*="pojo-a11y-resize-font-"] .home-banner p,
html body[class*="pojo-a11y-resize-font-"] .home-banner li,
html body[class*="pojo-a11y-resize-font-"] .home-banner span,
html body[class*="pojo-a11y-resize-font-"] .home-banner label,
html body[class*="pojo-a11y-resize-font-"] .home-banner blockquote,
html body[class*="pojo-a11y-resize-font-"] .home-banner legend,
html body[class*="pojo-a11y-resize-font-"] .home-banner code,
html body[class*="pojo-a11y-resize-font-"] .home-banner pre,
html body[class*="pojo-a11y-resize-font-"] .home-banner dd,
html body[class*="pojo-a11y-resize-font-"] .home-banner dt,
html body[class*="pojo-a11y-resize-font-"] .home-banner td,
html body[class*="pojo-a11y-resize-font-"] .home-banner th,
html body[class*="pojo-a11y-resize-font-"] .home-banner small,
html body[class*="pojo-a11y-resize-font-"] .home-banner strong,
html body[class*="pojo-a11y-resize-font-"] .home-banner em,
html body[class*="pojo-a11y-resize-font-"] .home-banner b,
html body[class*="pojo-a11y-resize-font-"] .home-banner i,
html body[class*="pojo-a11y-resize-font-"] .home-banner cite,

html body[class*="pojo-a11y-resize-font-"] .users-grid p,
html body[class*="pojo-a11y-resize-font-"] .users-grid li,
html body[class*="pojo-a11y-resize-font-"] .users-grid span,
html body[class*="pojo-a11y-resize-font-"] .users-grid label,
html body[class*="pojo-a11y-resize-font-"] .users-grid blockquote,
html body[class*="pojo-a11y-resize-font-"] .users-grid legend,
html body[class*="pojo-a11y-resize-font-"] .users-grid code,
html body[class*="pojo-a11y-resize-font-"] .users-grid pre,
html body[class*="pojo-a11y-resize-font-"] .users-grid dd,
html body[class*="pojo-a11y-resize-font-"] .users-grid dt,
html body[class*="pojo-a11y-resize-font-"] .users-grid td,
html body[class*="pojo-a11y-resize-font-"] .users-grid th,
html body[class*="pojo-a11y-resize-font-"] .users-grid small,
html body[class*="pojo-a11y-resize-font-"] .users-grid strong,
html body[class*="pojo-a11y-resize-font-"] .users-grid em,
html body[class*="pojo-a11y-resize-font-"] .users-grid b,
html body[class*="pojo-a11y-resize-font-"] .users-grid i,
html body[class*="pojo-a11y-resize-font-"] .users-grid cite,

html body[class*="pojo-a11y-resize-font-"] .website-presentation p,
html body[class*="pojo-a11y-resize-font-"] .website-presentation li,
html body[class*="pojo-a11y-resize-font-"] .website-presentation span,
html body[class*="pojo-a11y-resize-font-"] .website-presentation label,
html body[class*="pojo-a11y-resize-font-"] .website-presentation blockquote,
html body[class*="pojo-a11y-resize-font-"] .website-presentation legend,
html body[class*="pojo-a11y-resize-font-"] .website-presentation code,
html body[class*="pojo-a11y-resize-font-"] .website-presentation pre,
html body[class*="pojo-a11y-resize-font-"] .website-presentation dd,
html body[class*="pojo-a11y-resize-font-"] .website-presentation dt,
html body[class*="pojo-a11y-resize-font-"] .website-presentation td,
html body[class*="pojo-a11y-resize-font-"] .website-presentation th,
html body[class*="pojo-a11y-resize-font-"] .website-presentation small,
html body[class*="pojo-a11y-resize-font-"] .website-presentation strong,
html body[class*="pojo-a11y-resize-font-"] .website-presentation em,
html body[class*="pojo-a11y-resize-font-"] .website-presentation b,
html body[class*="pojo-a11y-resize-font-"] .website-presentation i,
html body[class*="pojo-a11y-resize-font-"] .website-presentation cite,

html body[class*="pojo-a11y-resize-font-"] .elementor p,
html body[class*="pojo-a11y-resize-font-"] .elementor li,
html body[class*="pojo-a11y-resize-font-"] .elementor span,
html body[class*="pojo-a11y-resize-font-"] .elementor label,
html body[class*="pojo-a11y-resize-font-"] .elementor blockquote,
html body[class*="pojo-a11y-resize-font-"] .elementor legend,
html body[class*="pojo-a11y-resize-font-"] .elementor code,
html body[class*="pojo-a11y-resize-font-"] .elementor pre,
html body[class*="pojo-a11y-resize-font-"] .elementor dd,
html body[class*="pojo-a11y-resize-font-"] .elementor dt,
html body[class*="pojo-a11y-resize-font-"] .elementor td,
html body[class*="pojo-a11y-resize-font-"] .elementor th,
html body[class*="pojo-a11y-resize-font-"] .elementor small,
html body[class*="pojo-a11y-resize-font-"] .elementor strong,
html body[class*="pojo-a11y-resize-font-"] .elementor em,
html body[class*="pojo-a11y-resize-font-"] .elementor b,
html body[class*="pojo-a11y-resize-font-"] .elementor i,
html body[class*="pojo-a11y-resize-font-"] .elementor cite,

html body[class*="pojo-a11y-resize-font-"] > .container p,
html body[class*="pojo-a11y-resize-font-"] > .container li,
html body[class*="pojo-a11y-resize-font-"] > .container span,
html body[class*="pojo-a11y-resize-font-"] > .container label {
    font-size: inherit !important;
}


/* ==========================================================================
   SECTION 4 - FORM CONTROLS + MESSAGES   (--a11y-scale-form)

   px / vw only. Never em - CF7 nests p > span > span > span and em would just
   reintroduce the compounding. Never rem - it would shrink below the design
   size on wide screens. Line-heights are forced UNITLESS because the theme
   writes them in vh, which does not grow with the font.

   READABILITY FLOOR: these are sized in vw with no tablet override, so at a
   900px viewport .wpcf7-response-output renders at 8.1px and the consent label
   at 6.93px. calc(max(<floor>, <themeValue>) * scale) keeps them legible at
   every step. It is inside the gate, so the default render is untouched.
   ========================================================================== */

/* -- text inputs / selects (theme: 1vw, line-height 2vh) ------------------ */
html body[class*="pojo-a11y-resize-font-"] .page-wrapper .field-col input,
html body[class*="pojo-a11y-resize-font-"] .page-wrapper .field-col label input,
html body[class*="pojo-a11y-resize-font-"] .page-wrapper .field-col label .wpcf7-form-control-wrap,
html body[class*="pojo-a11y-resize-font-"] .page-wrapper .wpcf7-select,
html body[class*="pojo-a11y-resize-font-"] .page-wrapper input.wpcf7-text,
html body[class*="pojo-a11y-resize-font-"] .page-wrapper input.wpcf7-email,
html body[class*="pojo-a11y-resize-font-"] .page-wrapper textarea.wpcf7-textarea {
    font-size: calc(max(15px, 1vw) * var(--a11y-scale-form)) !important;
    line-height: 1.4 !important;
    height: auto !important;
    max-width: 100% !important;
}

/* -- submit button.
      The theme gives it a bigger font (1.2vw vs 1vw) AND bigger vertical
      padding (1.6vh vs 1vh) than the text inputs, so its box is already 13px
      taller at rest (49px vs 36px at 1440) and the gap widens as you scale:
      70px vs 55px at step 200. Both values are matched to the inputs here so
      the submit and the fields are exactly the same height at every step.
      Only the size is matched - the theme's bold weight and gradient are
      untouched, so it still reads as a button.                             */
html body[class*="pojo-a11y-resize-font-"] .page-wrapper .submit-btn input,
html body[class*="pojo-a11y-resize-font-"] .page-wrapper input.wpcf7-submit {
    font-size: calc(max(15px, 1vw) * var(--a11y-scale-form)) !important;
    line-height: 1.4 !important;
    padding-top: 1vh !important;
    padding-bottom: 1vh !important;
    height: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
}
html body[class*="pojo-a11y-resize-font-"] .page-wrapper .submit-btn input::before {
    font-size: calc(22px * var(--a11y-scale-form)) !important;
}
/* SHRINK GUARD for two selectors the theme sizes ABOVE the shared button/input
   baseline. Neither currently matches an element on any of the six pages
   (`.global-btn` appears 0 times site-wide, and no .field-col wraps its input
   in a <label>), so these are latent rather than live - but sharing the
   max(15px,1vw) baseline would have rendered them smaller than at rest the
   moment either appeared. style.css gives .global-btn a flat 24px with no
   responsive override, and .field-col label input 22px - which responsive.css
   then overrides to 16px !important under 767px, mirrored in Section 6. */
html body[class*="pojo-a11y-resize-font-"] .page-wrapper .global-btn,
html body[class*="pojo-a11y-resize-font-"] .elementor .global-btn {
    font-size: calc(24px * var(--a11y-scale-form)) !important;
    line-height: 1.4 !important;
    height: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
}
html body[class*="pojo-a11y-resize-font-"] .page-wrapper .field-col label input,
html body[class*="pojo-a11y-resize-font-"] .elementor .field-col label input {
    font-size: calc(22px * var(--a11y-scale-form)) !important;
}
/* -- the "«" arrow.
      It is `position:absolute; top:50%` inside `.submit-btn > p`, and the
      theme gives that <p> `height:100%`. As soon as a sibling column shows a
      validation tip the row grows, the <p> grows with it (measured 54px
      against a 36px button) and the arrow is dragged below the button.
      Letting the <p> hug the input puts the arrow back on the button's own
      centre line, and the image is scaled with the button.                  */
html body[class*="pojo-a11y-resize-font-"] .page-wrapper .submit-btn > p {
    height: auto !important;
}
html body[class*="pojo-a11y-resize-font-"] .page-wrapper .submit-btn img {
    width: calc(max(14px, 1vw) * var(--a11y-scale-form)) !important;
    height: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* -- CF7 response output. A <div>, so the plugin can never reach it: it sat
      frozen at 12.96px (1440) / 3.375px (375) at every step. --------------- */
html body[class*="pojo-a11y-resize-font-"] .page-wrapper .form-order .wpcf7-response-output,
html body[class*="pojo-a11y-resize-font-"] .page-wrapper .wpcf7-response-output {
    font-size: calc(max(14px, 0.9vw) * var(--a11y-scale-form)) !important;
    line-height: 1.5 !important;
    height: auto !important;
    max-width: 100% !important;
}

/* -- CF7 validation tip.
      This theme keeps the tip `position:relative` (in normal flow) on both
      breakpoints, so there is no absolute anchor to repair - only the size,
      the vh line-height, and the mobile `margin:-11px 0 2px` which pulls a
      grown message up onto the field above it. ---------------------------- */
html body[class*="pojo-a11y-resize-font-"] .page-wrapper .wpcf7-not-valid-tip {
    font-size: calc(max(14px, 0.7vw) * var(--a11y-scale-form)) !important;
    line-height: 1.45 !important;
    position: relative !important;
    display: block !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
    white-space: normal !important;
    max-width: 100% !important;
}

/* -- consent checkbox row (theme: 0.77vw label, 1.3vw box) --------------- */
html body[class*="pojo-a11y-resize-font-"] .page-wrapper .wpcf7-list-item-label,
html body[class*="pojo-a11y-resize-font-"] .page-wrapper .simple-text p {
    font-size: calc(max(13px, 0.77vw) * var(--a11y-scale-form)) !important;
    line-height: 1.55 !important;
}
html body[class*="pojo-a11y-resize-font-"] .page-wrapper .wpcf7-checkbox input[type="checkbox"] {
    font-size: calc(max(13px, 0.77vw) * var(--a11y-scale-form)) !important;
    min-width: calc(max(18px, 1.3vw) * var(--a11y-scale-form)) !important;
    width: calc(max(18px, 1.3vw) * var(--a11y-scale-form)) !important;
    height: calc(max(18px, 1.3vw) * var(--a11y-scale-form)) !important;
    top: 2px !important;
    margin-top: 0 !important;
}
html body[class*="pojo-a11y-resize-font-"] .page-wrapper .wpcf7-checkbox input[type="checkbox"]:checked::before {
    font-size: calc(max(14px, 1vw) * var(--a11y-scale-form)) !important;
    width: auto !important;
    height: auto !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
}
html body[class*="pojo-a11y-resize-font-"] .page-wrapper .wpcf7-checkbox label {
    align-items: flex-start !important;
    padding-right: calc(max(18px, 1.3vw) * var(--a11y-scale-form) + 10px) !important;
}
html body[class*="pojo-a11y-resize-font-"] .page-wrapper .checkbox-group .wpcf7-not-valid-tip {
    padding-right: calc(max(18px, 1.3vw) * var(--a11y-scale-form) + 10px) !important;
    margin-top: 4px !important;
}

/* -- CF7 success block ---------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] .page-wrapper .success-title {
    font-size: calc(23px * var(--a11y-scale-form)) !important;
    line-height: 1.35 !important;
}


/* ==========================================================================
   SECTION 4b - ELEMENTS CARRYING AN INTENTIONAL SIZE OF THEIR OWN
   Section 3 would otherwise flatten these to the body size.

   Note the theme writes `.in-privacy-ytr-wrap :where(li, li a)`. :where()
   contributes ZERO specificity, so that rule is only (0,1,0) and Section 3
   (0,2,3) would have flattened it - it is restated explicitly below.
   ========================================================================== */

/* -- hero headings (.text-content-slider) --------------------------------
   These scale with the text curve. They must be restated explicitly because
   the plugin's `span { font-size: NN% !important }` rule would blow them up
   (they are <span>s, not headings) and Section 3 would otherwise flatten them
   to the plain body size.
   The .top-logo <img> next to them is sized in vw by the theme and carries no
   text, so it needs no rule here - it is verified unchanged at every step.  */
html body[class*="pojo-a11y-resize-font-"] .page-wrapper .main-heading-1,
html body[class*="pojo-a11y-resize-font-"] .page-wrapper .main-heading-2 {
    font-size: calc(max(22px, 2.8vw) * var(--a11y-scale)) !important;
    line-height: 1.28 !important;
}
html body[class*="pojo-a11y-resize-font-"] .page-wrapper .text-content-slider .gradient-text {
    font-size: inherit !important;
    line-height: inherit !important;
}

/* -- left column copy ----------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] .page-wrapper .text-content h1,
html body[class*="pojo-a11y-resize-font-"] .page-wrapper .main-heading {
    font-size: calc(max(22px, 2.5vw) * var(--a11y-scale)) !important;
    line-height: 1.25 !important;
}
html body[class*="pojo-a11y-resize-font-"] .page-wrapper .text-content .main-description,
html body[class*="pojo-a11y-resize-font-"] .page-wrapper p.main-description {
    font-size: calc(max(14px, 0.9vw) * var(--a11y-scale)) !important;
    line-height: 1.65 !important;
}
html body[class*="pojo-a11y-resize-font-"] .page-wrapper .features-grid .feature-text,
html body[class*="pojo-a11y-resize-font-"] .page-wrapper p.feature-text {
    font-size: calc(max(12px, 0.8vw) * var(--a11y-scale)) !important;
    line-height: 1.4 !important;
}

/* -- form headings -------------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] .page-wrapper .bottom-content-wrapper .main-form-title,
html body[class*="pojo-a11y-resize-font-"] .page-wrapper h2.main-form-title {
    font-size: calc(max(16px, 1vw) * var(--a11y-scale)) !important;
    line-height: 1.4 !important;
}
html body[class*="pojo-a11y-resize-font-"] .page-wrapper .contact-form .form-heading {
    font-size: calc(30px * var(--a11y-scale)) !important;
    line-height: 1.2 !important;
}
html body[class*="pojo-a11y-resize-font-"] .page-wrapper .field-col label > span:first-child {
    font-size: calc(25px * var(--a11y-scale-form)) !important;
    line-height: 1.25 !important;
}

/* -- privacy / accessibility links (the :where() rule, restated) ---------- */
html body[class*="pojo-a11y-resize-font-"] .page-wrapper .in-privacy-ytr-wrap li,
html body[class*="pojo-a11y-resize-font-"] .page-wrapper .in-privacy-ytr-wrap li a,
html body[class*="pojo-a11y-resize-font-"] .page-wrapper .in-privacy-ytr-wrap li .open-modal {
    font-size: calc(max(13px, 0.9vw) * var(--a11y-scale)) !important;
    line-height: 1.5 !important;
}

/* -- slider caption + arrows --------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] .page-wrapper .slider-wrapper .img-notice,
html body[class*="pojo-a11y-resize-font-"] .page-wrapper p.img-notice {
    font-size: calc(max(10px, 0.7vw) * var(--a11y-scale)) !important;
    line-height: 1.4 !important;
}
html body[class*="pojo-a11y-resize-font-"] .page-wrapper .slick-arrow > i {
    font-size: calc(max(24px, 3vw) * var(--a11y-scale)) !important;
}

/* -- privacy / accessibility modals -------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] .page-wrapper .modal-content p,
html body[class*="pojo-a11y-resize-font-"] .page-wrapper .modal-content li {
    font-size: calc(max(14px, 1vw) * var(--a11y-scale)) !important;
    line-height: 1.7 !important;
}
html body[class*="pojo-a11y-resize-font-"] .page-wrapper .modal-content h2 {
    font-size: calc(max(22px, 2vw) * var(--a11y-scale)) !important;
    line-height: 1.3 !important;
}
html body[class*="pojo-a11y-resize-font-"] .page-wrapper .modal-content h3,
html body[class*="pojo-a11y-resize-font-"] .page-wrapper .modal-content h4 {
    font-size: calc(max(18px, 1.4vw) * var(--a11y-scale)) !important;
    line-height: 1.35 !important;
}
html body[class*="pojo-a11y-resize-font-"] .page-wrapper .modal-content .close-modal,
html body[class*="pojo-a11y-resize-font-"] .page-wrapper span.close-modal {
    font-size: calc(max(27px, 3vw) * var(--a11y-scale)) !important;
    line-height: 1 !important;
}

/* -- fixed mobile CTA bar. An <a>, so the plugin never reached it.
      responsive.css sizes it at 20px in BOTH of its bands (max-width:767px
      and max-width:380px), so 20px is the baseline. The earlier 16px was
      below the at-rest size on the 380 band and made the first click shrink
      it - see the SHRINK GUARD note in the max-width:380px block. --------- */
html body[class*="pojo-a11y-resize-font-"] .mobile-menu .detail-mob a,
html body[class*="pojo-a11y-resize-font-"] .mobile-menu .phone-mob a {
    font-size: calc(20px * var(--a11y-scale-form)) !important;
    line-height: 1.35 !important;
}


/* ==========================================================================
   SECTION 4c - THEME-TEMPLATE PAGES (page.php / single.php / 404.php /
   search.php). These have no .elementor-style wrapper; the plugin's
   `h1..h6 { 266% }` rule ran off an already-scaled <body>, so headings are
   pinned to the design sizes measured on those pages.
   Measured plugin-only at step 200: <p> 16 -> 64px, blockquote p 16 -> 128px.
   ========================================================================== */
html body[class*="pojo-a11y-resize-font-"] .description-section h1,
html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h1,
html body[class*="pojo-a11y-resize-font-"] .login-banner h1,
html body[class*="pojo-a11y-resize-font-"] .login-section h1,
html body[class*="pojo-a11y-resize-font-"] .home-banner h1,
html body[class*="pojo-a11y-resize-font-"] .users-grid h1,
html body[class*="pojo-a11y-resize-font-"] .website-presentation h1,
html body[class*="pojo-a11y-resize-font-"] > .container h1 {
    font-size: calc(40px * var(--a11y-scale)) !important;
    line-height: 1.2 !important;
}
html body[class*="pojo-a11y-resize-font-"] .description-section h2,
html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h2,
html body[class*="pojo-a11y-resize-font-"] .login-banner h2,
html body[class*="pojo-a11y-resize-font-"] .login-section h2,
html body[class*="pojo-a11y-resize-font-"] .home-banner h2,
html body[class*="pojo-a11y-resize-font-"] .users-grid h2,
html body[class*="pojo-a11y-resize-font-"] .website-presentation h2,
html body[class*="pojo-a11y-resize-font-"] > .container h2 {
    font-size: calc(32px * var(--a11y-scale)) !important;
    line-height: 1.25 !important;
}
html body[class*="pojo-a11y-resize-font-"] .description-section h3,
html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h3,
html body[class*="pojo-a11y-resize-font-"] .login-banner h3,
html body[class*="pojo-a11y-resize-font-"] .login-section h3,
html body[class*="pojo-a11y-resize-font-"] .home-banner h3,
html body[class*="pojo-a11y-resize-font-"] .users-grid h3,
html body[class*="pojo-a11y-resize-font-"] .website-presentation h3,
html body[class*="pojo-a11y-resize-font-"] > .container h3 {
    font-size: calc(30px * var(--a11y-scale)) !important;
    line-height: 1.3 !important;
}
html body[class*="pojo-a11y-resize-font-"] .description-section h4,
html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h4,
html body[class*="pojo-a11y-resize-font-"] .login-banner h4,
html body[class*="pojo-a11y-resize-font-"] .login-section h4,
html body[class*="pojo-a11y-resize-font-"] .home-banner h4,
html body[class*="pojo-a11y-resize-font-"] .users-grid h4,
html body[class*="pojo-a11y-resize-font-"] .website-presentation h4,
html body[class*="pojo-a11y-resize-font-"] > .container h4 {
    font-size: calc(24px * var(--a11y-scale)) !important;
    line-height: 1.35 !important;
}
html body[class*="pojo-a11y-resize-font-"] .description-section h5,
html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h5,
html body[class*="pojo-a11y-resize-font-"] .login-banner h5,
html body[class*="pojo-a11y-resize-font-"] .login-section h5,
html body[class*="pojo-a11y-resize-font-"] .home-banner h5,
html body[class*="pojo-a11y-resize-font-"] .users-grid h5,
html body[class*="pojo-a11y-resize-font-"] .website-presentation h5,
html body[class*="pojo-a11y-resize-font-"] > .container h5 {
    font-size: calc(20px * var(--a11y-scale)) !important;
    line-height: 1.4 !important;
}
html body[class*="pojo-a11y-resize-font-"] .description-section h6,
html body[class*="pojo-a11y-resize-font-"] .gold-card-banner h6,
html body[class*="pojo-a11y-resize-font-"] .login-banner h6,
html body[class*="pojo-a11y-resize-font-"] .login-section h6,
html body[class*="pojo-a11y-resize-font-"] .home-banner h6,
html body[class*="pojo-a11y-resize-font-"] .users-grid h6,
html body[class*="pojo-a11y-resize-font-"] .website-presentation h6,
html body[class*="pojo-a11y-resize-font-"] > .container h6 {
    font-size: calc(16px * var(--a11y-scale)) !important;
    line-height: 1.5 !important;
}
html body[class*="pojo-a11y-resize-font-"] .description-section blockquote,
html body[class*="pojo-a11y-resize-font-"] .description-section blockquote p,
html body[class*="pojo-a11y-resize-font-"] .gold-card-banner blockquote,
html body[class*="pojo-a11y-resize-font-"] .gold-card-banner blockquote p,
html body[class*="pojo-a11y-resize-font-"] .login-banner blockquote,
html body[class*="pojo-a11y-resize-font-"] .login-banner blockquote p,
html body[class*="pojo-a11y-resize-font-"] .login-section blockquote,
html body[class*="pojo-a11y-resize-font-"] .login-section blockquote p,
html body[class*="pojo-a11y-resize-font-"] .home-banner blockquote,
html body[class*="pojo-a11y-resize-font-"] .home-banner blockquote p,
html body[class*="pojo-a11y-resize-font-"] .users-grid blockquote,
html body[class*="pojo-a11y-resize-font-"] .users-grid blockquote p,
html body[class*="pojo-a11y-resize-font-"] .website-presentation blockquote,
html body[class*="pojo-a11y-resize-font-"] .website-presentation blockquote p {
    font-size: calc(16px * var(--a11y-scale)) !important;
    line-height: 1.6 !important;
}
/* Form controls on the theme-template pages carry size/cols attributes, so a
   scaled font makes them wider than the viewport. search.php's orphan search
   input measured 560px inside a 375px viewport at step 200. */
html body[class*="pojo-a11y-resize-font-"] .description-section input,
html body[class*="pojo-a11y-resize-font-"] .description-section select,
html body[class*="pojo-a11y-resize-font-"] .description-section textarea,
html body[class*="pojo-a11y-resize-font-"] .description-section button,
html body[class*="pojo-a11y-resize-font-"] .gold-card-banner input,
html body[class*="pojo-a11y-resize-font-"] .gold-card-banner select,
html body[class*="pojo-a11y-resize-font-"] .gold-card-banner textarea,
html body[class*="pojo-a11y-resize-font-"] .gold-card-banner button,
html body[class*="pojo-a11y-resize-font-"] .login-banner input,
html body[class*="pojo-a11y-resize-font-"] .login-banner select,
html body[class*="pojo-a11y-resize-font-"] .login-banner textarea,
html body[class*="pojo-a11y-resize-font-"] .login-banner button,
html body[class*="pojo-a11y-resize-font-"] .login-section input,
html body[class*="pojo-a11y-resize-font-"] .login-section select,
html body[class*="pojo-a11y-resize-font-"] .login-section textarea,
html body[class*="pojo-a11y-resize-font-"] .login-section button,
html body[class*="pojo-a11y-resize-font-"] .home-banner input,
html body[class*="pojo-a11y-resize-font-"] .home-banner select,
html body[class*="pojo-a11y-resize-font-"] .home-banner textarea,
html body[class*="pojo-a11y-resize-font-"] .home-banner button,
html body[class*="pojo-a11y-resize-font-"] .users-grid input,
html body[class*="pojo-a11y-resize-font-"] .users-grid select,
html body[class*="pojo-a11y-resize-font-"] .users-grid textarea,
html body[class*="pojo-a11y-resize-font-"] .users-grid button,
html body[class*="pojo-a11y-resize-font-"] .website-presentation input,
html body[class*="pojo-a11y-resize-font-"] .website-presentation select,
html body[class*="pojo-a11y-resize-font-"] .website-presentation textarea,
html body[class*="pojo-a11y-resize-font-"] .website-presentation button,
html body[class*="pojo-a11y-resize-font-"] > .container input,
html body[class*="pojo-a11y-resize-font-"] > .container select,
html body[class*="pojo-a11y-resize-font-"] > .container textarea,
html body[class*="pojo-a11y-resize-font-"] > .container button {
    font-size: calc(16px * var(--a11y-scale-form)) !important;
    line-height: 1.4 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
/* WordPress comment form on single.php. Its inputs carry size/cols attributes,
   so a scaled font pushed the document to 3191px wide at step 200. */
html body[class*="pojo-a11y-resize-font-"] .login-section .comment-form input,
html body[class*="pojo-a11y-resize-font-"] .login-section .comment-form textarea,
html body[class*="pojo-a11y-resize-font-"] .login-section #commentform input,
html body[class*="pojo-a11y-resize-font-"] .login-section #commentform textarea {
    font-size: calc(16px * var(--a11y-scale-form)) !important;
    line-height: 1.4 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}


/* ==========================================================================
   SECTION 4d - COOKIE BANNER (#cc-banner-root.cc-root and its settings modal)

   The banner is a direct child of <body>, outside every content root, so
   Section 3 cannot reach it. Plugin-only, with this file removed:
     .cc-title           16px -> 24.21px (130) -> 37.24px (200)   runaway
     .cc-body            14px -> 18.20px (130) -> 28.00px (200)   runaway
     .cc-modal-head h2   18px ->                  85.12px (200)   runaway
     .cc-required-badge  11px ->                  64.00px (200)   runaway
     .cc-root            14px -> 14px    -> 14px                  frozen
     .cc-btn             14px -> 14px    -> 14px   (font: inherit) frozen
     .cc-cat-desc / .cc-modal-close / .cc-cookies-list             frozen

   Generic inherit rule FIRST, then explicit pins. Every pin is
   calc(<px> * var(--a11y-scale...)) - a flat px would stop the runaway but
   freeze the banner, so the user would click and see nothing change.
   .cc-title / .cc-btn use the FORM curve with bumped baselines (16->18,
   14->15) so the very first click is a visible jump.
   Each pin has a bare and a scoped selector so it wins whether the element is
   in the banner or in the settings modal (which is appended outside .cc-root).
   The scoped form is (0,3,2) and beats the (0,2,3) inherit rule because the
   class column is compared first.
   ========================================================================== */
html body[class*="pojo-a11y-resize-font-"] .cc-root p,
html body[class*="pojo-a11y-resize-font-"] .cc-root li,
html body[class*="pojo-a11y-resize-font-"] .cc-root span,
html body[class*="pojo-a11y-resize-font-"] .cc-root label,
html body[class*="pojo-a11y-resize-font-"] .cc-root a,
html body[class*="pojo-a11y-resize-font-"] .cc-root div,
html body[class*="pojo-a11y-resize-font-"] .cc-modal p,
html body[class*="pojo-a11y-resize-font-"] .cc-modal li,
html body[class*="pojo-a11y-resize-font-"] .cc-modal span,
html body[class*="pojo-a11y-resize-font-"] .cc-modal label,
html body[class*="pojo-a11y-resize-font-"] .cc-modal a,
html body[class*="pojo-a11y-resize-font-"] .cc-modal div {
    font-size: inherit !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-root,
html body[class*="pojo-a11y-resize-font-"] .cc-modal-wrap,
html body[class*="pojo-a11y-resize-font-"] .cc-modal {
    font-size: calc(14px * var(--a11y-scale)) !important;
    line-height: 1.5 !important;
}
/* keep the fixed banner usable once everything inside it has grown */
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-banner {
    max-height: 80vh !important;
    overflow-y: auto !important;
}
/* Safety net. On desktop .cc-root is position:fixed with only `right` set, so
   its used width is its shrink-to-fit width, and once the banner text is
   scaled its min-content width can exceed the viewport (measured 709px inside
   375px, plugin-only, step 200). Below 768px style.css gives it
   `width:95%`, so the cap is set at 100vw-10px: wide enough never to clip the
   theme's own 95%, tight enough to stop a runaway. */
html body[class*="pojo-a11y-resize-font-"] .cc-root {
    max-width: calc(100vw - 10px) !important;
    overflow-wrap: break-word !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-title,
html body[class*="pojo-a11y-resize-font-"] .cc-root .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,
html body[class*="pojo-a11y-resize-font-"] .cc-root .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-"] .cc-root .cc-btn,
html body[class*="pojo-a11y-resize-font-"] .cc-modal .cc-btn {
    font-size: calc(15px * var(--a11y-scale-form)) !important;
    line-height: 1.35 !important;
    white-space: normal !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-lang-toggle,
html body[class*="pojo-a11y-resize-font-"] .cc-root .cc-lang-toggle,
html body[class*="pojo-a11y-resize-font-"] .cc-modal .cc-lang-toggle {
    font-size: calc(12px * var(--a11y-scale)) !important;
    line-height: 1.4 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-modal-head h2,
html body[class*="pojo-a11y-resize-font-"] .cc-modal .cc-modal-head h2 {
    font-size: calc(18px * var(--a11y-scale)) !important;
    line-height: 1.3 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-modal-close,
html body[class*="pojo-a11y-resize-font-"] .cc-modal .cc-modal-close {
    font-size: calc(24px * var(--a11y-scale)) !important;
    line-height: 1 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-cat-name,
html body[class*="pojo-a11y-resize-font-"] .cc-modal .cc-cat-name {
    font-size: calc(14px * var(--a11y-scale)) !important;
    line-height: 1.4 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-cat-desc,
html body[class*="pojo-a11y-resize-font-"] .cc-modal .cc-cat-desc {
    font-size: calc(13px * var(--a11y-scale)) !important;
    line-height: 1.5 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-required-badge,
html body[class*="pojo-a11y-resize-font-"] .cc-modal .cc-required-badge {
    font-size: calc(11px * var(--a11y-scale)) !important;
    line-height: 1.4 !important;
}
html body[class*="pojo-a11y-resize-font-"] .cc-cookies-list,
html body[class*="pojo-a11y-resize-font-"] .cc-cookies-list summary,
html body[class*="pojo-a11y-resize-font-"] .cc-cookies-list th,
html body[class*="pojo-a11y-resize-font-"] .cc-cookies-list td,
html body[class*="pojo-a11y-resize-font-"] .cc-modal .cc-cookies-list th,
html body[class*="pojo-a11y-resize-font-"] .cc-modal .cc-cookies-list td {
    font-size: calc(12px * var(--a11y-scale)) !important;
    line-height: 1.5 !important;
}


/* ==========================================================================
   SECTION 4e - ELEMENTOR LANDING PAGE   (/dona-new-lp/, .elementor .elementor-79)

   This page is page-template-elementor_header_footer. It carries NO theme
   wrapper at all - no .page-wrapper, no .description-section - so `.elementor`
   is its only content root (now listed in Section 3), and every
   .page-wrapper-scoped rule in Section 4 missed it completely.

   Its CF7 form uses the SAME markup classes as the home form (.field-col,
   .submit-btn, .simple-text, .checkbox-group, #contactUs) and is styled by the
   SAME unscoped rules in style.css / responsive.css, so every value below
   mirrors Section 4 / Section 6 exactly - only the scope changes.

   The page's own text sizes come from post-79.css: 8 font-size rules at base
   plus 1 at max-width:1366px. There is NO mobile band anywhere in that file,
   which is why every rule here carries a READABILITY FLOOR - at 375px the
   design values compute to 3-5px (0.8vw = 3.0px, 0.9vw = 3.4px, 1.3vw =
   4.9px). The floor only ever raises a value, never lowers it, so no step can
   render smaller than the page does at rest.

   SPECIFICITY: `html body[attr] .elementor .elementor-element-XXXX .elementor-
   heading-title` is (0,4,2). It beats Section 3's (0,2,3) on the class column
   and Elementor's own (0,4,0) on the element column, so these pins survive
   both.
   ========================================================================== */

/* -- text inputs (theme: 1vw; 16px !important under 767) ------------------ */
html body[class*="pojo-a11y-resize-font-"] .elementor .field-col input,
html body[class*="pojo-a11y-resize-font-"] .elementor .wpcf7-select,
html body[class*="pojo-a11y-resize-font-"] .elementor input.wpcf7-text,
html body[class*="pojo-a11y-resize-font-"] .elementor input.wpcf7-email,
html body[class*="pojo-a11y-resize-font-"] .elementor textarea.wpcf7-textarea {
    font-size: calc(max(15px, 1vw) * var(--a11y-scale-form)) !important;
    line-height: 1.4 !important;
    height: auto !important;
    max-width: 100% !important;
}

/* -- submit button (theme: 1.2vw; 22px !important under 767). Matched to the
      inputs exactly as Section 4 does, so both boxes stay the same height at
      every step. 1vw x 1.30 > 1.2vw at every viewport, so this never shrinks
      the label. ---------------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] .elementor .submit-btn input,
html body[class*="pojo-a11y-resize-font-"] .elementor input.wpcf7-submit {
    font-size: calc(max(15px, 1vw) * var(--a11y-scale-form)) !important;
    line-height: 1.4 !important;
    padding-top: 1vh !important;
    padding-bottom: 1vh !important;
    height: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor .submit-btn input::before {
    font-size: calc(22px * var(--a11y-scale-form)) !important;
}
/* the "<<" arrow: same absolute-inside-a-full-height-<p> problem as Section 4 */
html body[class*="pojo-a11y-resize-font-"] .elementor .submit-btn > p {
    height: auto !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor .submit-btn img {
    width: calc(max(14px, 1vw) * var(--a11y-scale-form)) !important;
    height: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* -- CF7 response output. A <div>: the plugin can never reach it. --------- */
html body[class*="pojo-a11y-resize-font-"] .elementor .wpcf7-response-output {
    font-size: calc(max(14px, 0.9vw) * var(--a11y-scale-form)) !important;
    line-height: 1.5 !important;
    height: auto !important;
    max-width: 100% !important;
}

/* -- CF7 validation tip. position:relative on both bands here too, so there
      is no absolute anchor to repair - only size and the vh line-height. --- */
html body[class*="pojo-a11y-resize-font-"] .elementor .wpcf7-not-valid-tip {
    font-size: calc(max(14px, 0.7vw) * var(--a11y-scale-form)) !important;
    line-height: 1.45 !important;
    position: relative !important;
    display: block !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
    white-space: normal !important;
    max-width: 100% !important;
}

/* -- consent checkbox row.
      NOTE: responsive.css scopes its 13px mobile fallback for <p> to
      `.form-order form :where(p, .wpcf7-list-item-label)`, and this page has
      NO .form-order - so `.simple-text p` here keeps the 0.77vw base value at
      every width and renders at 2.9px on a 375px phone with accessibility
      OFF. That is a pre-existing theme bug, reported not silently patched;
      the floor below fixes it only while a step is selected. ------------- */
html body[class*="pojo-a11y-resize-font-"] .elementor .wpcf7-list-item-label,
html body[class*="pojo-a11y-resize-font-"] .elementor .simple-text p {
    font-size: calc(max(13px, 0.77vw) * var(--a11y-scale-form)) !important;
    line-height: 1.55 !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor .wpcf7-checkbox input[type="checkbox"] {
    font-size: calc(max(13px, 0.77vw) * var(--a11y-scale-form)) !important;
    min-width: calc(max(18px, 1.3vw) * var(--a11y-scale-form)) !important;
    width: calc(max(18px, 1.3vw) * var(--a11y-scale-form)) !important;
    height: calc(max(18px, 1.3vw) * var(--a11y-scale-form)) !important;
    top: 2px !important;
    margin-top: 0 !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor .wpcf7-checkbox input[type="checkbox"]:checked::before {
    font-size: calc(max(14px, 1vw) * var(--a11y-scale-form)) !important;
    width: auto !important;
    height: auto !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor .wpcf7-checkbox label {
    align-items: flex-start !important;
    padding-right: calc(max(18px, 1.3vw) * var(--a11y-scale-form) + 10px) !important;
}
html body[class*="pojo-a11y-resize-font-"] .elementor .checkbox-group .wpcf7-not-valid-tip {
    padding-right: calc(max(18px, 1.3vw) * var(--a11y-scale-form) + 10px) !important;
    margin-top: 4px !important;
}

/* -- the page's own Elementor widgets, one rule per post-79.css value ----- */

/* heading 103d1a9 - "לקבלת פרטים נוספים וקביעת פגישה" (theme: 1.3vw) */
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-103d1a9 .elementor-heading-title {
    font-size: calc(max(18px, 1.3vw) * var(--a11y-scale)) !important;
    line-height: 1.3 !important;
}
/* heading 0cd336f (theme: 1.17vw, dropping to 1.05vw at max-width:1366px) */
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-0cd336f .elementor-heading-title {
    font-size: calc(max(16px, 1.17vw) * var(--a11y-scale)) !important;
    line-height: 1.35 !important;
}
/* the four feature headings df171b1 / 7817af6 / 873df27 / 1a6ec4a (0.9vw) */
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-df171b1 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-7817af6 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-873df27 .elementor-heading-title,
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-1a6ec4a .elementor-heading-title {
    font-size: calc(max(14px, 0.9vw) * var(--a11y-scale)) !important;
    line-height: 1.4 !important;
}
/* icon list 3c3349c (theme: 0.8vw on both the text span and the <a>) */
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-3c3349c .elementor-icon-list-item > .elementor-icon-list-text,
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-3c3349c .elementor-icon-list-item > a {
    font-size: calc(max(13px, 0.8vw) * var(--a11y-scale)) !important;
    line-height: 1.5 !important;
}
/* button fd3982b (theme: 1.1vw). A widget button -> the form curve. */
html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-fd3982b .elementor-button {
    font-size: calc(max(15px, 1.1vw) * var(--a11y-scale-form)) !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    max-width: 100% !important;
}

/* post-79.css's only breakpoint, mirrored in its own source order. */
@media (max-width: 1366px) {
    html body[class*="pojo-a11y-resize-font-"] .elementor .elementor-element-0cd336f .elementor-heading-title {
        font-size: calc(max(16px, 1.05vw) * var(--a11y-scale)) !important;
    }
}


/* ==========================================================================
   SECTION 4f - PRIVACY / ACCESSIBILITY MODALS ON THE LANDING PAGE

   /dona-new-lp/ carries TWO of these, both shortcode widgets inside
   .elementor, both built from the same markup:

       #privacyModal.privacy-wrapper       > .privacy-content > h2 / h3 / p
       #accessibilityModal.privacy-wrapper > .privacy-content > h2 / h3 / p

   (The home page still uses the OLDER .modal-content markup, which Section 4b
   already covers. .privacy-wrapper exists only on the landing page.)

   TWO SEPARATE FAILURES
   ---------------------------------------------------------------------------
   1. :where() HAS ZERO SPECIFICITY. The theme sizes the body copy with

          .privacy-wrapper .privacy-content :where(p, li, a, div) { 0.8vw }

      which is only (0,2,0) - the :where() contributes nothing at all, not even
      an element unit. Section 3's `.elementor p` is (0,2,3) !important, so it
      TIES on the class column and then WINS on the element column, flattening
      the whole legal text to the plain body size. At step 200 that turned
      11.5px of dense legal copy into 25.6px. The selectors below restate the
      theme's intent explicitly at (0,3,3), which clears Section 3.

   2. h2 / h3 ARE PLUGIN FOOD. The theme's (0,2,1) headings carry no
      !important, so the plugin's `body...NN h2 { 266% !important }` (0,1,2)
      beats them and runs off the already-scaled <body>: 16 x 1.6 x 2.66 =
      68px for a modal subheading at step 200.

   VALUES mirror style.css 1:1 - base, then the theme's own max-width:767px
   switch to px, which is emitted in Section 6 so it lands in the theme's
   source order. Line-heights are forced UNITLESS: the theme writes them in vh
   (2.4vh / 2.6vh), which does not grow with the font, so scaled text in a
   scrolling legal modal would otherwise collide line-to-line.

   READABILITY FLOOR: the modal copy is 0.8vw with no tablet override, so
   between 768px and ~1250px it renders at 6-10px with accessibility OFF -
   see the note in the report. The floors keep it legible at every step, and
   never lower a value, so no step renders smaller than the page does at rest.

   `div` is included at BOTH breakpoints. The theme lists it at base but drops
   it from the 767px rule, which would leave a nested <div> at the 0.8vw base
   value - 3px on a phone. Matching it to <p> is the obvious intent.
   ========================================================================== */
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h2 {
    font-size: calc(max(20px, 1.4vw) * var(--a11y-scale)) !important;
    line-height: 1.3 !important;
}
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h3 {
    font-size: calc(max(17px, 1.1vw) * var(--a11y-scale)) !important;
    line-height: 1.35 !important;
}
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content p,
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content li,
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content a,
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content div,
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content strong,
html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content span {
    font-size: calc(max(14px, 0.8vw) * var(--a11y-scale)) !important;
    line-height: 1.7 !important;
}


/* ==========================================================================
   SECTION 5 - LAYOUT: KEEP THE PAGE SCROLLABLE, AND KEEP EACH BLOCK IN ITS
   OWN COLOUR BAND

   Measured plugin-only at 1440x900, step 200:
     .left-side-wrapper       885px tall, overflow hidden, 2803px of content
     .features-wrap             864 .. 1863  -> inside the dark panel (wrong)
     .bottom-grey-corner        449 ..  885  -> fixed 48.5vh, cannot follow
     .bottom-content-wrapper   1918 .. 2803  -> outside the dark panel (wrong)
     document.scrollHeight    900 == innerHeight -> nothing could be scrolled

   Fix: unlock vertical scrolling, and take .bottom-grey-corner out of absolute
   positioning so it becomes the flow sibling that STARTS the dark band.
   .features-wrap is ordered before it (skin/cream band, #F5F2EE) and
   .bottom-content-wrapper after it (dark band, #1B2331), so the colour
   boundary now tracks the content at any font size, on mobile and desktop
   alike. The band keeps the original slant: 20vh tall with the diagonal
   crossing at 77.6% reproduces the original 15.52vh drop, and the white
   slant-line image still sits at its top-left.

   Column widths move from vw to % so that the vertical scrollbar this unlocks
   can never create a horizontal one (65vw + 35vw exceeds clientWidth as soon
   as a scrollbar exists).
   ========================================================================== */
html body[class*="pojo-a11y-resize-font-"] .main-wrapper {
    height: auto !important;
    min-height: 100vh !important;
    max-height: none !important;
    /* Keep this the SHORTHAND. A hidden value on EITHER axis makes this a
       scroll container, and a `visible` axis paired with a non-`visible` one
       computes to `auto` - so overriding overflow-y alone is not enough. Once
       it is a scroll container it becomes the sticky scrollport instead of the
       viewport and the photo scrolls away with the page. */
    overflow: visible !important;
    align-items: stretch !important;
}
html body[class*="pojo-a11y-resize-font-"] .main-wrapper > .main-slider-wrapper {
    width: 65% !important;
    max-width: 65% !important;
    flex: 0 0 65% !important;
}
/* NOTE: the theme's `align-items:center` is deliberately left alone. Every
   child that needs to span the column is given an explicit `width:100%`
   below, so stretching the column would only widen .hide-desktop (the frozen
   hero block) from 351px to 375px on mobile for no benefit. */
html body[class*="pojo-a11y-resize-font-"] .main-wrapper > .left-side-wrapper {
    width: 35% !important;
    max-width: 35% !important;
    flex: 0 0 35% !important;
}
html body[class*="pojo-a11y-resize-font-"] .main-wrapper .slider-wrapper {
    width: 100% !important;
    max-width: 100% !important;
}

/* -- the colour boundary -------------------------------------------------- */
html body[class*="pojo-a11y-resize-font-"] .left-side-wrapper > .hide-desktop {
    order: 0 !important;
}
html body[class*="pojo-a11y-resize-font-"] .left-side-wrapper > .text-content {
    order: 1 !important;
    width: 100% !important;
}
html body[class*="pojo-a11y-resize-font-"] .left-side-wrapper > .features-wrap {
    order: 2 !important;
    width: 100% !important;
    flex: 0 0 auto !important;
}
html body[class*="pojo-a11y-resize-font-"] .left-side-wrapper > .bottom-grey-corner {
    order: 3 !important;
    position: static !important;
    width: 100% !important;
    /* SLANT ANGLE.
       The theme's shape is `height:48.5vh` clipped at `100% 32%`, i.e. the
       diagonal drops 0.32 x 48.5vh = 15.52vh across the column. The white
       slant-line PNG inside is drawn to that angle, so the band must keep the
       SAME drop or the line stops following the edge.
       Making the band exactly the drop and clipping it to a pure triangle
       keeps the angle identical at every viewport and lets the solid dark of
       .bottom-content-wrapper continue from the diagonal's bottom-right
       corner with no seam. (An earlier 10vh band with a 77.6% clip halved the
       drop to 70px and visibly flattened the line against the PNG.)         */
    height: 15.52vh !important;
    min-height: 80px !important;
    flex: 0 0 auto !important;
    padding-top: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    clip-path: polygon(0 0, 100% 100%, 0 100%) !important;
}
html body[class*="pojo-a11y-resize-font-"] .left-side-wrapper > .bottom-content-wrapper {
    order: 4 !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    background: #1B2331 !important;
    margin-top: 0 !important;
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 3vh !important;
    align-content: flex-start !important;
    position: relative !important;
    z-index: 1 !important;
}
/* the theme's 5% grid padding was dead space under the icons; removing it
   inside the gate pays back most of what the full-height slant band costs, so
   the features-to-title distance stays within 4px of the untouched design
   (172px scaled vs 168px at rest, 1440x900). */
html body[class*="pojo-a11y-resize-font-"] .page-wrapper .features-grid {
    padding-bottom: 0 !important;
}

/* -- keep the form inside its column at every step ------------------------ */
html body[class*="pojo-a11y-resize-font-"] .bottom-content-wrapper #contactform {
    width: 100% !important;
    max-width: 100% !important;
}
html body[class*="pojo-a11y-resize-font-"] .bottom-content-wrapper #contactform > * {
    max-width: 100% !important;
}
/* the CF7 markup is a Bootstrap .row with -12px side margins; the theme's
   `.form-order { width: 80% }` used to absorb them. Restore that clearance. */
html body[class*="pojo-a11y-resize-font-"] .bottom-content-wrapper .form-order {
    width: 100% !important;
    padding: 0 6% !important;
}
html body[class*="pojo-a11y-resize-font-"] .page-wrapper .main-form-title {
    max-width: 92% !important;
}
/* the theme sizes the privacy / accessibility modal in vw; give it room */
html body[class*="pojo-a11y-resize-font-"] .page-wrapper .custom-modal .modal-content {
    max-height: 86vh !important;
    overflow-y: auto !important;
}


/* ==========================================================================
   SECTION 6 - MOBILE
   Emitted in the theme's own @media source order: max-width:767px first,
   then max-width:380px. Every value mirrors the px sizes the theme switches
   to at these breakpoints.
   ========================================================================== */
@media (max-width: 767px) {

    /* -- layout ----------------------------------------------------------- */
    html body[class*="pojo-a11y-resize-font-"] .main-wrapper > .main-slider-wrapper,
    html body[class*="pojo-a11y-resize-font-"] .main-wrapper > .left-side-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .main-wrapper .slider-wrapper {
        width: 100% !important;
        height: auto !important;
    }
    /* Same reasoning as the desktop band. The theme's mobile shape is
       `height:55.5%` clipped at `100% 14%`, which measured a 97px drop across
       a 375px column - a 0.259 slope. 26vw reproduces that slope at any phone
       width, and clears the mobile slant-line PNG (169x46 + 2vh = 62px). */
    html body[class*="pojo-a11y-resize-font-"] .left-side-wrapper > .bottom-grey-corner {
        height: 26vw !important;
        min-height: 70px !important;
        padding-top: 0 !important;
        clip-path: polygon(0 0, 100% 100%, 0 100%) !important;
    }
    /* The theme's `.features-grid { margin-bottom: 60px }` used to sit ON TOP
       of the absolutely-positioned dark panel, so it cost nothing. Now that
       the panel is a flow sibling that margin pushes it down and opens 60px
       of empty cream: measured 76px between the last feature line and the
       band, against 32px at rest. 12px restores the original spacing. */
    html body[class*="pojo-a11y-resize-font-"] .page-wrapper .features-grid {
        margin-bottom: 12px !important;
    }
    /* the fixed CTA bar overlays the bottom of the page and grows with the
       form curve, so the dark band needs matching clearance */
    html body[class*="pojo-a11y-resize-font-"] .left-side-wrapper > .bottom-content-wrapper {
        padding-bottom: calc(60px + 16px * var(--a11y-scale-form)) !important;
    }
    /* The theme centres the form with `.form-order { width: 80% }`, which left
       ~33px of breathing room each side. Section 5 widens it to 100% to give
       the scaled fields room, so the side gutter has to come back as padding:
       24px here nets ~20px once Bootstrap's -12px row margin and the columns'
       px-2 (8px) are applied. 36px measures a 26px / 24px gutter at 375px,
       matching the 27px / 26px the theme's `width:80%` gives at rest. */
    html body[class*="pojo-a11y-resize-font-"] .bottom-content-wrapper .form-order {
        padding: 0 13px !important;
    }

    /* -- form controls: the theme switches to px here --------------------- */
    html body[class*="pojo-a11y-resize-font-"] .page-wrapper .field-col input,
    html body[class*="pojo-a11y-resize-font-"] .page-wrapper .field-col label input,
    html body[class*="pojo-a11y-resize-font-"] .page-wrapper .field-col label .wpcf7-form-control-wrap,
    html body[class*="pojo-a11y-resize-font-"] .page-wrapper .wpcf7-select,
    html body[class*="pojo-a11y-resize-font-"] .page-wrapper input.wpcf7-text,
    html body[class*="pojo-a11y-resize-font-"] .page-wrapper input.wpcf7-email,
    html body[class*="pojo-a11y-resize-font-"] .page-wrapper textarea.wpcf7-textarea {
        font-size: calc(16px * var(--a11y-scale-form)) !important;
        line-height: 1.4 !important;
    }
    /* SHRINK GUARD. responsive.css gives `.submit-btn input { font-size:22px
       !important }` here, so the earlier 16px baseline - chosen to match the
       16px mobile input box - made the FIRST click shrink the submit label
       from 22px to 20.8px (16 x 1.30). A step must never render smaller than
       at rest, so the baseline is the theme's own 22px. The 8px padding still
       matches the input box; only the label is larger, which is the theme's
       intent at rest anyway. */
    html body[class*="pojo-a11y-resize-font-"] .page-wrapper .submit-btn input,
    html body[class*="pojo-a11y-resize-font-"] .page-wrapper input.wpcf7-submit {
        font-size: calc(22px * var(--a11y-scale-form)) !important;
        line-height: 1.4 !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .page-wrapper .submit-btn input::before {
        font-size: calc(18px * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .page-wrapper .form-order .wpcf7-response-output,
    html body[class*="pojo-a11y-resize-font-"] .page-wrapper .wpcf7-response-output {
        font-size: calc(14px * var(--a11y-scale-form)) !important;
        line-height: 1.5 !important;
    }
    /* the theme's `margin:-11px 0 2px` pulls a grown tip onto the field above */
    html body[class*="pojo-a11y-resize-font-"] .page-wrapper .wpcf7-not-valid-tip {
        font-size: calc(14px * var(--a11y-scale-form)) !important;
        line-height: 1.45 !important;
        margin: 4px 0 4px 0 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .page-wrapper .wpcf7-list-item-label,
    html body[class*="pojo-a11y-resize-font-"] .page-wrapper .simple-text p {
        font-size: calc(13px * var(--a11y-scale-form)) !important;
        line-height: 1.55 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .page-wrapper .wpcf7-checkbox input[type="checkbox"] {
        font-size: calc(13px * var(--a11y-scale-form)) !important;
        min-width: calc(22px * var(--a11y-scale-form)) !important;
        width: calc(22px * var(--a11y-scale-form)) !important;
        height: calc(22px * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .page-wrapper .wpcf7-checkbox input[type="checkbox"]:checked::before {
        font-size: calc(18px * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .page-wrapper .wpcf7-checkbox label,
    html body[class*="pojo-a11y-resize-font-"] .page-wrapper .checkbox-group .wpcf7-not-valid-tip {
        padding-right: calc(22px * var(--a11y-scale-form) + 18px) !important;
    }

    /* -- SECTION 4e's form on the Elementor landing page, same theme values.
          responsive.css declares these unscoped, so /dona-new-lp/ switches to
          exactly the same px sizes the home form does at this breakpoint. --- */
    html body[class*="pojo-a11y-resize-font-"] .elementor .field-col input,
    html body[class*="pojo-a11y-resize-font-"] .elementor .wpcf7-select,
    html body[class*="pojo-a11y-resize-font-"] .elementor input.wpcf7-text,
    html body[class*="pojo-a11y-resize-font-"] .elementor input.wpcf7-email,
    html body[class*="pojo-a11y-resize-font-"] .elementor textarea.wpcf7-textarea {
        font-size: calc(16px * var(--a11y-scale-form)) !important;
        line-height: 1.4 !important;
    }
    /* 22px, matching responsive.css - see the SHRINK GUARD note on the
       .page-wrapper twin above. */
    html body[class*="pojo-a11y-resize-font-"] .elementor .submit-btn input,
    html body[class*="pojo-a11y-resize-font-"] .elementor input.wpcf7-submit {
        font-size: calc(22px * var(--a11y-scale-form)) !important;
        line-height: 1.4 !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor .submit-btn input::before {
        font-size: calc(18px * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor .wpcf7-response-output {
        font-size: calc(14px * var(--a11y-scale-form)) !important;
        line-height: 1.5 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor .wpcf7-not-valid-tip {
        font-size: calc(14px * var(--a11y-scale-form)) !important;
        line-height: 1.45 !important;
        margin: 4px 0 4px 0 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor .wpcf7-list-item-label,
    html body[class*="pojo-a11y-resize-font-"] .elementor .simple-text p {
        font-size: calc(13px * var(--a11y-scale-form)) !important;
        line-height: 1.55 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor .wpcf7-checkbox input[type="checkbox"] {
        font-size: calc(13px * var(--a11y-scale-form)) !important;
        min-width: calc(22px * var(--a11y-scale-form)) !important;
        width: calc(22px * var(--a11y-scale-form)) !important;
        height: calc(22px * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor .wpcf7-checkbox input[type="checkbox"]:checked::before {
        font-size: calc(18px * var(--a11y-scale-form)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .elementor .wpcf7-checkbox label,
    html body[class*="pojo-a11y-resize-font-"] .elementor .checkbox-group .wpcf7-not-valid-tip {
        padding-right: calc(22px * var(--a11y-scale-form) + 18px) !important;
    }

    /* -- headings and copy: the theme switches to px here ------------------ */
    html body[class*="pojo-a11y-resize-font-"] .page-wrapper .main-heading-1,
    html body[class*="pojo-a11y-resize-font-"] .page-wrapper .main-heading-2 {
        font-size: calc(30px * var(--a11y-scale)) !important;
        line-height: 1.2 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .page-wrapper .text-content h1,
    html body[class*="pojo-a11y-resize-font-"] .page-wrapper .main-heading {
        font-size: calc(30px * var(--a11y-scale)) !important;
        line-height: 1.25 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .page-wrapper .text-content .main-description,
    html body[class*="pojo-a11y-resize-font-"] .page-wrapper p.main-description {
        font-size: calc(14px * var(--a11y-scale)) !important;
        line-height: 1.65 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .page-wrapper .features-grid .feature-text,
    html body[class*="pojo-a11y-resize-font-"] .page-wrapper p.feature-text {
        font-size: calc(12px * var(--a11y-scale)) !important;
        line-height: 1.4 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .page-wrapper .bottom-content-wrapper .main-form-title,
    html body[class*="pojo-a11y-resize-font-"] .page-wrapper h2.main-form-title {
        font-size: calc(18px * var(--a11y-scale)) !important;
        line-height: 1.35 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .page-wrapper .in-privacy-ytr-wrap li,
    html body[class*="pojo-a11y-resize-font-"] .page-wrapper .in-privacy-ytr-wrap li a,
    html body[class*="pojo-a11y-resize-font-"] .page-wrapper .in-privacy-ytr-wrap li .open-modal {
        font-size: calc(14px * var(--a11y-scale)) !important;
        line-height: 1.5 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .page-wrapper .slider-wrapper .img-notice,
    html body[class*="pojo-a11y-resize-font-"] .page-wrapper p.img-notice {
        font-size: calc(8px * var(--a11y-scale)) !important;
        line-height: 1.4 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .page-wrapper .slick-arrow > i {
        font-size: calc(28px * var(--a11y-scale)) !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .page-wrapper .modal-content p,
    html body[class*="pojo-a11y-resize-font-"] .page-wrapper .modal-content li {
        font-size: calc(14px * var(--a11y-scale)) !important;
        line-height: 1.7 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .page-wrapper .modal-content h2 {
        font-size: calc(25px * var(--a11y-scale)) !important;
        line-height: 1.3 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .page-wrapper .modal-content .close-modal,
    html body[class*="pojo-a11y-resize-font-"] .page-wrapper span.close-modal {
        font-size: calc(27px * var(--a11y-scale)) !important;
    }

    /* -- SECTION 4f's modals: the theme switches to px here (h2 18 / h3 16 /
          body copy 12). Emitted in this block so it lands in the theme's own
          source order, after the base rules it is meant to override. ------ */
    html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h2 {
        font-size: calc(18px * var(--a11y-scale)) !important;
        line-height: 1.3 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content h3 {
        font-size: calc(16px * var(--a11y-scale)) !important;
        line-height: 1.35 !important;
    }
    html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content p,
    html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content li,
    html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content a,
    html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content div,
    html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content strong,
    html body[class*="pojo-a11y-resize-font-"] .privacy-wrapper .privacy-content span {
        font-size: calc(12px * var(--a11y-scale)) !important;
        line-height: 1.7 !important;
    }
}

@media (max-width: 380px) {
    /* SHRINK GUARD. responsive.css declares `.detail-mob a, .phone-mob a`
       at 20px in this band too - identical to its 767px band, NOT smaller.
       The earlier 14px baseline therefore shrank the CTA from 20px to 18.2px
       (14 x 1.30) on the very first click at 360/375px. Mirrored at 20px. */
    html body[class*="pojo-a11y-resize-font-"] .mobile-menu .detail-mob a,
    html body[class*="pojo-a11y-resize-font-"] .mobile-menu .phone-mob a {
        font-size: calc(20px * var(--a11y-scale-form)) !important;
    }
}

/* NOTE: an earlier revision carried a Section 7 here that unlocked scrolling
   when Contact Form 7 was in its invalid state, using :has(.wpcf7-form.invalid).
   That was a workaround for `.main-wrapper { height:100vh; overflow-y:hidden }`
   in assets/css/style.css. The root cause is now fixed in style.css itself, so
   that workaround has been removed. */


/* ==========================================================================
   SECTION 7 - CONSENT CHECKBOX TICK IN THE CONTRAST MODES

   GATE: these rules are gated behind the CONTRAST body classes, not behind
   body[class*="pojo-a11y-resize-font-"]. The guarantee is the same - the
   classes only exist while the user has chosen that mode, so with nothing
   selected this section contributes nothing - but it is a DIFFERENT gate, so
   Rule A in the header is stated per-gate.

   THE MECHANISM
   ---------------------------------------------------------------------------
   The theme draws the tick as a pseudo-element on the checkbox itself:

       .wpcf7-checkbox input[type="checkbox"]           { background:#fff }
       .wpcf7-checkbox input[type="checkbox"]:checked   { background:transparent;
                                                          border:0.1vw solid #fff }
       .wpcf7-checkbox input[type="checkbox"]:checked::before
                                    { content:"\2713"; color:white; ... }

   The plugin repaints the page with enormous selector lists, but it targets
   ELEMENTS only - the single `::before` anywhere in its stylesheet is
   `#pojo-a11y-toolbar ::before`, inside its own toolbar. And a universal
   selector does NOT match pseudo-elements, so `*{color:...}` never reaches
   the tick either. The result is that in every mode the plugin recolours the
   BOX while the tick keeps the theme's hard-coded `color: white`.

   That is harmless while the box stays dark, which is why the two dark modes
   still read. In LIGHT BACKGROUND it is fatal:

       plugin  body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar)
               :not(.pojo-a11y-toolbar-link)  { background:#fff !important }
       theme   ...:checked::before            { color: white }
                                              -> WHITE TICK ON A WHITE BOX

   (The box outline survives only because style.css:827 already forces
   `border:1px solid #000` on inputs in light mode - so the empty square is
   visible and the tick inside it is not, which is exactly the "checkbox does
   not show" symptom.)

   THE FIX
   ---------------------------------------------------------------------------
   One declaration per mode, matching the tick to whatever colour the plugin
   says text should be in that mode:

       light background   plugin paints *  #000 on #fff   -> black tick
       high contrast      plugin paints input white/black -> white tick
       negative contrast  plugin declares input{color:yellow} -> yellow tick

   SPECIFICITY: the tick is contested only by the theme's own
   `.wpcf7-checkbox input[type="checkbox"]:checked::before` at (0,3,2). These
   selectors are (0,4,3), so they win on the class column without needing
   !important - it is added only to survive any later plugin update.
   No ID trick is required here, unlike rules that fight the plugin's
   `*:not(#pojo-a11y-toolbar)` selectors, which carry an ID-column unit.

   These are colour-only. Size, position and the glyph itself stay with the
   theme, so the mobile (22px/18px) and tablet-portrait (45%) variants of the
   ::before are unaffected at every breakpoint.
   ========================================================================== */

/* -- LIGHT BACKGROUND: box is #fff, so the tick must be black ------------- */
body.pojo-a11y-light-background .wpcf7-checkbox input[type="checkbox"]:checked::before {
    color: #000 !important;
}

/* -- HIGH CONTRAST: box is black with a white border --------------------- */
body.pojo-a11y-high-contrast .wpcf7-checkbox input[type="checkbox"]:checked::before {
    color: #fff !important;
}

/* -- NEGATIVE CONTRAST: box is #000; the plugin's own rule for an <input>
      in this mode is `color: yellow`, so the tick follows it. ------------- */
body.pojo-a11y-negative-contrast .wpcf7-checkbox input[type="checkbox"]:checked::before {
    color: #ff0 !important;
}

/* -- The checked box itself. In all three modes the plugin repaints the
      background but leaves the theme's `border: 0.1vw solid var(--white-color)`
      on :checked untouched, so on the light box a white ring would disappear
      and on the dark boxes the checked and unchecked states would be told
      apart by the tick alone. Pinning the border keeps the square legible in
      both states. (0,4,2) beats the theme's (0,3,1); light background is
      already handled by style.css:827 at (1,2,2) and is restated here so the
      three modes are described in one place. --------------------------- */
body.pojo-a11y-light-background .wpcf7-checkbox input[type="checkbox"],
body.pojo-a11y-light-background .wpcf7-checkbox input[type="checkbox"]:checked {
    border-color: #000 !important;
}
body.pojo-a11y-high-contrast .wpcf7-checkbox input[type="checkbox"],
body.pojo-a11y-high-contrast .wpcf7-checkbox input[type="checkbox"]:checked,
body.pojo-a11y-negative-contrast .wpcf7-checkbox input[type="checkbox"],
body.pojo-a11y-negative-contrast .wpcf7-checkbox input[type="checkbox"]:checked {
    border-color: #fff !important;
}