/* ──────────────────────────────────────────────────────────────────────────
   Layer 3b — geometry, home page, MOBILE.

   Source frame: 21495:1076 "homepage mobile", 390 × 10356.4287109375.
   Authority: reference/figma-geometry/homepage-mobile.xml (210 nodes with exact
   x / y / w / h) and reference/figma-geometry/mobile-full.md (the design context
   of the same frame: per-node sizes, fonts, colours, gaps, paddings).

   THE UNIT RULE
   ─────────────
   Breakpoint: `@media (max-width: 767px)`. Nothing outside that query changes the
   desktop layer; above 768px this file only contributes the `display:none`
   defaults for the three mobile-only elements, which do not exist on desktop.

   Two units, chosen per property, deliberately:

     --ok-scale = 100vw / 390   → every GEOMETRIC length: x, y, width, height,
                                  padding, gap, border, radius. The layout keeps
                                  the frame's proportions at any phone width, so
                                  nothing can ever overflow sideways.

     --ok-type  = max(1px, 100vw/390)
                                → every TYPOGRAPHIC length: font-size and
                                  letter-spacing. Type scales UP with the boxes,
                                  so a wide phone or a narrow tablet gets the
                                  frame magnified evenly, but it never scales
                                  DOWN: 1px is the floor. That floor is the whole
                                  point of this pass — the desktop layer scaled
                                  18px body copy to 3.6px on a 390 phone.

   At 390 and above, the two units are identical, which is why a measurement at
   390 is an exact measurement against the frame. Only below 390 do they diverge:
   the boxes shrink and the type holds, so a text box may run a line longer than
   the frame. That is the intended trade, and it is the only place the two units
   can disagree.

   Line heights are unitless and therefore breakpoint-neutral.

   CLIPPING
   ────────
   overflow is set only where the matching node in the mobile frame carries
   clipsContent. Each one is named in a comment. The two exceptions, both marked
   in place, are the carousel viewports: a scroll-snap scroller has to clip to
   scroll at all, and in both cases the clip edge falls where nothing is drawn.

   ASSETS
   ──────
   Every asset is a local file in assets/figma/, mapped in _manifest.json under
   the key "mobile-full.md". Where Figma re-exported the same artwork at the
   mobile size, the desktop file is reused: the exports were compared and the
   glyph occupies the same fraction of its box (chevrons, quote marks, the mint
   loop of section 10, the footer ribbon, the logo), so the desktop file scaled to
   the mobile box is the mobile drawing. Where the artwork genuinely differs — the
   section 3 graph, the section 4 card veil, the section 5 loop — the mobile file
   is a second <img class="ok-img--mobile"> in the markup and the desktop one is
   hidden. The pill icon is the one case solved in CSS: the mobile export (245bd)
   is a tight 10.67 × 21 box and the desktop one (53c3d et al.) is the same glyph
   inside a padded 24 × 38 box, so they cannot be swapped by resizing.
   ────────────────────────────────────────────────────────────────────────── */

/* Mobile-only elements, hidden until the breakpoint. */
.site-navbar,
.ok-hero__tag,
.ok-amounts__arrows,
.ok-img--mobile {
  display: none;
}

/* The amounts row gained a viewport wrapper so the mobile carousel has something
   to scroll inside. On desktop it is a pass-through box of the row's own width. */
.ok-amounts__viewport {
  width: 100%;
}

/* The footer column head and body wrappers do not exist as boxes on desktop. */
@media (min-width: 768px) {
  .site-footer__col-title::before {
    content: none;
  }
}

