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

   Every length here is a number read off the Figma frame, written as
   calc(N * var(--ok-scale)); --ok-scale is 100vw/1920 on desktop and 100vw/390
   on mobile, so a figure is always figma_px / base * 100vw.

   Desktop source: 21495:845, 1920×10322.
   Mobile source:  21495:1076, 390×10356.

   Clipping: overflow is set only where the matching Figma frame has
   clipsContent. Every one of those is named in a comment next to it.
   ────────────────────────────────────────────────────────────────────────── */

/* RTL rule. The document is dir="rtl", which is correct for the language, but a
   flex row that inherits direction:rtl puts its first child on the RIGHT — so
   every row measured from the frame comes out mirrored. Layout containers are
   therefore forced back to ltr, DOM order stays the frame's physical left-to-right
   order, and direction:rtl is re-established only on the text itself, which always
   carries dir="rtl". This is the single rule that keeps the geometry honest. */
.site-header,
.site-footer,
.ok-section,
.ok-page {
  direction: ltr;
}

[dir="rtl"] {
  direction: rtl;
}

/* The carousel tracks are the one exception to the rule above: a horizontal
   scroller has to be RTL so the scroll starts at the right edge. direction is
   inherited, though, so it reaches inside every card on the track and mirrors
   the card's own rows. The cards are therefore pulled back to ltr, exactly as
   the sections are, and their text returns to rtl through the rule above.
   Measured against 21495:1032: the action sits at x=0 of Frame 612 and the copy
   at x=117.345, which is what the frame draws. */
.ok-what__card,
.ok-amount,
.ok-take__card {
  direction: ltr;
}

/* Each section is its own coordinate space, the exact height of its frame. */
/* No isolation here on purpose. Several photos are multiply-blended and have a
   white studio background; they are meant to blend against the page colour. An
   isolated section gives them a transparent backdrop instead, and the white box
   of the photo shows up as a pale rectangle over the page. */
.ok-section {
  position: relative;
  width: 100%;
}

/* Default an image to its box. :where() keeps this at zero specificity so any
   rule below that gives an image its own measured size still wins — without it,
   `.ok-section img` beat every single-class size rule and blew images up. */
.ok-section :where(img) {
  width: 100%;
  height: 100%;
}

/* ═══ Header — 21495:981, 1920×90, over the hero ══════════════════════════ */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: calc(90 * var(--ok-scale));
  padding: 0 calc(97 * var(--ok-scale));
}

.site-header__donate {
  width: calc(212 * var(--ok-scale));
}

/* 21495:986 — the menu reads right to left, so the first link is on the right. */
.site-nav {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: calc(32 * var(--ok-scale));
  padding: calc(10 * var(--ok-scale));
  height: calc(40 * var(--ok-scale));
}

.site-nav__link {
  font-size: calc(20 * var(--ok-scale));
  line-height: 1;
  color: var(--ok-ink-header);
  white-space: nowrap;
  transition: color 160ms ease;
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: var(--ok-accent);
  outline: none;
}

.site-logo {
  display: flex;
  align-items: center;
  width: calc(141 * var(--ok-scale));
  height: calc(48.974 * var(--ok-scale));
}

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

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

/* ═══ 1 · Hero — 21495:846, 1920×920 ══════════════════════════════════════ */
.ok-hero {
  height: calc(920 * var(--ok-scale));
}

.ok-hero__bg {
  position: absolute;
  inset: 0;
}

/* 21495:848 — clipsContent is set on this frame in Figma, so this clip is the
   frame's own, not ours. */
.ok-hero__photo {
  position: absolute;
  left: calc(-105 * var(--ok-scale));
  top: 0;
  width: calc(1448 * var(--ok-scale));
  height: calc(1004 * var(--ok-scale));
  overflow: hidden;
  mix-blend-mode: multiply;
}

.ok-hero__photo img {
  position: absolute;
  left: -4.11%;
  top: -0.04%;
  width: 104.11%;
  height: 100.09%;
}

.ok-hero__seal {
  position: absolute;
  left: calc(96 * var(--ok-scale));
  top: calc(686 * var(--ok-scale));
  width: calc(179 * var(--ok-scale));
  height: calc(179 * var(--ok-scale));
  border: calc(1 * var(--ok-scale)) solid var(--ok-400);
  border-radius: calc(350.98 * var(--ok-scale));
  background: var(--ok-200);
}

.ok-hero__seal-ring {
  position: absolute;
  left: calc(21.41 * var(--ok-scale));
  top: calc(21.41 * var(--ok-scale));
  width: calc(136.18 * var(--ok-scale));
  height: calc(136.18 * var(--ok-scale));
  animation: ok-seal-spin 24s linear infinite;
}

@keyframes ok-seal-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ok-hero__seal-ring {
    animation: none;
  }
}

.ok-hero__seal-mark {
  position: absolute;
  left: calc(50% - (0.67 * var(--ok-scale)));
  top: calc(50% + (3.64 * var(--ok-scale)));
  width: calc(80.08 * var(--ok-scale));
  height: calc(84.492 * var(--ok-scale));
  transform: translate(-50%, -50%);
}

