/* פדיון כפרות — hand-built 1:1 rebuild of the old site's Elementor page
 * (ravbenayahu.co.il/פדיון-כפרות/). Every number here was measured off the
 * live page with Playwright at 1920/1440/1280/1100/1025/1024/900/768/500/390,
 * so re-measure rather than eyeball if you change one.
 *
 * The original is a flow layout (flex columns) whose sections are pulled into
 * each other with large negative top margins, so the artwork straddles the
 * section seams. Keep the margins and the z-indexes together — they are what
 * decides which section's background covers which picture.
 *
 * Most of those pulls are *percentages of the viewport width*, not pixels
 * (-42% / -12% / -7% / -10%), and the section heights are vh — which is why a
 * clone tuned at one window size drifts by 60-500px at every other one. The
 * two that really are fixed px are the hero's -97 and the support band's -450.
 *
 * Why every selector is doubled (`.kp.kp`): layout.js injects a site-wide
 * `body.rb-body h1, … p, … div { font-family: var(--rb-font) }`, which is
 * specificity (0,1,2) and quietly beat every single-class rule here — the
 * whole page rendered in almoni-tzar and each heading came out ~30% narrow.
 * Doubling puts these rules at (0,2,0)+ without reaching for !important.
 * For the same reason the element reset below is wrapped in :where().
 */