@media (max-width: 767px) {

/* A horizontal scroller has to be direction:rtl so its scroll start is the right
   edge — that is what puts the snapped card flush right, as every mobile frame
   draws it. But direction is inherited, and inside a card it mirrors every
   `align-items` and `justify-content` along with it: the frame puts the round
   action of 21495:1281 on the LEFT of the card foot and the badge of
   21495:1186 on the LEFT of the amount card, and an inherited rtl swaps both to
   the right. The cards are therefore returned to physical direction; the copy
   inside them carries dir="rtl" in the markup and stays RTL.

   The desktop layer had the same mirroring and now carries this same rule, so it
   lives in home.css for both breakpoints and is not repeated here. */

/* ═══ Units ═══════════════════════════════════════════════════════════════ */
:root {
  --ok-scale: calc(100vw / 390);
  --ok-type: max(1px, 100vw / 390);
}

/* 21495:1076 fills with color/light, not color/paper. */
body {
  background: var(--ok-light);
}

.ok-img--desktop {
  display: none;
}

.ok-img--mobile {
  display: block;
}

/* ═══ Type scale — mobile text styles reported by the frame ═══════════════ */
/* mobile/H2 36 / 1.1 / 0 · mobile/text 16 / 1.35 / 0 */
.ok-h2 {
  font-size: calc(36 * var(--ok-type));
  line-height: 1.1;
}

.ok-body {
  font-size: calc(16 * var(--ok-type));
  line-height: 1.35;
  letter-spacing: 0;
}

/* The desktop layer pins a measured height on the text nodes whose Figma box is
   taller than the copy. Those are 1920 numbers and the mobile frame wraps the
   same copy differently, so they are released here and the mobile boxes keep
   their natural height. */
.ok-intro__closing,
.ok-impact__text-top,
.ok-impact__text-mid,
.ok-impact__note-text,
.ok-what__text,
.ok-what__closing,
.ok-adoption__text,
.ok-value__text,
.ok-story__text,
.ok-story__closing,
.ok-banner__text {
  height: auto;
}

/* Text boxes the frame gives a height to. Several of these nodes end in a blank
   line in Figma, so the frame's box is taller than the copy, and without the
   floor the stack under them rides up by 2–26px. It is a floor and not a height:
   if the panel copy grows past the frame's box the box grows with it rather than
   clipping, which is why the desktop layer's `height` is a `min-height` here.
   21495:1132 is the one that already renders taller than its frame box, and the
   floor leaves it alone. */
.ok-hero__headings {      /* 21495:1081 — Figma rounds its two lines to 40 and
                             88 where the browser lays them out at 39.6 and
                             87.12, so the box is 1.31 short of the frame. */
  min-height: calc(136 * var(--ok-scale));
}

.ok-hero__text {          /* 21495:1085 */
  min-height: calc(110 * var(--ok-scale));
}

.ok-intro__text {         /* 21495:1101 */
  min-height: calc(110 * var(--ok-scale));
}

.ok-intro__closing {      /* 21495:1102 */
  min-height: calc(66 * var(--ok-scale));
}

.ok-impact__text-top {    /* 21495:1119 */
  min-height: calc(73 * var(--ok-scale));
}

.ok-impact__text-mid {    /* 21495:1122 */
  min-height: calc(66 * var(--ok-scale));
}

.ok-impact__note-text {   /* 21495:1124 */
  min-height: calc(198 * var(--ok-scale));
}

.ok-what__title {         /* 21495:1131 */
  min-height: calc(120 * var(--ok-scale));
}

.ok-what__text {          /* 21495:1132 */
  min-height: calc(154 * var(--ok-scale));
}

.ok-what__closing {       /* 21495:1133 */
  min-height: calc(44 * var(--ok-scale));
}

.ok-adoption__title {     /* 21495:1156 */
  min-height: calc(120 * var(--ok-scale));
}

.ok-adoption__text {      /* 21495:1157 */
  min-height: calc(220 * var(--ok-scale));
}

.ok-value__text {         /* 21495:1172 */
  min-height: calc(110 * var(--ok-scale));
}

.ok-story__title {        /* 21495:1218 */
  min-height: calc(120 * var(--ok-scale));
}

.ok-story__text {         /* 21495:1219 */
  min-height: calc(198 * var(--ok-scale));
}

.ok-story__closing {      /* 21495:1220 */
  min-height: calc(66 * var(--ok-scale));
}

.ok-banner__text {        /* 21495:1249 */
  min-height: calc(198 * var(--ok-scale));
}

/* ═══ Pill (כפתור) — mobile/button 18 / 1 / 5 ═════════════════════════════ */
/* 21495:1087 and its ten siblings: h 44, padding 8/16, gap 16, radius 500. */
.ok-pill {
  height: calc(44 * var(--ok-scale));
  padding: calc(8 * var(--ok-scale)) calc(16 * var(--ok-scale));
  font-size: calc(18 * var(--ok-type));
  letter-spacing: calc(0.9 * var(--ok-type));
}

/* 21495:1088 — the icon is the tight 9.5 × 19 export. The desktop <img> is a
   different, padded export of the same chevron and cannot be resized into this
   box, so it is replaced by the mobile file. */
.ok-pill__icon,
.ok-pill__icon--thin {
  width: calc(9.5 * var(--ok-scale));
  height: calc(19 * var(--ok-scale));
  background: url("../figma/245bd.svg") no-repeat center / 100% 100%;
}

.ok-pill__icon img {
  display: none;
}

.ok-pill:hover .ok-pill__icon,
.ok-pill:focus-visible .ok-pill__icon {
  filter: brightness(0) invert(1);
}

.ok-pill--bare:hover .ok-pill__icon,
.ok-pill--bare:focus-visible .ok-pill__icon {
  filter: none;
}

/* ═══ Round arrow (חצי קרוסלה) ════════════════════════════════════════════ */
/* 21516:1059 / 21495:1272: 52 circle, outline 0.963, chevron 23.111 × 36.593.
   The ACCENT-filled twin next to it (21516:1063, 21495:1277) is the same
   component's hover state, so only one component is built. */
.ok-arrow {
  width: calc(52 * var(--ok-scale));
  height: calc(52 * var(--ok-scale));
  border-width: calc(0.963 * var(--ok-scale));
}

.ok-arrow img {
  width: calc(23.111 * var(--ok-scale));
  height: calc(36.593 * var(--ok-scale));
}

/* ═══ NAV BAR — 21495:1195, 350 × 70.974 at 20 / 12, over the hero ════════ */
.site-header {
  display: none;
}

.site-navbar {
  position: absolute;
  left: calc(20 * var(--ok-scale));
  top: calc(12 * var(--ok-scale));
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  direction: ltr;
  width: calc(350 * var(--ok-scale));
  padding: calc(10 * var(--ok-scale));
  border: calc(1 * var(--ok-scale)) solid rgba(255, 255, 255, 0.15);
  border-radius: calc(500 * var(--ok-scale));
  background: var(--ok-accent);
}

/* 21495:1196 */
.site-navbar__toggle {
  flex: 0 0 auto;
  width: calc(46 * var(--ok-scale));
  height: calc(46 * var(--ok-scale));
}

.site-navbar__toggle img {
  width: 100%;
  height: 100%;
}

/* 21495:1198 */
.site-navbar__logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: calc(141 * var(--ok-scale));
  height: calc(48.974 * var(--ok-scale));
}

.site-navbar__wordmark {
  width: calc(89.021 * var(--ok-scale));
  height: calc(18.232 * var(--ok-scale));
}

.site-navbar__symbol {
  width: calc(51.935 * var(--ok-scale));
  height: calc(51.252 * var(--ok-scale));
}

/* NOT IN THE FRAME. The frame draws the hamburger (21495:1196) but no open
   panel, so this drop-down is an addition: a button that opens nothing is a
   broken site. It reuses the same navigation labels as the desktop bar and
   carries no geometry claim against the frame. */
.site-navbar__menu {
  position: absolute;
  left: 0;
  top: calc(80 * var(--ok-scale));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(16 * var(--ok-scale));
  width: 100%;
  padding: calc(20 * var(--ok-scale));
  border-radius: calc(28 * var(--ok-scale));
  background: var(--ok-accent);
}

.site-navbar__menu[hidden] {
  display: none;
}

.site-navbar__menu a {
  font-size: calc(18 * var(--ok-type));
  line-height: 1.3;
  color: var(--ok-light);
}

/* ═══ 1 · Hero — 21495:1077, 390 × 920 ═══════════════════════════════════ */
.ok-hero {
  height: calc(920 * var(--ok-scale));
  overflow: clip; /* clipsContent on 21495:1077 */
}

/* 21495:1078 */
.ok-hero__photo {
  left: calc(-84 * var(--ok-scale));
  top: calc(78 * var(--ok-scale));
  width: calc(602.776 * var(--ok-scale));
  height: calc(418 * var(--ok-scale));
}

/* The 179px association seal (21495:849) is not drawn in the mobile frame. */
.ok-hero__seal {
  display: none;
}

/* 21495:1079 */
.ok-hero__col {
  left: calc(51 * var(--ok-scale));
  top: calc(496 * var(--ok-scale));
  width: calc(317 * var(--ok-scale));
  gap: calc(24 * var(--ok-scale));
}

/* 21495:1080 */
.ok-hero__copy {
  gap: calc(22 * var(--ok-scale));
}

/* 21495:1081 — 350 wide inside a 317 column: it reaches 33 further left. */
.ok-hero__headings {
  width: calc(350 * var(--ok-scale));
  gap: calc(8 * var(--ok-scale));
}

/* 21495:1082 */
.ok-hero__line-one-box {
  align-items: flex-start;
  justify-content: flex-end;
  width: calc(310 * var(--ok-scale));
}

/* 21495:1083 — 596 wide inside a 310 box, so it must not be allowed to shrink
   to its flex container. The same holds for 21495:1100, 21495:1218 and every
   other heading the frame lets run past its box. */