.ok-hero__col {
  position: absolute;
  left: calc(1021 * var(--ok-scale));
  top: calc(355 * var(--ok-scale));
  width: calc(803 * var(--ok-scale));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(40 * var(--ok-scale));
}

.ok-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(28 * var(--ok-scale));
  width: 100%;
}

/* 21495:856 is 814 wide inside an 803 column: it reaches 11px further left. */
.ok-hero__headings {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(8 * var(--ok-scale));
  width: calc(814 * var(--ok-scale));
}

.ok-hero__line-one-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ok-hero__line-one {
  width: calc(596 * var(--ok-scale));
  font-size: calc(70 * var(--ok-scale));
  line-height: 1;
  text-align: right;
  color: var(--ok-ink);
}

.ok-hero__line-two {
  margin: 0;
  width: 100%;
  font-size: calc(84 * var(--ok-scale));
  font-weight: 400;
  line-height: 0.99;
  letter-spacing: calc(3.36 * var(--ok-scale));
  text-align: right;
  color: var(--ok-accent);
}

.ok-hero__text {
  width: 100%;
  font-size: calc(18 * var(--ok-scale));
  line-height: 1.3;
  letter-spacing: calc(0.36 * var(--ok-scale));
  text-align: right;
  color: var(--ok-ink);
}

/* 21495:861 — DOM order is the frame's physical order: the bare link on the
   left, the filled pill on the right. */
.ok-hero__actions {
  display: flex;
  align-items: flex-start;
  gap: calc(39 * var(--ok-scale));
}

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

/* 21495:869 has clipsContent. */
.ok-intro__bg {
  position: absolute;
  inset: 0;
  overflow: clip;
}

.ok-intro__photo {
  position: absolute;
  left: calc(-44 * var(--ok-scale));
  top: calc(91 * var(--ok-scale));
  width: calc(1159.407 * var(--ok-scale));
  height: calc(804 * var(--ok-scale));
  overflow: hidden; /* clipsContent on 21495:870 */
  mix-blend-mode: multiply;
}

.ok-intro__photo img {
  position: absolute;
  left: -4.11%;
  top: -0.04%;
  width: 104.11%;
  height: 100.09%;
}

.ok-intro__col {
  position: absolute;
  left: calc(1108 * var(--ok-scale));
  top: calc(257 * var(--ok-scale));
  width: calc(716 * var(--ok-scale));
}

.ok-intro__stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(28 * var(--ok-scale));
  width: 100%;
}

.ok-intro__title-box {
  width: 100%;
}

.ok-intro__title {
  width: calc(716 * var(--ok-scale));
}

.ok-intro__text {
  width: calc(638 * var(--ok-scale));
}

.ok-intro__closing {
  width: calc(614 * var(--ok-scale));
}

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

/* 21495:882 has clipsContent; the year labels sit outside it. */
.ok-impact__bg {
  position: absolute;
  inset: 0;
  overflow: clip;
}

/* Nodes the frame positions from their right edge keep a physical `right`. */
.ok-impact__number {
  position: absolute;
  right: calc(532 * var(--ok-scale));
  top: calc(253 * var(--ok-scale));
  width: calc(1452 * var(--ok-scale));
  height: calc(195.941 * var(--ok-scale));
  font-size: calc(182.944 * var(--ok-scale));
  font-weight: 700;
  line-height: 1;
  text-align: right;
  color: var(--ok-accent);
}

.ok-impact__graph {
  position: absolute;
  pointer-events: none;
}

.ok-impact__graph--fill {
  left: calc(-155 * var(--ok-scale));
  top: calc(334 * var(--ok-scale));
  width: calc(2142.54 * var(--ok-scale));
  height: calc(529.5 * var(--ok-scale));
}

.ok-impact__graph--line {
  left: calc(-155 * var(--ok-scale));
  top: calc(272 * var(--ok-scale));
  width: calc(2181.5 * var(--ok-scale));
  height: calc(592.5 * var(--ok-scale));
}

.ok-impact__graph--line img {
  position: absolute;
  inset: -0.68% -0.18%;
  width: auto;
  height: auto;
}

.ok-impact__text-top {
  position: absolute;
  right: calc(537 * var(--ok-scale));
  top: calc(199 * var(--ok-scale));
  width: calc(551 * var(--ok-scale));
  color: var(--ok-ink);
}

.ok-impact__text-mid {
  position: absolute;
  right: calc(698 * var(--ok-scale));
  top: calc(466 * var(--ok-scale));
  width: calc(392 * var(--ok-scale));
  color: var(--ok-ink);
}

.ok-impact__number-label {
  position: absolute;
  right: calc(537 * var(--ok-scale));
  top: calc(455 * var(--ok-scale));
  width: calc(145 * var(--ok-scale));
  height: calc(64 * var(--ok-scale));
  font-size: calc(59.7 * var(--ok-scale));
  font-weight: 700;
  line-height: 1;
  text-align: right;
  color: var(--ok-accent);
}