@font-face{font-family:'kp-almoni';src:url('/v2/assets/fonts/almoni-medium-aaa-1.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'kp-almoni';src:url('/v2/assets/fonts/almoni-bold-aaa-1.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'kp-almoni';src:url('/v2/assets/fonts/almoni-black-aaa-1.woff2') format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:'kp-levi';src:url('/v2/assets/fonts/levi-bold-aaa.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'kp-levi';src:url('/v2/assets/fonts/levi-ultrabold-aaa.woff2') format('woff2');font-weight:900;font-display:swap}
/* The old site declares almoni at 300/400/800/900 only, so its 500/600/700
 * all resolve to one of those three files. Declaring the same three keeps our
 * resolution — and therefore every text width — identical. */

/* This page runs without the site header, so the nav bar sits directly above
 * the page. styles.css gives it `#header_menu.rb-navx { margin-bottom: 24px }`
 * to separate it from ordinary page content — here that reads as a white gap
 * between the bar and the hero. Same specificity, and this file loads after
 * styles.css, so it wins without !important. */
#header_menu.rb-navx{margin-bottom:0}

.kp.kp{
  --teal:#01414f;          /* the page's ink and its dark band */
  --cream:#fffdf4;         /* the two light sections */
  --paper:#fff5e7;         /* the nusach panel */
  --chip:#a9cad1;          /* the three merit pills */
  --red:#af0909;
  --gold:#f5d5a6;
  --ice:#b4d3e0;
  --grad:linear-gradient(120deg,#881811 0%,#3c0f11 100%);
  --grad-hover:linear-gradient(120deg,#3c0f11 0%,#881811 100%);
  direction:rtl;
  position:relative;
  font-family:'kp-almoni',sans-serif;
  overflow-x:clip;
  background:#fff;
}
.kp.kp *{box-sizing:border-box}
/* styles.css opens with a bare `* { font-family: var(--rb-font) }`, which is
 * applied *directly* to every element and so outranks inheritance from .kp.
 * Re-inheriting here is what lets the rules below set a face at all. */
.kp.kp *{font-family:inherit}
.kp :where(h1,h2,p,ul,li){margin:0;padding:0;font-weight:inherit}
.kp :where(ul){list-style:none}
.kp.kp img{max-width:100%;height:auto;border:0;display:inline-block;vertical-align:top}
.kp.kp a{text-decoration:none}

/* ── buttons ─────────────────────────────────────────────────────────────
   One pill used above the fold and in the nusach section; a flat full-width
   bar inside the dark band. */
/* the hover swaps fade rather than snap — 0.3s on every button on the
 * original, 0.4s on the bar's nav links, and colour-only on the merit pills */
.kp.kp .kp-btn{
  transition:.3s;
  display:inline-block;padding:12px 48px;border-radius:20px;
  background-color:var(--red);background-image:var(--grad);
  font:900 20px/16px 'kp-almoni',sans-serif;color:#fff;text-align:center;
}
.kp.kp .kp-btn--ice{background-color:#61ce70;color:var(--ice)}
/* hover — every button reverses its gradient, and each swaps its own pair of
 * colours. Only the ink is really visible: the gradient covers the
 * background-color underneath it. (Reading these needs a settled page and the
 * element scrolled into view — a cold read reports "no change on hover".) */
.kp.kp .kp-btn:hover,.kp.kp .kp-bar-btn:hover,
.kp.kp .kp-field button:hover{background-image:var(--grad-hover)}
.kp.kp .kp-btn:not(.kp-btn--ice):hover{background-color:#fff;color:#031b4b}
.kp.kp .kp-btn--ice:hover{background-color:var(--red);color:#fff}
.kp.kp .kp-bar-btn--red:hover{background-color:rgba(175,9,9,.72);color:#fff}
.kp.kp .kp-bar-btn--white:hover{color:var(--teal)}
/* The wide bars and the submit button keep their own background-color but
 * paint the same maroon gradient over it — which is why all three read maroon
 * on the original even though one of them computes to white. Note: on the old
 * site that gradient only shows up in getComputedStyle once the element has
 * been scrolled into view, so a top-of-page read reports "none". Trust the
 * pixels. */
.kp.kp .kp-bar-btn{transition:.3s;display:block;width:100%;padding:12px 48px;
  background-image:var(--grad);
  font:500 60px/48px 'kp-almoni',sans-serif;color:var(--gold);text-align:center}
.kp.kp .kp-bar-btn--red{background-color:var(--red)}
.kp.kp .kp-bar-btn--white{background-color:#fff}

/* ── 0. the page's own bar ───────────────────────────────────────────────
   Two things about it are reproduced deliberately:
   - The hero sits on top of it (hero z-4, and it starts 11px above the bar),
     so on a wide screen only the button — which carries its own z-index —
     actually shows.
   - The original declares it sticky, but it sticks to top:0 *underneath* the
     old site's own 100px header, so a visitor never sees it once scrolled.
     Ours is left in normal flow, which is the same thing to look at and does
     not park a floating crest over the page under our shorter header. */
.kp.kp .kp-bar{
  display:flex;flex-direction:row;justify-content:space-between;align-items:center;
  gap:20px;padding:5px 100px 10px;min-height:83px;
  position:relative;
}   /* deliberately no z-index: the original's bar has z-index:auto, and giving
     * ours one made it a stacking context, which trapped the CTA's z-index:11
     * inside it and let the hero swallow the only visible thing in the bar */
.kp.kp .kp-bar-logo{width:9.37%;flex:0 0 auto;line-height:0}
.kp.kp .kp-bar-logo img{width:59%}
.kp.kp .kp-bar-nav{flex:0 0 auto}   /* content-sized, like the original — a
   pinned 388px was Chrome's measurement and came out 6px short in Firefox */
.kp.kp .kp-bar-nav ul{display:flex}
.kp.kp .kp-bar-nav li{display:flex}
.kp.kp .kp-bar-nav a{transition:.4s;white-space:nowrap;
  display:flex;align-items:center;flex:1 1 auto;margin-inline-end:19.5px;
  padding:13px 20px;font:400 20px/20px 'kp-almoni',sans-serif;color:var(--red)}
.kp.kp .kp-bar-cta{position:relative;z-index:11}

/* ── 1. hero ─────────────────────────────────────────────────────────────
   background-size:100% anchored to the bottom, so the wheat photo hangs from
   the bottom edge and leaves the strip the bar sits on uncovered. */
/* Owner's call, and the one deliberate departure from the original: there the
 * hen's head covers three words of the lead paragraph ("התורה", "י שליט",
 * "להכתב ו"). Nothing moves — the words simply come out on top of the bird.
 *
 * Getting there needs the hero's artwork split off into .kp-hero-bg. The hen
 * is z-5 in the page's stacking context, so for the hero's text to sit above
 * it the text has to reach z-6 there — impossible while the hero itself
 * carries the z-index and the mask, either of which makes it a stacking
 * context its children can never escape. So the hero keeps only the layout,
 * and the picture (plus the slanted mask) moves to an absolutely positioned
 * child at z-0: background under the hen, words over it. */
.kp.kp .kp-hero{
  position:relative;margin-top:-97px;padding:0 100px;min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:20px;
}
.kp.kp .kp-hero-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url('/uploads/2023/09/closeup-focused-shot-branch-wheat-with-bright-background.webp')
             0 100%/100% no-repeat;
}
.kp.kp .kp-hero > :not(.kp-hero-bg){position:relative;z-index:6}
/* a light halo so the words stay readable where they cross the red comb */
.kp.kp .kp-lead{text-shadow:0 0 6px #eee8dd,0 0 14px #eee8dd,0 0 22px #eee8dd}
.kp.kp .kp-orn{width:401px;max-width:100%;line-height:0;display:flow-root}
.kp.kp .kp-ec{display:block}
.kp.kp .kp-orn img{width:30%}
.kp.kp .kp-hero h1{font:600 100px/100px 'kp-levi',serif;color:var(--teal)}
.kp.kp .kp-btn{max-width:100%}
.kp.kp .kp-w{display:flow-root}     /* keeps the negative margins below from collapsing out */
.kp.kp .kp-hidur{margin-top:-30px;font:600 150px/150px 'kp-levi',serif;color:var(--teal)}
.kp.kp .kp-lead{margin-top:-30px;font:400 40px/40px 'kp-almoni',sans-serif;color:var(--teal)}
.kp.kp .kp-lead b{font-weight:700}

/* ── 2. the hen, and the coins under her ─────────────────────────────────
   Pulled 604.8px up into the hero. The coins keep a negative right margin so
   they can be centred over a box wider than their own column. */
.kp.kp .kp-bird{
  position:relative;margin-top:-42%;padding:0 100px;min-height:70vh;
  display:flex;flex-direction:column;align-items:flex-end;gap:20px;
}
.kp.kp .kp-bird-img{position:relative;z-index:5;width:100%;text-align:end;line-height:0;
  pointer-events:none}  /* it sits over the hero's button, as on the original */
.kp.kp .kp-bird-img img{width:763px}
/* Position is the original's, to the pixel — the only change is the stacking
 * order: on the old site the hen (z-5) is drawn over the coins (z-4), so her
 * legs cut across the stacks and the money reads as buried under her. z-6
 * puts the coins in front. Nothing moves. */
.kp.kp .kp-coins{position:relative;z-index:6;width:327px;max-width:100%;display:flow-root;line-height:0}
.kp.kp .kp-coins > div{margin:-366.234px -493.766px 0 0;text-align:center}
/* …and moved left into the white space beside the bird, at exactly the same
 * height. The gap there measures 226px at its tightest and ~322px over most
 * of the band, against a 327px picture, so -352px parks the stacks on the
 * white with ~5px past the window edge. `left` keeps it purely visual — no
 * box moves, so the rest of the page is untouched. */
.kp.kp .kp-coins img{width:327px;position:relative;left:-352px}

/* ── 3. נוסח פדיון כפרות ─────────────────────────────────────────────────
   The marble is background-attachment:fixed on the original, which is why a
   full-page screenshot of either site paints it only once. */
.kp.kp .kp-nusach{
  position:relative;z-index:2;margin-top:-12%;padding:0 100px;min-height:100vh;
  display:flex;flex-direction:column;
  background:url('/uploads/2023/09/vintage-grunge-blue-marble-background.webp')
             50% 50%/cover no-repeat fixed;
}
.kp.kp .kp-inner{max-width:min(100%,1140px);margin-inline:auto;width:100%;
  flex:1 0 auto;display:flex;flex-direction:column}
.kp.kp .kp-nusach .kp-inner{padding:173px 0 250px;justify-content:center;gap:20px}
.kp.kp .kp-nusach h2.kp-h{align-self:center;font:600 100px/100px 'kp-levi',serif;color:#fff}
.kp.kp .kp-nusach .kp-subw{align-self:center}
.kp.kp .kp-nusach .kp-sub{margin:-20px 0 20px;font:400 40px/40px 'kp-almoni',sans-serif;color:#fff}

/* tabs */
.kp.kp .kp-tabs{padding:50px;background:var(--paper)}
.kp.kp .kp-tabnav{display:block;width:100%;overflow:hidden}   /* the row is the anonymous table the table-cells below generate, exactly as on the original */
.kp.kp .kp-tabnav .kp-tab{
  position:relative;
  display:table-cell;padding:20px 25px;border:1px solid transparent;
  background:none;font:600 20px/20px 'kp-almoni',sans-serif;color:rgba(1,65,79,.48);
  text-align:start;cursor:pointer;vertical-align:baseline;
}
.kp.kp .kp-tabnav .kp-tab[aria-selected="true"]{
  background:var(--paper);color:var(--teal);
  border-color:rgba(175,9,9,.21);
  border-bottom-width:0;   /* not just transparent: `bottom:0` on the seam
                            * pseudo below is measured from the padding box,
                            * so a 1px bottom border draws the line 1px high */
}
/* the seam line: the active tab paints the rest of the row's bottom border
 * with two very wide pseudo-elements, clipped by the nav's overflow:hidden —
 * which is why the line breaks exactly under the active tab. */
.kp.kp .kp-tabnav .kp-tab[aria-selected="true"]::before,
.kp.kp .kp-tabnav .kp-tab[aria-selected="true"]::after{
  content:"";display:block;position:absolute;bottom:0;height:0;
  border-bottom:1px solid rgba(175,9,9,.21);
}
.kp.kp .kp-tabnav .kp-tab[aria-selected="true"]::before{inset-inline-start:-9990px;inset-inline-end:100%}
.kp.kp .kp-tabnav .kp-tab[aria-selected="true"]::after{inset-inline-start:100%;inset-inline-end:-9990px}
.kp.kp .kp-tabpanels{background:var(--paper)}
.kp.kp .kp-mtab{display:none}
.kp.kp .kp-tabpanel{padding:20px;border:1px solid rgba(175,9,9,.21);border-top:0;
  font:400 20px/30px 'kp-almoni',sans-serif;color:#000}
.kp.kp .kp-tabpanel[hidden]{display:none}
.kp.kp .kp-tabpanel p{margin:0 0 16px}
.kp.kp .kp-tabpanel strong{font-weight:700}
.kp.kp .kp-nusach .kp-ctaw{text-align:center}
.kp.kp .kp-nusach .kp-ctaw > div{margin-top:30px}

/* ── 4. מעלת פדיון כפרות ─────────────────────────────────────────────────
   Two columns; the Rav is a transparent PNG lifted 245px so his hat crosses
   into the marble above. */
.kp.kp .kp-maalat{margin-top:-7%;padding:120px 100px 50px;background:var(--cream);
  display:flex;flex-direction:row}
.kp.kp .kp-maalat .kp-col-text{flex:0 0 auto;width:58.8235%;align-self:center;padding:10px;
  display:flex;flex-direction:column;gap:20px}
.kp.kp .kp-maalat h2{width:100%;font:600 100px/100px 'kp-levi',serif;color:var(--teal)}
.kp.kp .kp-maalat .kp-col-rav{position:relative;z-index:2;width:41.1765%;
  display:flex;flex-direction:column;gap:20px}
.kp.kp .kp-rav{display:flow-root;text-align:center;line-height:0}
.kp.kp .kp-rav > div{margin-top:-48%}
.kp.kp .kp-rav img{width:auto;max-width:100%}   /* NOT width:100%: past ~1750px
   the column is wider than the 725px source and the original stops there */

/* Elementor puts an explicit width on these widgets. It only shows once the
 * phone breakpoint turns the flex columns into wrap containers: without it a
 * wrapped column stretches its items to max-content, not to the column. */
.kp.kp .kp-list{width:100%}
.kp.kp .kp-tabs,.kp.kp .kp-nusach .kp-ctaw,
.kp.kp .kp-truma .kp-inner > div,.kp.kp .kp-form > *,
.kp.kp .kp-bird-img{width:100%}
.kp.kp .kp-list li{display:flex;align-items:center;padding:0 0 18px}
.kp.kp .kp-list li + li{margin-top:18px}
.kp.kp .kp-list li:last-child{padding-bottom:0}
.kp.kp .kp-list .kp-ico{display:flex;justify-content:center;width:81.25px;flex:0 0 auto;
  padding-left:15px;line-height:0}
.kp.kp .kp-list .kp-ico img{width:53px;height:53px;margin:0 6.625px;max-width:none}
.kp.kp .kp-list .kp-txt{transition:color .3s;
  align-self:center;width:600px;max-width:100%;margin-right:-35px;
  padding:0 30px 0 0;border-radius:10px;background:var(--chip);
  font:400 40px/60px 'kp-almoni',sans-serif;color:var(--teal)}

/* ── 5. זמן הכפרות ───────────────────────────────────────────────────────
   This band is NOT VISIBLE on the old site, and that is reproduced here on
   purpose. It is white type on a container with no background, and it
   overlaps the cream section below it — but what actually hides it is its own
   mask: the section declares `mask-image: url(…מסכה-הפוכה-01-01.svgvg)`, a
   URL with a typo that 404s, and Chrome renders a layer whose mask image
   failed as fully masked out. Without this the white words paint over the
   teal heading of בתרומתכם אתם תומכים as ghosting.
   The transparent gradient below is the same outcome without a 404 request.
   If the owner wants the band back, delete this mask and give the section a
   background — see the note in lib/kaparot-routes.js. */
.kp.kp .kp-zman{-webkit-mask-image:linear-gradient(#0000,#0000);
  mask-image:linear-gradient(#0000,#0000);
  position:relative;z-index:3;margin-top:-10%;padding:200px 0 150px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px}
.kp.kp .kp-zman h2{font:600 60px/60px 'kp-levi',serif;color:#fff}
.kp.kp .kp-zman h2.kp-zman-big{font-size:100px;line-height:100px}

/* ── 6. בתרומתכם אתם תומכים ──────────────────────────────────────────── */
.kp.kp .kp-support{margin-top:-450px;padding:0 100px;min-height:100vh;background:var(--cream);
  display:flex;flex-direction:column}
.kp.kp .kp-support .kp-inner{flex-direction:row;flex-wrap:wrap;justify-content:center;
  gap:20px;padding:48px 0 76px}
.kp.kp .kp-support h2{width:100%;align-self:center;text-align:center;
  font:600 100px/100px 'kp-levi',serif;color:var(--teal)}
.kp.kp .kp-shot{width:100%;line-height:0;text-align:center}
.kp.kp .kp-shot img{width:100%;height:360px;object-fit:cover;border-radius:50px 0}
.kp.kp .kp-shot--half{width:47%}

/* ── 7. לתרומה עבור פדיון כפרות ────────────────────────────────────────── */
.kp.kp .kp-truma{padding:0 100px;min-height:100vh;background:var(--teal);
  display:flex;flex-direction:column}
.kp.kp .kp-truma .kp-inner{justify-content:center;gap:20px}
.kp.kp .kp-truma h2.kp-h{text-align:center;font:600 100px/100px 'kp-levi',serif;color:#fff}
.kp.kp .kp-form{padding:30px;background:#fff;display:flex;flex-direction:column;
  justify-content:center;gap:20px}
.kp.kp .kp-form-h{text-align:center;font:700 60px/60px 'kp-almoni',sans-serif;color:var(--teal)}
.kp.kp .kp-fields{display:flex;flex-wrap:wrap;margin:0 -10px -20px}
.kp.kp .kp-field{width:33.3333%;padding:0 10px;margin-bottom:20px;min-height:1px;
  display:flex;align-items:center}
.kp.kp .kp-field--full{width:100%}
.kp.kp .kp-field input{cursor:default;   /* the original's choice, kept for fidelity */
  width:100%;min-height:59px;padding:7px 20px;border:0;border-radius:0;
  background:rgba(1,65,79,.49);font:400 16px/22.4px 'kp-almoni',sans-serif;color:#2c0453}
.kp.kp .kp-field input::placeholder{color:#2c0453;opacity:.6}   /* the original's value; opacity:1 made the three labels visibly darker */
/* the button is nowrap but its label span is not — that is how the original
 * keeps one line at every normal width and still wraps on a 320px screen */
.kp.kp .kp-field button > span{display:block;white-space:normal}
.kp.kp .kp-field button{transition:.3s;white-space:nowrap;width:100%;padding:20px;border:0;
  background-color:var(--teal);background-image:var(--grad);
  font:800 30px/24px 'kp-almoni',sans-serif;color:#fff;text-align:center;cursor:pointer}
.kp.kp .kp-mail{text-align:center;font:700 20px/20px 'kp-almoni',sans-serif;color:var(--teal)}
.kp.kp .kp-mail a{color:inherit}
.kp.kp .kp-formmsg:empty{display:none}
.kp.kp .kp-formmsg{margin:6px 0 0;text-align:center;
  font:400 20px/28px 'kp-almoni',sans-serif;color:var(--teal)}

/* the phone-only bar the original pins to the bottom of the window
 * (elementor-hidden-desktop + -tablet, position:fixed, z-index:99) */
.kp.kp .kp-mobar{display:none}

/* the original hides its field labels the same way */
.kp.kp .kp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}


/* ── the slanted section edges ───────────────────────────────────────────
   The hero and the nusach band are not rectangles: both carry a CSS
   mask-image whose polygon drops its bottom edge 33.1px over the SVG's
   595.28px width — 80px across a 1440px window, left edge highest. Nothing
   in the markup hints at this (no shape divider, no clip-path), and it does
   not move a single box, so a geometry diff cannot see it. It is the reason
   the marble meets the cream on a slant.
   The zman band declares the mirrored mask too, but its URL ends ".svgvg"
   and 404s on the old site, so no mask is applied there — same as ours. */
.kp.kp .kp-hero-bg,.kp.kp .kp-nusach{
  -webkit-mask-image:url('/uploads/2023/09/%D7%9E%D7%A1%D7%9B%D7%94-01.svg');
          mask-image:url('/uploads/2023/09/%D7%9E%D7%A1%D7%9B%D7%94-01.svg');
  -webkit-mask-size:100%;         mask-size:100%;
  -webkit-mask-position:50% 100%; mask-position:50% 100%;
  -webkit-mask-repeat:no-repeat;  mask-repeat:no-repeat;
}

/* the two photographs are colour-graded on the original */
.kp.kp .kp-bird-img img{filter:brightness(.93) contrast(1.09) saturate(1.29)}
.kp.kp .kp-rav img{filter:brightness(1.16) contrast(.95) saturate(.67)}
/* the first yeshiva photo carries an identity filter on the original — it
 * changes nothing numerically but does change how the image is rasterised */
.kp.kp .kp-shot:not(.kp-shot--half) img{filter:brightness(1) contrast(1) saturate(1)}

/* ── the hamburger the bar swaps its links for below 1025 ───────────────── */
.kp.kp .kp-burger{display:none;align-items:center;justify-content:center;
  width:33px;height:33px;padding:5.5px;border:0;border-radius:3px;
  background:var(--paper);color:var(--teal);font-size:22px;line-height:33px;cursor:pointer}

/* ══ TABLET — Elementor's own breakpoint is 1024 ══════════════════════════
   Below it the bar collapses to a hamburger and five headings jump to 100px
   (the lead paragraph included, which is why the tablet hero is ~1600px tall
   on the original). Reproduced, not corrected. */
@media (max-width:1024px){
  .kp.kp .kp-bar-nav{width:33px}
  /* the dropdown spans the whole window on the original, 10px below the
   * toggle, on white — not a little panel hanging off the button */
  .kp.kp .kp-bar-nav ul{display:none;position:absolute;top:calc(100% + 10px);
    left:50%;transform:translateX(-50%);width:100vw;
    z-index:9997;flex-direction:column;background:#fff}
  .kp.kp .kp-bar-nav.open ul{display:flex}
  .kp.kp .kp-bar-nav li{width:100%}
  .kp.kp .kp-bar-nav a{width:100%;margin-inline-end:0;padding:10px 20px;
    font:400 20px/20px 'kp-almoni',sans-serif;color:#33373d}
  .kp.kp .kp-bar-nav{position:relative}
  .kp.kp .kp-burger{display:flex}
  /* below 1025 the original drops background-attachment:fixed — the marble
   * scrolls with the section from here down (Elementor's usual responsive
   * setting; iOS ignores fixed anyway) */
  .kp.kp .kp-hero-bg,.kp.kp .kp-nusach{background-attachment:scroll}
  .kp.kp .kp-hero h1,
  .kp.kp .kp-hidur,.kp.kp .kp-lead,
  .kp.kp .kp-nusach h2.kp-h,.kp.kp .kp-sub,
  .kp.kp .kp-maalat h2,.kp.kp .kp-zman h2,
  .kp.kp .kp-support h2,.kp.kp .kp-truma h2.kp-h{text-align:center}
  .kp.kp .kp-hidur{font-size:100px;line-height:100px}
  .kp.kp .kp-lead{font-size:100px;line-height:100px}
  .kp.kp .kp-nusach .kp-sub{font-size:100px;line-height:100px}
  .kp.kp .kp-zman h2{font-size:100px;line-height:100px}
}

/* ══ PHONE — Elementor's mobile breakpoint is 767 ═════════════════════════
   A different composition, not a narrower one: the hero centres, the hen
   shrinks to 58% and sits in the middle, the tab strip becomes an accordion,
   and both columns of the merits section go full width. */
@media (max-width:767px){
  .kp.kp .kp-bar{padding:20px;margin-top:-24px;min-height:0;align-self:center}
  .kp.kp .kp-bar-logo{width:60px}
  .kp.kp .kp-bar-logo img{width:100%}
  .kp.kp .kp-bar-cta{display:none}

  /* the masks are dropped entirely below 768 on the original — and they have
   * to be: the mask SVG scaled to a phone's width is shorter than the section,
   * so keeping it would clip the top of the marble band away */
  .kp.kp .kp-hero-bg,.kp.kp .kp-nusach{-webkit-mask-image:none;mask-image:none}
  .kp.kp .kp-hero{padding:150px 20px 20px;min-height:90vh;
    justify-content:flex-start;align-items:center;flex-wrap:wrap}
  .kp.kp .kp-hero-bg{background-size:cover;background-position:50% 50%}
  .kp.kp .kp-orn{text-align:center}
  .kp.kp .kp-orn .kp-ec{margin-top:-20px}
  .kp.kp .kp-hero h1{font-size:55px;line-height:55px}
  .kp.kp .kp-h1w .kp-ec{margin-top:-20px}
  /* the pull lives on the heading itself, not on .kp-ec — the two margins
   * collapse and the more negative one (the desktop -30) would win */
  .kp.kp .kp-hidur{margin-top:-25px;font-size:70px;line-height:56px}
  .kp.kp .kp-leadw{align-self:flex-start}
  .kp.kp .kp-lead{margin-top:-16px;font-size:20px;line-height:16px}

  .kp.kp .kp-bird{padding:0 20px;margin-top:-36%;min-height:0;flex-wrap:wrap}
  .kp.kp .kp-bird-img{text-align:center}
  .kp.kp .kp-bird-img img{width:58%}
  .kp.kp .kp-coins{align-self:center}
  /* percentages of the coin wrapper, not px — below ~370px the wrapper is
   * narrower than its 327px nominal and the original scales both with it */
  .kp.kp .kp-coins > div{margin:-40% 0 0}
  /* the same move, scaled: the phone hen is 203px wide against 763 on desktop */
  .kp.kp .kp-coins img{width:42%;left:-28.6%}

  .kp.kp .kp-nusach{padding:0 20px;margin-top:-38%}
  .kp.kp .kp-nusach .kp-inner{padding:120px 0 50px;flex-wrap:wrap}
  .kp.kp .kp-nusach h2.kp-h{font-size:55px;line-height:44px}
  .kp.kp .kp-nusach .kp-sub{margin:0;font-size:20px;line-height:16px}
  .kp.kp .kp-tabs{padding:20px}
  .kp.kp .kp-tabnav{display:none}
  .kp.kp .kp-mtab{display:block;padding:10px;border-top:1px solid rgba(175,9,9,.21);
    font:600 20px/30px 'kp-almoni',sans-serif;color:rgba(1,65,79,.48);cursor:pointer}
  .kp.kp .kp-mtab[aria-selected="true"]{color:var(--teal)}
  .kp.kp .kp-tabpanel{padding:10px;border-top:1px solid rgba(175,9,9,.21)}

  .kp.kp .kp-maalat{padding:20px;margin-top:0;flex-wrap:wrap}
  .kp.kp .kp-maalat .kp-col-text{width:100%;flex:0 0 auto;flex-wrap:wrap}
  .kp.kp .kp-maalat .kp-col-rav{width:100%;flex-wrap:wrap}
  .kp.kp .kp-maalat h2{font-size:55px;line-height:44px}
  .kp.kp .kp-list .kp-txt{font-size:30px;line-height:45px}
  .kp.kp .kp-rav > div{margin-top:0}
  .kp.kp .kp-rav img{width:62%}

  .kp.kp .kp-zman{padding:50px 0;margin-top:-17%;flex-wrap:wrap}
  .kp.kp .kp-zman h2{font-size:30px;line-height:24px}
  .kp.kp .kp-zman h2.kp-zman-big{font-size:55px;line-height:44px}

  .kp.kp .kp-support{padding:0 20px;margin-top:-220px}
  .kp.kp .kp-support .kp-inner{padding:20px 0 50px}
  .kp.kp .kp-support h2{font-size:55px;line-height:44px}
  .kp.kp .kp-shot--half{width:100%}

  .kp.kp .kp-truma{padding:0 20px}
  .kp.kp .kp-truma .kp-inner{padding:50px 0;flex-wrap:wrap}
  .kp.kp .kp-truma h2.kp-h{font-size:55px;line-height:44px}
  .kp.kp .kp-bar-btn{font-size:30px;line-height:24px}
  .kp.kp .kp-form{padding:20px 20px 30px;flex-wrap:wrap}
  .kp.kp .kp-form-h{font-size:30px;line-height:24px}
  .kp.kp .kp-field{width:100%}
  .kp.kp .kp-field button{font-size:20px;line-height:16px}
  .kp.kp .kp-mail{font-size:20px;line-height:16px}

  .kp.kp .kp-mobar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:99;
    max-width:min(100%,767px);margin-inline:auto}
  .kp.kp .kp-mobar a{display:inline-block;width:100%;padding:12px 48px;
    background-color:var(--teal);background-image:var(--grad);
    font:500 19px/15.2px 'kp-almoni',sans-serif;color:var(--gold);text-align:center}
  .kp.kp .kp-mobar a:hover{background-image:var(--grad-hover)}
  /* Elementor leaves a hidden clone of the bar in the flow so the fixed one
   * does not sit permanently over the last 54px of the page. Same trick here,
   * sized by its own copy of the label so it can never drift from the real
   * bar's height. */
  .kp.kp .kp-mobar--spacer{position:static;visibility:hidden}
  .kp.kp .kp-mobar--spacer span{display:inline-block;width:100%;padding:12px 48px;
    font:500 19px/15.2px 'kp-almoni',sans-serif;text-align:center}
}