.ok-hero__line-one {
  flex: none;
  width: calc(596 * var(--ok-scale));
  font-size: calc(36 * var(--ok-type));
  line-height: 1.1;
}

/* 21495:1084 — mobile/H1 44 / 0.99 / 4 (the frame reports 1.76 on this node). */
.ok-hero__line-two {
  width: calc(286 * var(--ok-scale));
  font-size: calc(44 * var(--ok-type));
  line-height: 0.99;
  letter-spacing: calc(1.76 * var(--ok-type));
}

/* 21495:1085 */
.ok-hero__text {
  width: calc(287 * var(--ok-scale));
  font-size: calc(16 * var(--ok-type));
  line-height: 1.35;
  letter-spacing: 0;
}

/* 21495:1087 is the only CTA in the mobile hero, and the frame gives it the
   default pill skin (fill 200, ACCENT outline) rather than the bare one. The
   second desktop CTA (21495:865, hero.donate) is not drawn on mobile; the
   floating tag 21495:1308 takes its place. */
.ok-hero__cta--discreet {
  background: var(--ok-200);
  border-width: calc(1 * var(--ok-scale));
  border-color: var(--ok-accent);
}

.ok-hero__cta--donate {
  display: none;
}

/* 21495:1308 — the floating donation tag, 103 × 103 at 16 / 801. The export
   positions it absolutely at that coordinate; it carries no sticky behaviour in
   the frame, so none is invented here. */
.ok-hero__tag {
  position: absolute;
  left: calc(16 * var(--ok-scale));
  top: calc(801 * var(--ok-scale));
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: calc(16 * var(--ok-scale));
  width: calc(103 * var(--ok-scale));
  height: calc(103 * var(--ok-scale));
  padding: calc(18 * var(--ok-scale)) calc(8 * var(--ok-scale));
  border: calc(1 * var(--ok-scale)) solid var(--ok-accent);
  border-radius: calc(500 * var(--ok-scale));
  background: var(--ok-accent);
  overflow: clip; /* clipsContent on 21495:1308 */
}

/* 21495:1309 */
.ok-hero__tag-label {
  position: relative;
  width: calc(78 * var(--ok-scale));
  font-size: calc(18 * var(--ok-type));
  line-height: 1;
  letter-spacing: calc(0.9 * var(--ok-type));
  text-align: center;
  color: var(--ok-light);
}

/* 21495:1310 — a rotated vector. The frame's x for a rotated node is the origin
   of the unrotated shape; the export's left/top is the rendered box. */