/* 21495:889 is a zero-width node whose stroke reaches 21.33 to each side. */
.ok-impact__marker {
  position: absolute;
  left: calc(1609 * var(--ok-scale));
  top: calc(295 * var(--ok-scale));
  width: 0;
  height: calc(250 * var(--ok-scale));
}

.ok-impact__marker img {
  position: absolute;
  left: calc(-21.33 * var(--ok-scale));
  top: calc(-21.325 * var(--ok-scale));
  width: calc(42.66 * var(--ok-scale));
  height: calc(275.325 * var(--ok-scale));
}

.ok-impact__note {
  position: absolute;
  left: calc(654 * var(--ok-scale));
  top: calc(638 * var(--ok-scale));
  width: calc(729 * var(--ok-scale));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(14 * var(--ok-scale));
}

.ok-impact__note-text {
  width: calc(645 * var(--ok-scale));
  color: var(--ok-ink);
}

.ok-impact__footnote {
  width: 100%;
  font-size: calc(16 * var(--ok-scale));
  line-height: 1.3;
  text-align: right;
  color: var(--ok-ink);
  opacity: 0.7;
}

.ok-impact__year {
  position: absolute;
  font-weight: 700;
  line-height: 1.15;
  text-align: right;
  white-space: nowrap;
  color: var(--ok-accent);
}

.ok-impact__year--current {
  right: calc(265 * var(--ok-scale));
  top: calc(194 * var(--ok-scale));
  font-size: calc(40 * var(--ok-scale));
}

.ok-impact__year--next {
  right: calc(143 * var(--ok-scale));
  top: calc(205.979 * var(--ok-scale));
  font-size: calc(19.167 * var(--ok-scale));
  opacity: 0.38;
}

.ok-impact__year--after {
  right: calc(40 * var(--ok-scale));
  top: calc(205.979 * var(--ok-scale));
  font-size: calc(19.167 * var(--ok-scale));
  opacity: 0.38;
}

/* ═══ 4 · What we do — 21495:896, 1920×920 ════════════════════════════════ */
.ok-what {
  height: calc(920 * var(--ok-scale));
}

.ok-what__col {
  position: absolute;
  left: calc(983 * var(--ok-scale));
  top: calc(290 * var(--ok-scale));
  width: calc(844 * var(--ok-scale));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(32 * var(--ok-scale));
}

.ok-what__title {
  width: calc(844 * var(--ok-scale));
}

.ok-what__body {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(32 * var(--ok-scale));
  width: calc(586 * var(--ok-scale));
}

.ok-what__text {
  width: 100%;
  color: var(--ok-ink);
}

.ok-what__closing {
  width: calc(441 * var(--ok-scale));
  font-size: calc(18 * var(--ok-scale));
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: calc(0.36 * var(--ok-scale));
  text-align: right;
  color: var(--ok-900);
}

/* 21495:903 has clipsContent — this is the carousel viewport. */
.ok-what__stage {
  position: absolute;
  left: calc(51 * var(--ok-scale));
  top: calc(67 * var(--ok-scale));
  width: calc(929 * var(--ok-scale));
  height: calc(779 * var(--ok-scale));
  overflow: clip;
}

.ok-what .ok-carousel--vertical {
  position: absolute;
  left: calc(192 * var(--ok-scale));
  top: 0;
  width: calc(545 * var(--ok-scale));
  height: calc(779 * var(--ok-scale));
}

.ok-what__track {
  display: flex;
  flex-direction: column;
  gap: calc(53 * var(--ok-scale));
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}

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

.ok-what__card {
  position: relative;
  flex: 0 0 auto;
  width: calc(545 * var(--ok-scale));
  height: calc(525 * var(--ok-scale));
  border-radius: calc(28 * var(--ok-scale));
  background: var(--ok-accent);
  overflow: clip; /* clipsContent on 21495:904 / 21495:911 */
  scroll-snap-align: start;
}

/* 21495:912 — the photo band is 348 tall at the top of the card. */
.ok-what__card-media {
  position: absolute;
  left: calc(-2 * var(--ok-scale));
  top: 0;
  width: calc(547 * var(--ok-scale));
  height: calc(348 * var(--ok-scale));
  overflow: clip;
}

.ok-what__card-media img {
  position: absolute;
  left: calc(-11 * var(--ok-scale));
  top: 0;
  width: calc(563 * var(--ok-scale));
  height: calc(661 * var(--ok-scale));
  object-fit: cover;
}