.ok-hero__tag-curve {
  position: absolute;
  left: calc(-78 * var(--ok-scale));
  top: calc(5 * var(--ok-scale));
  width: calc(185.277 * var(--ok-scale));
  height: calc(136.747 * var(--ok-scale));
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.ok-hero__tag-curve img {
  flex: none;
  width: calc(165.516 * var(--ok-scale));
  height: calc(91.147 * var(--ok-scale));
  transform: rotate(162.48deg) scaleY(-1);
}

/* ═══ 2 · Introduction — 21495:1095, 390 × 920 ═══════════════════════════ */
.ok-intro {
  height: calc(920 * var(--ok-scale));
}

/* clipsContent on 21495:1095; .ok-intro__bg is inset 0 over it. */
/* 21495:1107 */
.ok-intro__photo {
  left: calc(-4.217 * var(--ok-scale));
  top: calc(80.201 * var(--ok-scale));
  width: calc(424.217 * var(--ok-scale));
  height: calc(294.176 * var(--ok-scale));
}

/* 21495:1096 */
.ok-intro__col {
  left: calc(18 * var(--ok-scale));
  top: calc(460 * var(--ok-scale));
  width: calc(350 * var(--ok-scale));
}

/* 21495:1097 — gap 22 between the three copy blocks. The CTA sits one level up
   in the frame (21495:1096, gap 24), which is 2 more than its siblings get. */
.ok-intro__stack {
  gap: calc(22 * var(--ok-scale));
}

.ok-intro__stack > .ok-pill {
  margin-top: calc(2 * var(--ok-scale));
}

/* 21495:1099 */
.ok-intro__title-box {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  width: calc(310 * var(--ok-scale));
}

/* 21495:1100 */
.ok-intro__title {
  flex: none;
  width: calc(323 * var(--ok-scale));
}

/* 21495:1101 / 21495:1102 */
.ok-intro__text,
.ok-intro__closing {
  width: calc(350 * var(--ok-scale));
}

/* ═══ 3 · Impact — 21495:1108, 390 × 920 ═════════════════════════════════ */
.ok-impact {
  height: calc(920 * var(--ok-scale));
}

/* clipsContent on 21495:1108; .ok-impact__bg is inset 0 over it. On mobile the
   year marks are inside the GRAPH group, so they are clipped with everything
   else and the desktop split no longer matters. */

/* 21495:1120 — the frame positions this from its right edge, nowrap. */
.ok-impact__number {
  right: calc(23 * var(--ok-scale));
  top: calc(118 * var(--ok-scale));
  width: auto;
  height: auto;
  font-size: calc(66.576 * var(--ok-type));
}

/* 21495:1116 */
.ok-impact__graph--fill {
  left: calc(-208 * var(--ok-scale));
  top: calc(291 * var(--ok-scale));
  width: calc(721.072 * var(--ok-scale));
  height: calc(525.746 * var(--ok-scale));
}

/* 21495:1117 — img inset -1.04% / -0.47%. */
.ok-impact__graph--line {
  left: calc(-90.969 * var(--ok-scale));
  top: calc(229 * var(--ok-scale));
  width: calc(643.04 * var(--ok-scale));
  height: calc(288.532 * var(--ok-scale));
}

.ok-impact__graph--line .ok-img--mobile {
  position: absolute;
  inset: -1.04% -0.47%;
  width: auto;
  height: auto;
}

/* 21495:1119 */
.ok-impact__text-top {
  right: calc(23 * var(--ok-scale));
  top: calc(45 * var(--ok-scale));
  width: calc(314 * var(--ok-scale));
}

/* 21495:1122 */
.ok-impact__text-mid {
  right: calc(125 * var(--ok-scale));
  top: calc(203 * var(--ok-scale));
  width: calc(245 * var(--ok-scale));
}

/* 21495:1121 */
.ok-impact__number-label {
  right: calc(19.703 * var(--ok-scale));
  top: calc(201 * var(--ok-scale));
  width: calc(79.297 * var(--ok-scale));
  height: calc(35 * var(--ok-scale));
  font-size: calc(32.648 * var(--ok-type));
}

/* 21495:1118 — a zero-width node; the stroke reaches 16 to each side and
   15.09% / 2.83% past the top and bottom of a 106 tall box. */
.ok-impact__marker {
  left: calc(83 * var(--ok-scale));
  top: calc(399 * var(--ok-scale));
  width: 0;
  height: calc(106 * var(--ok-scale));
}

.ok-impact__marker .ok-img--mobile {
  position: absolute;
  left: calc(-16 * var(--ok-scale));
  top: calc(-15.995 * var(--ok-scale));
  width: calc(32 * var(--ok-scale));
  height: calc(124.995 * var(--ok-scale));
}

/* 21495:1123 */
.ok-impact__note {
  left: calc(20 * var(--ok-scale));
  top: calc(603 * var(--ok-scale));
  width: calc(348 * var(--ok-scale));
  gap: calc(14 * var(--ok-scale));
}

/* 21495:1124 */
.ok-impact__note-text {
  width: calc(348 * var(--ok-scale));
}

/* 21495:1125 — mobile/small text 14 / 1.3. */
.ok-impact__footnote {
  font-size: calc(14 * var(--ok-type));
}

/* 21495:1113 / 21495:1114 / 21495:1115 */
.ok-impact__year--current {
  right: calc(275 * var(--ok-scale));
  top: calc(343 * var(--ok-scale));
  font-size: calc(24 * var(--ok-type));
  line-height: 1.3;
}

/* 21495:1114 is the one year label the frame gives an explicit width to. */
.ok-impact__year--next {
  right: calc(152 * var(--ok-scale));
  top: calc(348 * var(--ok-scale));
  width: calc(45 * var(--ok-scale));
  font-size: calc(15.17 * var(--ok-type));
}

.ok-impact__year--after {
  right: calc(22 * var(--ok-scale));
  top: calc(348 * var(--ok-scale));
  font-size: calc(15.17 * var(--ok-type));
}

/* ═══ 4 · What we do — 21495:1126, 390 × 1023 ════════════════════════════ */
/* On mobile this section is a column: the card carousel on top (21516:1004),
   its arrows under it (21516:1058), then the copy (21495:1127). The carousel
   runs HORIZONTALLY here, where the desktop one runs vertically. */
.ok-what {
  height: calc(1023 * var(--ok-scale));
  overflow: clip; /* clipsContent on 21495:1126 */
}

/* The desktop stage is a clipping viewport at a desktop coordinate. On mobile
   the viewport is the carousel itself, so the stage stops being a box and its
   children position against the section. */
.ok-what__stage {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
}

/* 21516:1004 — 531 wide, right edge at 370, so it reaches to -161 and the
   section's own clip cuts it. Here it is the scroll viewport: 350 of content
   width, RTL, so the snapped card sits at 120 … 370 exactly as the frame draws
   it and the next card peeks out at the left edge. */
.ok-what .ok-carousel--vertical {
  left: calc(20 * var(--ok-scale));
  top: calc(72 * var(--ok-scale));
  width: calc(350 * var(--ok-scale));
  height: calc(379 * var(--ok-scale));
}

.ok-what__track {
  flex-direction: row;
  direction: rtl;
  gap: calc(31 * var(--ok-scale));
  overflow-x: auto; /* the scroller — see the note on clipping at the top */
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
}

/* 21516:1005 / 21516:1014 */
.ok-what__card {
  width: calc(250 * var(--ok-scale));
  height: calc(379 * var(--ok-scale));
  border-radius: calc(28 * var(--ok-scale));
  /* overflow: clip stays — clipsContent on 21516:1005 / 21516:1014 */
}

/* 21516:1006 (clipsContent) holding 21516:1007. The intermediate photo frame is
   a wider, taller clip than this one on every side, so it is redundant and the
   image is flattened straight into this box. */
.ok-what__card-media {
  left: calc(-2 * var(--ok-scale));
  top: calc(-12 * var(--ok-scale));
  width: calc(317.512 * var(--ok-scale));
  height: calc(202 * var(--ok-scale));
}

.ok-what__card-media img {
  left: calc(-121.77 * var(--ok-scale));
  top: calc(-239.78 * var(--ok-scale));
  width: calc(531.97 * var(--ok-scale));
  height: calc(664.67 * var(--ok-scale));
}

/* 21516:1010 */
.ok-what__card-veil {
  left: calc(-2.5 * var(--ok-scale));
  top: calc(90 * var(--ok-scale));
  width: calc(331.491 * var(--ok-scale));
  height: calc(163.956 * var(--ok-scale));
}

.ok-what__card-veil .ok-img--mobile {
  flex: none;
  width: calc(317.275 * var(--ok-scale));
  height: calc(104.259 * var(--ok-scale));
  transform: rotate(11.21deg);
}

/* 21516:1011 */
.ok-what__card-copy {
  left: calc(11 * var(--ok-scale));
  right: calc(14 * var(--ok-scale));
  top: calc(228 * var(--ok-scale));
  gap: calc(12 * var(--ok-scale));
}

/* 21516:1012 — mobile/big text 18 / 1.3. */
.ok-what__card-title {
  width: calc(253.44 * var(--ok-scale));
  font-size: calc(18 * var(--ok-type));
  line-height: 1.3;
}

/* 21516:1013 — טקסט קטן ותגיות 16 / 1.5. */
.ok-what__card-text {
  font-size: calc(16 * var(--ok-type));
  line-height: 1.5;
  letter-spacing: 0;
}

/* 21516:1058 — the two arrows, side by side under the carousel. */
.ok-what__arrows {
  left: calc(241 * var(--ok-scale));
  top: calc(486 * var(--ok-scale));
  width: calc(129 * var(--ok-scale));
  height: calc(52 * var(--ok-scale));
  flex-direction: row;
  gap: calc(24 * var(--ok-scale));
}

/* The asset points left. 21516:1059 keeps it, 21516:1063 is turned. */
.ok-what__arrows .ok-arrow--up img {
  transform: none;
}

.ok-what__arrows .ok-arrow--down img {
  transform: rotate(180deg);
}

/* 21495:918, the white fade over the desktop viewport, is not drawn on mobile. */
.ok-what__fade {
  display: none;
}

/* 21495:1127 / 21495:1128 — one flat stack of title, text, closing, gap 22. */
.ok-what__col {
  left: calc(20 * var(--ok-scale));
  top: calc(573 * var(--ok-scale));
  width: calc(350 * var(--ok-scale));
  gap: calc(22 * var(--ok-scale));
}

.ok-what__body {
  display: contents;
}

/* 21495:1131 */
.ok-what__title {
  width: calc(323 * var(--ok-scale));
}

/* 21495:1132 */
.ok-what__text {
  width: calc(350 * var(--ok-scale));
}

/* 21495:1133 — on mobile this run is ACCENT, not the 900 token. */
.ok-what__closing {
  width: calc(350 * var(--ok-scale));
  font-size: calc(16 * var(--ok-type));
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--ok-accent);
}