.ok-what__card-veil {
  position: absolute;
  left: calc(1.5 * var(--ok-scale));
  top: calc(212.57 * var(--ok-scale));
  width: calc(548.14 * var(--ok-scale));
  height: calc(232.234 * var(--ok-scale));
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

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

.ok-what__card-copy {
  position: absolute;
  left: calc(26 * var(--ok-scale));
  right: calc(26 * var(--ok-scale));
  top: calc(382 * var(--ok-scale));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(12 * var(--ok-scale));
}

.ok-what__card-title {
  width: calc(253.44 * var(--ok-scale));
  font-size: calc(24 * var(--ok-scale));
  font-weight: 700;
  line-height: 1.2;
  text-align: right;
  color: var(--ok-light);
}

.ok-what__card-text {
  width: 100%;
  font-size: calc(18 * var(--ok-scale));
  line-height: 1.3;
  letter-spacing: calc(0.36 * var(--ok-scale));
  text-align: right;
  color: var(--ok-light);
}

/* 21495:918 — a white fade over the top and the bottom of the viewport. */
.ok-what__fade {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(930 * var(--ok-scale));
  height: calc(779 * var(--ok-scale));
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgb(255, 255, 255) 0%,
    rgba(255, 255, 255, 0) 20.192%,
    rgba(255, 255, 255, 0) 83.173%,
    rgb(255, 255, 255) 100%
  );
}

/* 21495:919 — 70 wide, 190 tall: two circles with a 50 gap, stacked.
   The frame data says x 117 and the export says 47. The frame's x for a rotated
   node is the origin of the UNROTATED row, so it is 70 off here; the rendered
   Figma image puts the arrows at 96, which is 51 + 47. The export wins. */
.ok-what__arrows {
  position: absolute;
  left: calc(47 * var(--ok-scale));
  top: calc(248 * var(--ok-scale));
  width: calc(70 * var(--ok-scale));
  height: calc(190 * var(--ok-scale));
  display: flex;
  flex-direction: column;
  gap: calc(50 * var(--ok-scale));
  z-index: 2;
}

/* ═══ 5 · Adopting a family — 21495:926, 1920×1016 ════════════════════════ */
.ok-adoption {
  height: calc(1016 * var(--ok-scale));
}

/* 21495:927 is 1201 tall inside a 1016 section and has clipsContent. */
.ok-adoption__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(1201 * var(--ok-scale));
  overflow: clip;
}

.ok-adoption__photo {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  overflow: hidden; /* clipsContent on 21495:928 / 21495:931 */
}

.ok-adoption__photo--back {
  height: calc(1016 * var(--ok-scale));
}

.ok-adoption__photo--back img {
  position: absolute;
  left: -0.02%;
  top: 0;
  width: 100.04%;
  height: 106.4%;
}

.ok-adoption__photo--front {
  height: calc(747 * var(--ok-scale));
}

.ok-adoption__photo--front img {
  position: absolute;
  left: -0.02%;
  top: 0;
  width: 100.04%;
  height: 144.71%;
}

.ok-adoption__scrim {
  position: absolute;
  left: calc(756 * var(--ok-scale));
  top: calc(1 * var(--ok-scale));
  width: calc(1164 * var(--ok-scale));
  height: calc(1015 * var(--ok-scale));
  background: linear-gradient(114.026deg, rgba(250, 250, 254, 0) 12.988%, rgb(250, 250, 254) 94.904%);
  z-index: 1;
}

.ok-adoption__loop {
  position: absolute;
  left: calc(-341.866 * var(--ok-scale));
  top: calc(-287.95 * var(--ok-scale));
  width: calc(1447.093 * var(--ok-scale));
  height: calc(1352.949 * var(--ok-scale));
  z-index: 1;
  pointer-events: none;
}

.ok-adoption__photo--front {
  z-index: 2;
}

.ok-adoption__col {
  position: absolute;
  left: calc(895 * var(--ok-scale));
  top: calc(246 * var(--ok-scale));
  width: calc(930 * var(--ok-scale));
  height: calc(523 * var(--ok-scale));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(46 * var(--ok-scale));
}

.ok-adoption__title {
  width: calc(614 * var(--ok-scale));
}

.ok-adoption__text {
  width: calc(650 * var(--ok-scale));
  color: var(--ok-ink);
}

/* ═══ 6 · What a donation enables — 21495:939, 1920×1252 ══════════════════ */
.ok-value {
  height: calc(1252 * var(--ok-scale));
}

/* 21495:940 has clipsContent; 21495:942 is hidden in the frame and not built. */
.ok-value__bg {
  position: absolute;
  left: 0;
  top: calc(92 * var(--ok-scale));
  width: 100%;
  height: calc(1305 * var(--ok-scale));
  overflow: clip;
}

.ok-value__photo {
  position: absolute;
  left: 0;
  top: calc(445 * var(--ok-scale));
  width: 100%;
  height: calc(896 * var(--ok-scale));
  overflow: hidden; /* clipsContent on 21495:941 */
  mix-blend-mode: multiply;
}

.ok-value__photo img {
  position: absolute;
  left: 0;
  top: -90.91%;
  width: 100%;
  height: 267.76%;
}

.ok-value__col {
  position: absolute;
  left: 50%;
  top: calc(171 * var(--ok-scale));
  width: calc(930 * var(--ok-scale));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(30 * var(--ok-scale));
}

.ok-value__title {
  width: calc(607 * var(--ok-scale));
  text-align: center;
}

.ok-value__text {
  width: calc(738 * var(--ok-scale));
  text-align: center;
  color: var(--ok-ink);
}

/* ═══ 7 · Donation amounts — 21495:950, 1920×782 ══════════════════════════ */
.ok-amounts {
  height: calc(782 * var(--ok-scale));
}

.ok-amounts__col {
  position: absolute;
  left: calc(98 * var(--ok-scale));
  top: calc(125 * var(--ok-scale));
  width: calc(1726 * var(--ok-scale));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(80 * var(--ok-scale));
}

.ok-amounts__title {
  width: 100%;
  text-align: center;
}

.ok-amounts__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(32 * var(--ok-scale));
  width: 100%;
}

/* 21032:2752 — card 261×280, radius 30, padding 20, gap 21. clipsContent. */
.ok-amount {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: calc(21 * var(--ok-scale));
  width: calc(261 * var(--ok-scale));
  height: calc(280 * var(--ok-scale));
  padding: calc(20 * var(--ok-scale));
  border-radius: calc(30 * var(--ok-scale));
  overflow: clip;
}

/* The tint ladder, by position, is part of the design. */
.ok-amount--soft {
  background: rgba(213, 214, 230, 0.2);
}

.ok-amount--soft-mid {
  background: rgba(213, 214, 230, 0.4);
}

.ok-amount--soft-strong {
  background: rgba(213, 214, 230, 0.6);
}

.ok-amount--solid {
  background: #d5d6e6;
}

.ok-amount--accent {
  background: var(--ok-accent);
}

.ok-amount__curve {
  position: absolute;
  left: calc(-51 * var(--ok-scale));
  top: calc(19 * var(--ok-scale));
  width: calc(341.526 * var(--ok-scale));
  height: calc(252.068 * var(--ok-scale));
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.ok-amount__curve img {
  flex: none;
  width: calc(305.1 * var(--ok-scale));
  height: calc(168.014 * var(--ok-scale));
  transform: rotate(162.48deg) scaleY(-1);
}

.ok-amount__badge {
  position: relative;
  padding: calc(2 * var(--ok-scale)) calc(10 * var(--ok-scale));
  border: calc(1 * var(--ok-scale)) solid var(--ok-ink);
  border-radius: calc(36 * var(--ok-scale));
  font-size: calc(18 * var(--ok-scale));
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: calc(0.36 * var(--ok-scale));
  white-space: nowrap;
  color: var(--ok-ink);
}

.ok-amount--accent .ok-amount__badge {
  border-color: var(--ok-light);
  color: var(--ok-light);
}

.ok-amount__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: calc(10 * var(--ok-scale));
  width: 100%;
  height: calc(193 * var(--ok-scale));
}

.ok-amount__title {
  width: 100%;
  font-size: calc(32 * var(--ok-scale));
  font-weight: 700;
  line-height: 1.15;
  text-align: right;
  color: var(--ok-accent);
}

.ok-amount__text {
  width: 100%;
  font-size: calc(18 * var(--ok-scale));
  line-height: 1.3;
  letter-spacing: calc(0.36 * var(--ok-scale));
  text-align: right;
  color: var(--ok-ink);
}

.ok-amount--accent .ok-amount__title,
.ok-amount--accent .ok-amount__text {
  color: var(--ok-light);
}

/* ═══ 8 · Impact story — 21495:965, 1920×748 ══════════════════════════════ */
.ok-story {
  height: calc(748 * var(--ok-scale));
}

/* 21495:966 does NOT clip: the ribbon is meant to run past the section. */
.ok-story__bg {
  position: absolute;
  left: 0;
  top: calc(-64 * var(--ok-scale));
  width: 100%;
  height: calc(886 * var(--ok-scale));
}

.ok-story__photo {
  position: absolute;
  left: calc(198.72 * var(--ok-scale));
  top: calc(148.326 * var(--ok-scale));
  width: calc(746.952 * var(--ok-scale));
  height: calc(560.429 * var(--ok-scale));
  border-radius: calc(403 * var(--ok-scale)) calc(315 * var(--ok-scale)) calc(315 * var(--ok-scale)) calc(187 * var(--ok-scale));
  overflow: hidden; /* clipsContent on 21495:967 */
  transform: rotate(0.28deg);
}

.ok-story__photo img {
  position: absolute;
  left: 1.55%;
  top: -0.07%;
  width: 132.99%;
  height: 100.12%;
}

/* 21495:968 — a rotated vector. The frame's x/y for a rotated node is the origin
   of the UNROTATED shape, so the rendered box comes from the export's inset
   instead: 2186.23 × 1378.38 at left -1147.97, holding an 839.4 × 2032 shape
   turned 73.62deg. */
.ok-story__ribbon {
  position: absolute;
  left: calc(-1147.97 * var(--ok-scale));
  top: calc(-142 * var(--ok-scale));
  width: calc(2186.228 * var(--ok-scale));
  height: calc(1378.381 * var(--ok-scale));
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.ok-story__ribbon img {
  flex: none;
  width: calc(839.4 * var(--ok-scale));
  height: calc(2032 * var(--ok-scale));
  transform: rotate(73.62deg);
}

.ok-story__col {
  position: absolute;
  left: calc(1161 * var(--ok-scale));
  top: calc(104 * var(--ok-scale));
  width: calc(665 * var(--ok-scale));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(40 * var(--ok-scale));
}

.ok-story__stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(21 * var(--ok-scale));
  width: 100%;
}