/* ═══ 5 · Adopting a family — 21495:1151, 390 × 920 ══════════════════════ */
.ok-adoption {
  height: calc(920 * var(--ok-scale));
  overflow: clip; /* clipsContent on 21495:1151 */
}

/* The desktop BG frame is 1201 tall and clips. On mobile the four background
   nodes sit directly on the section, which is what clips, so this wrapper only
   supplies the coordinate space. */
.ok-adoption__bg {
  height: calc(920 * var(--ok-scale));
  overflow: visible;
}

/* 21495:1162 */
.ok-adoption__photo--back {
  left: calc(-1.852 * var(--ok-scale));
  top: calc(-1.539 * var(--ok-scale));
  width: calc(629.852 * var(--ok-scale));
  height: calc(333.297 * var(--ok-scale));
}

/* 21495:1165 */
.ok-adoption__photo--front {
  left: calc(-1.852 * var(--ok-scale));
  top: calc(-1.539 * var(--ok-scale));
  width: calc(629.852 * var(--ok-scale));
  height: calc(245.052 * var(--ok-scale));
}

/* 21495:1163 */
.ok-adoption__scrim {
  left: calc(246.152 * var(--ok-scale));
  top: calc(-1.211 * var(--ok-scale));
  width: calc(381.848 * var(--ok-scale));
  height: calc(332.968 * var(--ok-scale));
}

/* 21495:1164 — the mobile loop is not rotated; the img fills the box and bleeds
   -4.06% / -3.8% / -4.68% / -3.8% past it. */
.ok-adoption__loop {
  left: calc(-114 * var(--ok-scale));
  top: calc(-95.956 * var(--ok-scale));
  width: calc(474.716 * var(--ok-scale));
  height: calc(443.832 * var(--ok-scale));
  display: block;
}

.ok-adoption__loop .ok-img--mobile {
  position: absolute;
  left: -3.8%;
  top: -4.06%;
  width: 107.6%;
  height: 108.74%;
}

/* 21495:1152 */
.ok-adoption__col {
  left: calc(18 * var(--ok-scale));
  top: calc(390 * var(--ok-scale));
  width: calc(350 * var(--ok-scale));
  height: auto;
  gap: calc(22 * var(--ok-scale));
}

.ok-adoption__col > .ok-pill {
  margin-top: calc(2 * var(--ok-scale));
}

/* 21495:1156 */
.ok-adoption__title {
  width: calc(323 * var(--ok-scale));
}

/* 21495:1157 */
.ok-adoption__text {
  width: calc(350 * var(--ok-scale));
}

/* ═══ 6 · What a donation enables — 21495:1166, 390 × 704 ════════════════ */
.ok-value {
  height: calc(704 * var(--ok-scale));
  overflow: clip; /* clipsContent on 21495:1166 */
}

.ok-value__bg {
  top: 0;
  height: calc(704 * var(--ok-scale));
  overflow: visible;
}

/* 21495:1177 — a light gradient on the right, drawn under the photo. It has no
   counterpart in the desktop frame, so it is painted by ::before rather than by
   a node added to the markup for one breakpoint. */
.ok-value__bg::before {
  content: "";
  position: absolute;
  left: calc(246.152 * var(--ok-scale));
  top: calc(-1.211 * var(--ok-scale));
  width: calc(381.848 * var(--ok-scale));
  height: calc(332.968 * var(--ok-scale));
  background: linear-gradient(114.026deg, rgba(250, 250, 254, 0) 12.988%, rgb(250, 250, 254) 94.904%);
}

/* 21495:1178 */
.ok-value__photo {
  left: 0;
  top: calc(103 * var(--ok-scale));
  width: calc(392.428 * var(--ok-scale));
  height: calc(183.133 * var(--ok-scale));
}

/* 21495:1167 */
.ok-value__col {
  left: calc(18 * var(--ok-scale));
  top: calc(327 * var(--ok-scale));
  width: calc(350 * var(--ok-scale));
  transform: none;
  align-items: flex-end;
  gap: calc(22 * var(--ok-scale));
}

.ok-value__col > .ok-pill {
  margin-top: calc(2 * var(--ok-scale));
}

/* 21495:1171 / 21495:1172 — right aligned on mobile, centred on desktop. */
.ok-value__title {
  width: calc(323 * var(--ok-scale));
  text-align: right;
}

.ok-value__text {
  width: calc(350 * var(--ok-scale));
  text-align: right;
}

/* ═══ 7 · Donation amounts — 21495:1179, 390 × 588 ══════════════════════ */
/* The desktop frame draws this as a static row. The mobile frame adds the two
   round arrows (21516:1003) and a 1484 wide track (21495:1184) inside a 350
   box, so on mobile it IS a carousel. */
.ok-amounts {
  height: calc(588 * var(--ok-scale));
}

/* 21495:1180, inside the section's own 10 padding. */
.ok-amounts__col {
  left: calc(20 * var(--ok-scale));
  top: calc(10 * var(--ok-scale));
  width: calc(350 * var(--ok-scale));
  height: calc(528 * var(--ok-scale));
  display: block;
}

/* 21495:1183 — 355 wide in a 350 box, right aligned, and ACCENT throughout. */
.ok-amounts__title {
  position: absolute;
  left: calc(-5 * var(--ok-scale));
  top: 0;
  width: calc(355 * var(--ok-scale));
  text-align: right;
  color: var(--ok-accent);
}

/* 21516:1003 */
.ok-amounts__arrows {
  position: absolute;
  left: calc(221 * var(--ok-scale));
  top: calc(104 * var(--ok-scale));
  display: flex;
  align-items: flex-start;
  gap: calc(24 * var(--ok-scale));
  width: calc(129 * var(--ok-scale));
  height: calc(52 * var(--ok-scale));
}

.ok-amounts__arrows .ok-arrow--next img {
  transform: rotate(180deg);
}

/* 21495:1184 */
.ok-amounts__viewport {
  position: absolute;
  left: 0;
  top: calc(180 * var(--ok-scale));
  width: calc(350 * var(--ok-scale));
  height: calc(280 * var(--ok-scale));
}

/* direction:rtl puts the scroll origin at the right edge, which is where a
   Hebrew carousel has to open. In an rtl row the FIRST item goes to that edge,
   and the markup's first item is "אחר" — the row would open on the last amount.
   `order` turns the sequence round, so the row reads ₪180 · ₪360 · ₪600 · ₪900 ·
   ₪1,800 · אחר from the right, which is the frame's physical order in 21495:1184
   and the desktop row's reading order. flex-direction:row-reverse does the same
   to the paint but moves the scroll origin to the left, so it is not used. */