.ok-story__quote-box {
  position: relative;
  width: 100%;
  height: calc(270 * var(--ok-scale));
}

.ok-story__title {
  position: absolute;
  right: 0;
  top: calc(41 * var(--ok-scale));
  width: calc(614 * var(--ok-scale));
}

.ok-story__mark {
  position: absolute;
  display: block;
}

.ok-story__mark--open {
  left: calc(593 * var(--ok-scale));
  top: calc(16 * var(--ok-scale));
  width: calc(67 * var(--ok-scale));
  height: calc(61 * var(--ok-scale));
}

.ok-story__mark--close {
  left: calc(263 * var(--ok-scale));
  top: calc(217 * var(--ok-scale));
  width: calc(59 * var(--ok-scale));
  height: calc(53 * var(--ok-scale));
}

.ok-story__text,
.ok-story__closing {
  width: calc(664 * var(--ok-scale));
  color: var(--ok-ink);
}

/* ═══ 9 · Trust banner — 21495:1009, 1920×921 ═════════════════════════════ */
.ok-banner {
  height: calc(921 * var(--ok-scale));
}

/* 21495:1011 has clipsContent — this is what cuts the circular photo. */
.ok-banner__card {
  position: absolute;
  left: calc(161 * var(--ok-scale));
  top: calc(125 * var(--ok-scale));
  width: calc(1660 * var(--ok-scale));
  height: calc(672 * var(--ok-scale));
  border-radius: calc(40 * var(--ok-scale));
  background: var(--ok-accent);
  overflow: clip;
}

.ok-banner__photo {
  position: absolute;
  left: calc(-267.772 * var(--ok-scale));
  top: calc(-71.074 * var(--ok-scale));
  width: calc(813.68 * var(--ok-scale));
  height: calc(813.68 * var(--ok-scale));
  border-radius: 50%;
  overflow: clip; /* clipsContent on 21495:1013 */
}

.ok-banner__photo img {
  position: absolute;
  left: calc(-23.6 * var(--ok-scale));
  top: calc(58.898 * var(--ok-scale));
  width: calc(933.584 * var(--ok-scale));
  height: calc(700.456 * var(--ok-scale));
  object-fit: cover;
  transform: rotate(0.28deg);
}

.ok-banner__col {
  position: absolute;
  left: calc(855 * var(--ok-scale));
  top: calc(146 * var(--ok-scale));
  width: calc(664 * var(--ok-scale));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(30 * var(--ok-scale));
}

.ok-banner__title {
  width: calc(614 * var(--ok-scale));
  color: var(--ok-light);
}

/* On ACCENT the emphasised run is accent 2, not ACCENT. */
.ok-banner__title strong {
  color: var(--ok-accent-2);
}

.ok-banner__text {
  width: 100%;
  color: var(--ok-light);
}

/* ═══ 11 · How to take part — 21495:1022, 1920×805 ════════════════════════ */
.ok-take {
  height: calc(805 * var(--ok-scale));
}

.ok-take__title {
  position: absolute;
  right: calc(241 * var(--ok-scale));
  top: calc(323 * var(--ok-scale));
  width: calc(455 * var(--ok-scale));
}

.ok-take__stage {
  position: absolute;
  left: calc(100 * var(--ok-scale));
  top: calc(63 * var(--ok-scale));
  width: calc(1076 * var(--ok-scale));
  height: calc(678 * var(--ok-scale));
  display: flex;
  align-items: center;
  gap: calc(57 * var(--ok-scale));
}

.ok-take__viewport {
  flex: 0 0 auto;
  width: calc(822 * var(--ok-scale));
  height: calc(678 * var(--ok-scale));
}

/* The only container that is deliberately RTL. It is a horizontal scroller, and
   in RTL the scroll start has to be the right edge, which is what puts the first
   card flush right: 822 viewport − 562 card = the 260 of peek on the left, exactly
   as the frame has it. It sets the order and the origin of the track; the cards
   themselves are pulled back to ltr at the top of this file, because direction
   is inherited and would otherwise mirror each card's internal rows. */