.ok-amounts__row > .ok-amount:nth-child(1) { order: 6; }
.ok-amounts__row > .ok-amount:nth-child(2) { order: 5; }
.ok-amounts__row > .ok-amount:nth-child(3) { order: 4; }
.ok-amounts__row > .ok-amount:nth-child(4) { order: 3; }
.ok-amounts__row > .ok-amount:nth-child(5) { order: 2; }
.ok-amounts__row > .ok-amount:nth-child(6) { order: 1; }

.ok-amounts__row {
  direction: rtl;
  justify-content: flex-start;
  gap: calc(32 * var(--ok-scale));
  height: 100%;
  overflow-x: auto; /* the scroller — see the note on clipping at the top */
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.ok-amounts__row::-webkit-scrollbar {
  display: none;
}

/* 21495:1185 … 21495:1190 — 220 × 280, radius 30, padding 20, gap 21. */
.ok-amount {
  width: calc(220 * var(--ok-scale));
  scroll-snap-align: start;
}

/* I21495:1186;21052:179 */
.ok-amount__badge {
  font-size: calc(16 * var(--ok-type));
  line-height: 1.35;
  letter-spacing: 0;
}

/* I21495:1186;21031:2687 — mobile/H3 24 / 1.3. */
.ok-amount__title {
  font-size: calc(24 * var(--ok-type));
  line-height: 1.3;
}

/* I21495:1186;21031:2689 */
.ok-amount__text {
  font-size: calc(16 * var(--ok-type));
  line-height: 1.35;
  letter-spacing: 0;
}

/* 21495:1191 / 21495:1192 */
.ok-amounts__col > .ok-pill {
  position: absolute;
  right: 0;
  top: calc(484 * var(--ok-scale));
}

/* ═══ 8 · Impact story — 21495:1213, 390 × 912 ══════════════════════════ */
.ok-story {
  height: calc(912 * var(--ok-scale));
  overflow: clip; /* clipsContent on 21495:1213 */
}

/* 21495:1227, inside the 21495:1226 group that sits at 0 / 0. */
.ok-story__bg {
  left: calc(-9 * var(--ok-scale));
  top: calc(-20 * var(--ok-scale));
  width: calc(399 * var(--ok-scale));
  height: calc(350 * var(--ok-scale));
}

/* 21495:1228 */
.ok-story__photo {
  left: calc(65.436 * var(--ok-scale));
  top: calc(58.568 * var(--ok-scale));
  width: calc(294.94 * var(--ok-scale));
  height: calc(221.29 * var(--ok-scale));
  border-radius: calc(159.128 * var(--ok-scale)) calc(124.38 * var(--ok-scale))
    calc(124.38 * var(--ok-scale)) calc(73.838 * var(--ok-scale));
}

/* 21495:1229 — same shape as the desktop ribbon at 0.3948 of its size, so the
   desktop export is reused; only the box and the inner size change. */
.ok-story__ribbon {
  left: calc(-466.36 * var(--ok-scale));
  top: calc(-56.07 * var(--ok-scale));
  width: calc(863.249 * var(--ok-scale));
  height: calc(544.264 * var(--ok-scale));
}

.ok-story__ribbon img {
  width: calc(331.42 * var(--ok-scale));
  height: calc(802.37 * var(--ok-scale));
}

/* 21495:1214 */
.ok-story__col {
  left: calc(18 * var(--ok-scale));
  top: calc(342 * var(--ok-scale));
  width: calc(350 * var(--ok-scale));
  gap: calc(24 * var(--ok-scale));
}

/* 21495:1215 */
.ok-story__stack {
  gap: calc(22 * var(--ok-scale));
}

/* 21495:1217 — the heading box; the two quote marks are placed against it. */
.ok-story__quote-box {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  width: calc(310 * var(--ok-scale));
  height: auto;
}

/* 21495:1218 */
.ok-story__title {
  position: static;
  flex: none;
  width: calc(323 * var(--ok-scale));
}

/* 21495:1242 — 35.272 × 32.113 at 347 / 331 of the section, i.e. 289 / -11 from
   this box. Same glyph as the desktop opening mark. */
.ok-story__mark--open {
  left: calc(289 * var(--ok-scale));
  top: calc(-11 * var(--ok-scale));
  width: calc(35.272 * var(--ok-scale));
  height: calc(32.113 * var(--ok-scale));
}

/* 21495:1221 — 31.06 × 27.902 at 134 / 98 of the copy stack, i.e. 94 / 98 from
   this box. Same glyph as the desktop closing mark. */
.ok-story__mark--close {
  left: calc(94 * var(--ok-scale));
  top: calc(98 * var(--ok-scale));
  width: calc(31.06 * var(--ok-scale));
  height: calc(27.902 * var(--ok-scale));
}

/* 21495:1219 / 21495:1220 */
.ok-story__text {
  width: calc(350 * var(--ok-scale));
}

.ok-story__closing {
  width: calc(281 * var(--ok-scale));
}

/* ═══ 9 · Trust banner — 21495:1243, 390 × 956 ══════════════════════════ */
/* On mobile the ACCENT fill is the whole section, not a rounded card inside it. */
.ok-banner {
  height: calc(956 * var(--ok-scale));
  background: var(--ok-accent);
  overflow: clip; /* clipsContent on 21495:1243 */
}

.ok-banner__card {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: none;
  overflow: visible;
}

/* 21495:1255 — a 682 circle, centred, hanging below the section's bottom edge
   and cut by the section's clip. */
.ok-banner__photo {
  left: 50%;
  top: calc(606 * var(--ok-scale));
  width: calc(682 * var(--ok-scale));
  height: calc(682 * var(--ok-scale));
  border-radius: 50%;
  transform: translateX(-50%);
  overflow: clip; /* clipsContent on 21495:1255 */
}

/* 21495:1256 flattened: the photo frame plus the image offsets inside it. */
.ok-banner__photo img {
  left: calc(-149.56 * var(--ok-scale));
  top: calc(-19.449 * var(--ok-scale));
  width: calc(774.47 * var(--ok-scale));
  height: calc(437.46 * var(--ok-scale));
}

/* 21495:1244 */
.ok-banner__col {
  left: calc(20 * var(--ok-scale));
  top: calc(72 * var(--ok-scale));
  width: calc(350 * var(--ok-scale));
  gap: calc(22 * var(--ok-scale));
}

.ok-banner__col > .ok-pill {
  margin-top: calc(2 * var(--ok-scale));
}

/* 21495:1248 */
.ok-banner__title {
  width: calc(323 * var(--ok-scale));
}

/* 21495:1249 */
.ok-banner__text {
  width: calc(350 * var(--ok-scale));
}

/* ═══ 10 · How to take part — 21495:1258, 390 × 765 ═════════════════════ */
/* 21495:1271 puts the heading BETWEEN the two arrows on mobile. The arrows are
   left where they are in the markup and simply placed against the section. */
.ok-take {
  height: calc(765 * var(--ok-scale));
  overflow: clip; /* clipsContent on 21495:1258 */
}

/* 21495:1275 */
.ok-take__title {
  left: calc(88.5 * var(--ok-scale));
  right: auto;
  top: calc(150 * var(--ok-scale));
  width: calc(213 * var(--ok-scale));
  text-align: center;
}

.ok-take__stage {
  left: 0;
  top: 0;
  width: 100%;
  height: calc(765 * var(--ok-scale));
  display: block;
  gap: 0;
}

/* 21495:1272 and 21495:1276 */
.ok-take__stage .ok-arrow[data-ok-carousel-prev],
.ok-take__stage .ok-arrow[data-ok-carousel-next] {
  position: absolute;
  top: calc(178 * var(--ok-scale));
}

.ok-take__stage .ok-arrow[data-ok-carousel-prev] {
  left: calc(15 * var(--ok-scale));
}

.ok-take__stage .ok-arrow[data-ok-carousel-next] {
  left: calc(323 * var(--ok-scale));
}

/* The frame OVERLAPS the two cards: 21495:1280 is at 85 … 375 and 21495:1259 at
   16 … 239.86, so 155 of the card behind sits under the snapped one. A scroll-snap
   row cannot overlap its items, and a paint-only offset breaks snapping, because a
   snap area is the TRANSFORMED border box and the transform here depends on which
   card is active — one arrow press then lands between two cards. So below the
   breakpoint this carousel is a deck: the cards are placed at the frame's two
   coordinates and the arrows move an index. It keeps navigation, states, RTL and
   the keyboard; it gives up the swipe, which the frame does not draw either.
   assets/js/carousel.js reads data-ok-carousel-deck for the switch. */
.ok-take__viewport {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(765 * var(--ok-scale));
  overflow: visible; /* the deck does not scroll, so it has nothing to clip */
}

.ok-take__track {
  display: block;
  gap: 0;
  overflow: visible;
  scroll-snap-type: none;
}

.ok-take__card {
  position: absolute;
  display: none;
  width: calc(290 * var(--ok-scale));
  height: calc(342 * var(--ok-scale));
  border-radius: calc(30 * var(--ok-scale));
  transform: none;
  opacity: 1;
}

/* 21495:1280 */
.ok-take__card.is-active {
  display: block;
  left: calc(85 * var(--ok-scale));
  top: calc(273 * var(--ok-scale));
  z-index: 1;
}

/* 21495:1259 — 223.86 × 264 at 16 / 305 and 21% opaque, which is 0.7719 of the
   snapped card on every axis including its 23.158 radius and its 7.719 padding.
   It is drawn by scaling the one measured card from its top-left corner, so this
   layer still gives the card a single size. */
.ok-take__card.is-peek {
  display: block;
  left: calc(16 * var(--ok-scale));
  top: calc(305 * var(--ok-scale));
  z-index: 0;
  transform-origin: left top;
  transform: scale(0.7719);
  opacity: 0.21;
}

/* 21495:1288 (clipsContent) with 21495:1289 flattened into it. */
.ok-take__card-media {
  left: calc(-67 * var(--ok-scale));
  top: calc(-257 * var(--ok-scale));
  width: calc(585 * var(--ok-scale));
  height: calc(467 * var(--ok-scale));
}

.ok-take__card-media img {
  left: calc(18 * var(--ok-scale));
  top: calc(118.1 * var(--ok-scale));
  width: calc(449.07 * var(--ok-scale));
  height: calc(559.72 * var(--ok-scale));
}

/* 21495:1290 — the inner shape is the same size as the desktop one; only the
   box and the angle change. */
.ok-take__card-veil {
  left: calc(-382.77 * var(--ok-scale));
  top: calc(-81.58 * var(--ok-scale));
  width: calc(703.543 * var(--ok-scale));
  height: calc(565.48 * var(--ok-scale));
}

.ok-take__card-veil .ok-img--mobile {
  flex: none;
  width: calc(622.986 * var(--ok-scale));
  height: calc(327.892 * var(--ok-scale));
  transform: rotate(154.32deg) scaleY(-1);
}

/* 21495:1281 */
.ok-take__card-foot {
  left: auto;
  right: calc(10 * var(--ok-scale));
  bottom: calc(10 * var(--ok-scale));
  width: calc(261 * var(--ok-scale));
}

/* 21495:1282 */
.ok-arrow--card {
  width: calc(42.221 * var(--ok-scale));
  height: calc(42.221 * var(--ok-scale));
}

.ok-arrow--card img {
  width: calc(18.765 * var(--ok-scale));
  height: calc(29.711 * var(--ok-scale));
}

/* 21495:1285 */
.ok-take__card-copy {
  width: calc(190.952 * var(--ok-scale));
  height: auto;
  gap: calc(1.919 * var(--ok-scale));
}

/* 21495:1286 */
.ok-take__card-title {
  font-size: calc(23.029 * var(--ok-type));
  line-height: 1.3;
}

/* 21495:1287 */
.ok-take__card-text {
  width: calc(188.074 * var(--ok-scale));
  font-size: calc(15.353 * var(--ok-type));
  line-height: 1.35;
  letter-spacing: 0;
}

/* ═══ 11 · Questions and answers — 21495:1291, 390 × 732 ════════════════ */
.ok-faq {
  height: calc(732 * var(--ok-scale));
}

/* 21495:1292 */
.ok-faq__col {
  left: calc(18 * var(--ok-scale));
  top: calc(28 * var(--ok-scale));
  width: calc(350 * var(--ok-scale));
  height: auto;
  align-items: flex-end;
  justify-content: flex-start;
  gap: calc(24 * var(--ok-scale));
}

/* 21495:1294 */
.ok-faq__title {
  width: calc(323 * var(--ok-scale));
  text-align: right;
}

/* 21495:1295 — one column of four, gap 32. The two desktop columns stop being
   boxes so their items become items of this one stack. */
.ok-faq__columns {
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
  height: auto;
  gap: calc(32 * var(--ok-scale));
}

.ok-faq__column {
  display: contents;
}

/* The mobile order is 21495:1296 … 21495:1305, which reads across the desktop
   grid rather than down it: left column first item, right column first item,
   left column second, right column second. */
.ok-faq__column:first-child .ok-faq__item:first-child {
  order: 1;
}

.ok-faq__column:last-child .ok-faq__item:first-child {
  order: 2;
}

.ok-faq__column:first-child .ok-faq__item:last-child {
  order: 3;
}

.ok-faq__column:last-child .ok-faq__item:last-child {
  order: 4;
}

.ok-faq__item {
  width: 100%;
  min-height: calc(100 * var(--ok-scale)); /* 21495:1296 / 21495:1299 / 21495:1302 */
  gap: calc(12 * var(--ok-scale));
}

.ok-faq__column:last-child .ok-faq__item:last-child {
  min-height: calc(122 * var(--ok-scale)); /* 21495:1305 */
}

.ok-faq__question,
.ok-faq__answer {
  width: 100%;
  font-size: calc(16 * var(--ok-type));
  line-height: 1.35;
  letter-spacing: 0;
}

/* ═══ Footer — 21534:1096, 390 × 996.4288940429688 ══════════════════════ */
/* The desktop footer is absolutely positioned. The mobile one is a column with
   gap 28 and padding 56 / 20 / 40, so every block is returned to the flow and
   ordered as the frame stacks it.

   The height is the frame's own 996.4288940429688 rather than whatever that flow
   adds up to, because the flow lands 1.84 over it: Figma measures the three-line
   "about" paragraph (21526:1044) at 52.6 and the browser at 54.56, which is a
   text-metric difference and not a layout one. The 1.84 is absorbed by the 40 of
   bottom padding, so nothing drawn is lost and the page ends exactly on the
   frame's 10356.4289. */
.site-footer {
  height: calc(996.4288940429688 * var(--ok-scale));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(28 * var(--ok-scale));
  padding: calc(56 * var(--ok-scale)) calc(20 * var(--ok-scale)) calc(40 * var(--ok-scale));
  overflow-clip-margin: calc(470 * var(--ok-scale));
}

/* The pinned height is the frame's closed state. Opening one of the three
   collapsed columns adds its links, and with overflow:clip above they would be
   cut, so an open accordion hands the height back to the content. */
.site-footer:has(.site-footer__col.is-open) {
  height: auto;
}

/* 21538:1697 — same shape as the desktop ribbon at 0.5074 of its size. */
.site-footer__ribbon {
  left: calc(-211 * var(--ok-scale));
  top: calc(-422 * var(--ok-scale));
  width: calc(1061.879 * var(--ok-scale));
  height: calc(909.344 * var(--ok-scale));
}

.site-footer__ribbon img {
  width: calc(912.507 * var(--ok-scale));
  height: calc(545.909 * var(--ok-scale));
}

/* 21526:1028 */
.site-footer__logo {
  position: static;
  order: 1;
  width: calc(156.705 * var(--ok-scale));
  height: calc(54.429 * var(--ok-scale));
}

.site-footer__logo img:first-child {
  width: calc(98.937 * var(--ok-scale));
  height: calc(20.262 * var(--ok-scale));
}

.site-footer__logo img:last-child {
  width: calc(57.72 * var(--ok-scale));
  height: calc(56.96 * var(--ok-scale));
}

/* 21526:1043 / 21526:1044 */
.site-footer__about {
  position: static;
  order: 2;
  width: 100%;
  font-size: calc(14 * var(--ok-type));
  line-height: 1.3;
}

/* 21526:1045 */
.site-footer__social {
  position: static;
  order: 3;
  gap: calc(13 * var(--ok-scale));
}

/* 21526:1046 */
.site-footer__social-title {
  font-size: calc(14 * var(--ok-type));
  line-height: 1.3;
}

/* 21526:1058 */
.site-footer__columns {
  position: static;
  order: 4;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
  gap: 0;
  overflow: clip; /* clipsContent on 21526:1058 */
}

/* 21534:1032 and its three siblings: full width, padding 25 top and bottom, a
   27%-white rule under each. */
.site-footer__col {
  width: 100%;
  padding: calc(25 * var(--ok-scale)) 0;
  border-bottom: calc(1 * var(--ok-scale)) solid rgba(255, 255, 255, 0.27);
  gap: calc(4 * var(--ok-scale));
}

.site-footer__col--nav {
  width: 100%;
}

/* 21534:1034 — טקסט קטן ותגיות at 16 / 1.35 on mobile. */
.site-footer__col p {
  font-size: calc(16 * var(--ok-type));
  line-height: 1.35;
  letter-spacing: 0;
}

/* 21534:1043 — the head row: the title on the right, a down chevron on the
   left. 21534:1080 is an 11 × 20.623 angle-left turned -90°, inside a
   20.623 × 11 slot; the margins turn the 11 × 20.623 layout box into that slot
   so the turned glyph is centred on it. */
.site-footer__col-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: calc(18 * var(--ok-type)) !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-align: right;
}