.ok-take__track {
  direction: rtl;
  display: flex;
  gap: calc(32 * var(--ok-scale));
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

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

.ok-take__card {
  position: relative;
  flex: 0 0 auto;
  width: calc(562 * var(--ok-scale));
  height: calc(678 * var(--ok-scale));
  border-radius: calc(70 * var(--ok-scale));
  background: var(--ok-900);
  overflow: clip; /* clipsContent on 21495:1042 */
  scroll-snap-align: start;
}

.ok-take__card-media {
  position: absolute;
  left: calc(-23 * var(--ok-scale));
  top: 0;
  width: calc(585 * var(--ok-scale));
  height: calc(467 * var(--ok-scale));
  overflow: clip;
}

.ok-take__card-media img {
  position: absolute;
  left: calc(-0.06 * var(--ok-scale));
  top: calc(-8 * var(--ok-scale));
  width: calc(585 * var(--ok-scale));
  height: calc(588 * var(--ok-scale));
  object-fit: cover;
}

.ok-take__card-veil {
  position: absolute;
  left: calc(-142 * var(--ok-scale));
  top: calc(177 * var(--ok-scale));
  width: calc(704.006 * var(--ok-scale));
  height: calc(580.314 * var(--ok-scale));
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

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

.ok-take__card-foot {
  position: absolute;
  left: calc(40 * var(--ok-scale));
  right: calc(40 * var(--ok-scale));
  bottom: calc(40 * var(--ok-scale));
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

/* 21495:1027 points left and 21495:1053 points right, as the frame draws them.
   The asset points left, so only the trailing one is turned. */
.ok-take__stage .ok-arrow--right img {
  transform: none;
}

.ok-take__stage .ok-arrow--left img {
  transform: rotate(180deg);
}

/* The card that is not snapped sits behind, smaller and faded (21495:1031 is
   422.743 wide at 25% against the 562 active card). Scale and opacity only —
   the card keeps the one measured size from this layer. */
.ok-take__card {
  transform-origin: center;
  transition: transform 220ms ease, opacity 220ms ease;
}

.ok-take__card:not(.is-active) {
  transform: scale(0.7521);
  opacity: 0.25;
}

/* 21495:1044 — the per-card action, 74 instead of 70, fill 200, no outline. */
.ok-arrow--card {
  width: calc(74 * var(--ok-scale));
  height: calc(74 * var(--ok-scale));
  border-color: transparent;
}

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

.ok-take__card-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(10 * var(--ok-scale));
  width: calc(326 * var(--ok-scale));
  height: calc(102 * var(--ok-scale));
}

.ok-take__card-title {
  font-size: calc(40 * var(--ok-scale));
  font-weight: 700;
  line-height: 1.15;
  text-align: right;
  white-space: nowrap;
  color: var(--ok-light);
}

.ok-take__card-text {
  width: calc(310 * var(--ok-scale));
  font-size: calc(18 * var(--ok-scale));
  line-height: 1.3;
  letter-spacing: calc(0.36 * var(--ok-scale));
  text-align: right;
  color: var(--ok-light);
}

/* ═══ 12 · Questions and answers — 21495:1056, 1920×625 ═══════════════════ */
.ok-faq {
  height: calc(625 * var(--ok-scale));
}

.ok-faq__col {
  position: absolute;
  left: calc(342 * var(--ok-scale));
  top: calc(53 * var(--ok-scale));
  width: calc(1236 * var(--ok-scale));
  height: calc(519 * var(--ok-scale));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(71 * var(--ok-scale));
}

.ok-faq__title {
  width: 100%;
  text-align: center;
}

.ok-faq__columns {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: calc(96 * var(--ok-scale));
  width: calc(1046 * var(--ok-scale));
  height: calc(243 * var(--ok-scale));
}

.ok-faq__column {
  display: flex;
  flex-direction: column;
  gap: calc(28 * var(--ok-scale));
  height: calc(243 * var(--ok-scale)); /* 21495:1061 / 21495:1068 */
}

.ok-faq__item {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(12 * var(--ok-scale));
}

.ok-faq__question,
.ok-faq__answer {
  width: calc(469 * var(--ok-scale));
  font-size: calc(18 * var(--ok-scale));
  line-height: 1.3;
  letter-spacing: calc(0.36 * var(--ok-scale));
  text-align: right;
}

.ok-faq__question {
  font-weight: 700;
  color: var(--ok-accent);
}

.ok-faq__answer {
  color: var(--ok-ink);
}

/* ═══ Footer — 21495:1075 / 21418:18644, 1920×493 ═════════════════════════ */
.site-footer {
  position: relative;
  width: 100%;
  height: calc(493 * var(--ok-scale));
  background: var(--ok-accent);
  color: var(--ok-light);
  /* The footer does not clip in Figma — the pink ribbon and its knot are drawn
     840 above its top edge, over the FAQ. But its rotated box also reaches 473
     BELOW the footer, which is the end of the page, and that empty tail grew the
     document by 473px. `clip` + a 840 clip-margin keeps the whole visible bleed
     and stops the tail from adding scroll. */
  overflow: clip;
  overflow-clip-margin: calc(840 * var(--ok-scale));
}

/* The footer component does NOT clip in Figma: the pink ribbon and its knot are
   drawn above the footer's top edge, over the section before it. */
.site-footer__ribbon {
  position: absolute;
  left: calc(-134 * var(--ok-scale));
  top: calc(-826.32 * var(--ok-scale));
  width: calc(2093 * var(--ok-scale));
  height: calc(1792.348 * var(--ok-scale));
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.site-footer__ribbon img {
  flex: none;
  width: calc(1798.583 * var(--ok-scale));
  height: calc(1076.005 * var(--ok-scale));
  transform: rotate(27.89deg);
}

.site-footer__columns {
  position: absolute;
  left: calc(96 * var(--ok-scale));
  top: calc(115 * var(--ok-scale));
  display: flex;
  align-items: flex-start;
  gap: calc(47 * var(--ok-scale));
}

.site-footer__col {
  direction: rtl;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(4 * var(--ok-scale));
  white-space: nowrap;
}

.site-footer__col--nav {
  width: calc(146 * var(--ok-scale));
}

.site-footer__col p {
  font-size: calc(18 * var(--ok-scale));
  line-height: 1.3;
  letter-spacing: calc(0.36 * var(--ok-scale));
  text-align: right;
}

.site-footer__col-title {
  font-size: calc(24 * var(--ok-scale)) !important;
  font-weight: 700;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
}

.site-footer__col a:hover,
.site-footer__col a:focus-visible {
  text-decoration: underline;
}

.site-footer__logo {
  position: absolute;
  left: calc(1556 * var(--ok-scale));
  top: calc(103 * var(--ok-scale));
  width: calc(208.94 * var(--ok-scale));
  height: calc(72.572 * var(--ok-scale));
  display: flex;
  align-items: center;
}

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

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

.site-footer__about {
  direction: rtl;
  position: absolute;
  left: calc(1337 * var(--ok-scale));
  top: calc(188 * var(--ok-scale));
  width: calc(428 * var(--ok-scale));
  font-size: calc(16 * var(--ok-scale));
  line-height: 1.3;
  text-align: right;
}

.site-footer__social {
  position: absolute;
  left: calc(1497 * var(--ok-scale));
  top: calc(289 * var(--ok-scale));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(13 * var(--ok-scale));
}

.site-footer__social-title {
  direction: rtl;
  font-size: calc(16 * var(--ok-scale));
  line-height: 1.5;
  text-align: right;
  white-space: nowrap;
}

.site-footer__social-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: calc(10 * var(--ok-scale));
}

.site-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(44 * var(--ok-scale));
  height: calc(44 * var(--ok-scale));
  border: calc(1 * var(--ok-scale)) solid var(--ok-light);
  border-radius: calc(500 * var(--ok-scale));
  transition: background-color 160ms ease;
}

.site-footer__social-link img {
  width: calc(24 * var(--ok-scale));
  height: calc(24 * var(--ok-scale));
}

.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  outline: none;
}

.site-footer__brand {
  position: absolute;
  left: calc(93 * var(--ok-scale));
  top: calc(316 * var(--ok-scale));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.site-footer__divider {
  position: absolute;
  left: calc(96 * var(--ok-scale));
  top: calc(421 * var(--ok-scale));
  width: calc(1728 * var(--ok-scale));
  height: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
}

.site-footer__credit {
  position: absolute;
  left: calc(96 * var(--ok-scale));
  top: calc(433 * var(--ok-scale));
  width: calc(1728 * var(--ok-scale));
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: calc(16 * var(--ok-scale));
  line-height: 1.3;
  white-space: nowrap;
}

/* The credit row is a physical left-to-right row of three text blocks; each block
   is Hebrew except the studio credit, which carries dir="ltr" in the markup. */
.site-footer__credit p {
  direction: rtl;
}

.site-footer__credit p[dir="ltr"] {
  direction: ltr;
}

/* The emphasised run inside edited copy. assets/panel-runtime/inline-copy.css sets the
   accent with !important, so this needs the same weight to win; it is kept here (rather
   than only in that runtime file) because the shade differs between the two places the
   run appears. The runtime asset itself now carries Ogen Katan's palette. */
.ok-section .sc-copy-accent,
.site-footer .sc-copy-accent {
  color: var(--ok-900) !important;
}

/* Text boxes the frame gives an explicit height to. Those nodes end with blank
   lines in Figma, so the box is taller than the copy; without the height the
   column collapses and every CTA under it rides up by 22–35px. The copy itself
   stays whatever the panel holds. */
.ok-intro__closing {       /* 21495:876 */
  height: calc(82 * var(--ok-scale));
}

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

.ok-impact__text-mid {     /* 21495:887 */
  height: calc(51 * var(--ok-scale));
}

.ok-impact__note-text {    /* 21495:891 */
  height: calc(160 * var(--ok-scale));
}

.ok-what__text {           /* 21495:901 */
  height: calc(130 * var(--ok-scale));
}

.ok-what__closing {        /* 21495:902 */
  height: calc(56 * var(--ok-scale));
}

.ok-adoption__text {       /* 21495:934 */
  height: calc(167 * var(--ok-scale));
}

.ok-value__text {          /* 21495:945 */
  height: calc(75 * var(--ok-scale));
}

.ok-story__text {          /* 21495:975 */
  height: calc(142 * var(--ok-scale));
}

.ok-story__closing {       /* 21495:976 */
  height: calc(46 * var(--ok-scale));
}

.ok-banner__text {         /* 21495:1017 */
  height: calc(142 * var(--ok-scale));
}

/* The bare CTA link of the hero (21495:862) carries no stroke. */
.ok-pill--bare {
  background: none;
  border-width: 0;
}

.ok-pill--bare:hover,
.ok-pill--bare:focus-visible {
  background: none;
  border-width: 0;
  color: var(--ok-accent);
  text-decoration: underline;
}