.site-footer__col-title::before {
  content: "";
  flex: 0 0 auto;
  width: calc(11 * var(--ok-scale));
  height: calc(20.623 * var(--ok-scale));
  margin: calc(-4.8115 * var(--ok-scale)) calc(4.8115 * var(--ok-scale));
  background: url("../figma/972a4.svg") no-repeat center / 100% 100%;
  transform: rotate(-90deg);
}

/* The frame stacks the columns פרטי קשר, דרכי פעולה, ניווט, משפטי; the markup
   order is contact, legal, actions, navigation. */
.site-footer__columns > *:nth-child(1) {
  order: 1;
}

.site-footer__columns > *:nth-child(2) {
  order: 4;
}

.site-footer__columns > *:nth-child(3) {
  order: 2;
}

.site-footer__columns > *:nth-child(4) {
  order: 3;
}

/* The frame draws פרטי קשר open and the other three as a head row only, which
   is an accordion. Collapsed is the default so it is right without script;
   assets/js/footer-accordion.js adds the toggle. */
.site-footer__col p:not(.site-footer__col-title) {
  display: none;
}

.site-footer__col:first-child p,
.site-footer__col.is-open p {
  display: block;
}

/* 21526:1086 / 21526:1087 — fill white, h 54, padding 10 / 20, icon 24 × 38. */
.site-footer__brand {
  position: static;
  order: 5;
}

.site-footer .ok-pill--light {
  height: calc(54 * var(--ok-scale));
  padding: calc(10 * var(--ok-scale)) calc(20 * var(--ok-scale));
}

.site-footer .ok-pill--light .ok-pill__icon {
  width: calc(24 * var(--ok-scale));
  height: calc(38 * var(--ok-scale));
  background-image: url("../figma/53c3d.svg");
}

/* 21526:1091 — 1px of 25% white, filled rather than a border. */
.site-footer__divider {
  position: static;
  order: 6;
  width: 100%;
  height: calc(1 * var(--ok-scale));
  border-top: 0;
  background: rgba(255, 255, 255, 0.25);
}

/* 21526:1092 — a column of three, gap 24, reading copyright, mission, credit.
   The markup is the desktop row, whose physical order is the reverse of that. */
.site-footer__credit {
  position: static;
  order: 7;
  flex-direction: column-reverse;
  align-items: flex-end;
  justify-content: flex-start;
  width: 100%;
  gap: calc(24 * var(--ok-scale));
  font-size: calc(14 * var(--ok-type));
  line-height: 1.3;
  white-space: normal;
}

.site-footer__credit p {
  width: 100%;
  text-align: right;
}

}