/* ===========================================================================
   עוף טוב · דף נחיתה "סליחה"

   Two separate compositions, not one scaled to fit. Every coordinate below is
   the position measured off the matching comp, expressed in `--u` — one
   percent of that comp's own width. The mobile comp is 4501×8000 and the
   desktop comp 5834×2501, so a section stands 177.74u tall on mobile and
   42.87u tall on desktop, and an element at x% of the comp sits at x·u.

   Type sizes are calibrated the same way: each display size is the size at
   which the string measures the same ink width it has in the comp.
   =========================================================================== */

:root {
  --green:        #004C1C;
  --green-dot:    #005621;
  --yellow:       #FEC333;
  --yellow-grid:  #FED167;
  --accent:       #FEC23C;
  --btn:          #FEC526;
  --red:          #CC0026;
  --paper-rule:   #F3C6CF;

  /* One slide is one composition. `--u` is bounded by the viewport's width
     AND its height, so the artboard always fits the screen whole; whatever is
     left over is filled by the slide's own background. */
  --u:  min(1.1vw, 0.62dvh, 6.4px);
  --fh: 177.74;

  --stroke: calc(var(--u) * .5);
  --offset: calc(var(--u) * 2);
  --ease: cubic-bezier(.22, .68, .36, 1);
  --spring: cubic-bezier(.34, 1.32, .42, 1);
}

@media (min-width: 1024px) {
  :root {
    --u:  min(1vw, 2.3327dvh, 14.4px);
    --fh: 42.87;
    --stroke: calc(var(--u) * .21);
    --offset: calc(var(--u) * 2.1);
  }
}

/* --- the licensed face --------------------------------------------------- */

@font-face {
  font-family: "Aduma";
  src: url("assets/fonts/AdumaFOT-Regular.woff2") format("woff2"),
       url("assets/fonts/AdumaFOT-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aduma";
  src: url("assets/fonts/AdumaFOT-Bold.woff2") format("woff2"),
       url("assets/fonts/AdumaFOT-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--green);
  color: #fff;
  font-family: "Aduma", system-ui, sans-serif;
  letter-spacing: .04em;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
h1, h2, p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }

.br-d { display: none; }
@media (min-width: 1024px) {
  .br-d { display: inline; }
  .br-m { display: none; }
}

.skip {
  position: absolute;
  right: -9999px;
  top: 0;
  z-index: 100;
  background: #fff;
  color: var(--green);
  padding: .6em 1.1em;
  font-weight: 700;
  border-radius: 0 0 .5em .5em;
}
.skip:focus { right: 1rem; }

:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 2px; }
.sec--yellow :focus-visible { outline-color: var(--green); }

/* --- fixed brand mark ---------------------------------------------------- */

.brand {
  position: fixed;
  top: max(calc(var(--u) * 3), env(safe-area-inset-top, 0px));
  right: max(calc(var(--u) * 3.5), env(safe-area-inset-right, 0px));
  z-index: 60;
  width: calc(var(--u) * 17);
  pointer-events: none;
}
.brand img { width: 100%; }

@media (min-width: 1024px) {
  .brand {
    top: calc(var(--u) * 1.9);
    right: calc(var(--u) * 2.2);
    width: calc(var(--u) * 6.4);
  }
}

/* --- the deck ------------------------------------------------------------ */
/* Six compositions, one screen each. Without JS they simply stack and scroll;
   with JS the track slides between them one at a time. */

.deck { position: relative; }

.js body { overflow: hidden; overscroll-behavior: none; }
.js html { overscroll-behavior: none; }
.js .deck {
  height: 100dvh;
  overflow: hidden;
  /* the deck owns vertical gestures: no rubber-banding to fall out of step with */
  touch-action: none;
}
.js .deck__track {
  height: 100%;
  transition: transform .85s var(--spring);
  will-change: transform;
}
/* the flow-mode min-height must not win here, or the track and the slides
   disagree about how tall a slide is and the deck drifts out of step */
.js .sec { height: 100%; min-height: 0; display: grid; place-items: center; }

/* The artboard is allowed to run slightly wider and taller than the screen so
   the composition fills it. Neither an auto margin nor `place-items: center`
   can be trusted to centre a box bigger than its container — in RTL the box
   pins to the right and spills off the left. Centring it by hand keeps the
   overflow shared evenly on all four sides, so the crop is symmetric. */
.js .stage {
  justify-self: start;
  align-self: start;
  margin-inline: 0;
  margin-inline-start: calc((100vw - var(--u) * 100) / 2);
  margin-block-start: calc((100dvh - var(--fh) * var(--u)) / 2);
}

/* the composition settles into place a beat behind the slide itself */
.js .sec .stage {
  transition: transform .85s var(--spring), opacity .5s var(--ease);
  transform: translateY(calc(var(--u) * 5)) scale(.965);
  opacity: 0;
}
.js .sec.is-active .stage { transform: none; opacity: 1; }
.js .sec.was-active .stage { transform: translateY(calc(var(--u) * -5)) scale(.965); }

/* --- section shells ------------------------------------------------------ */

.sec {
  position: relative;
  overflow: hidden;
  min-height: calc(var(--fh) * var(--u));
}

.sec--yellow {
  --grid-cell: calc(var(--u) * 12.4);
  --grid-line: calc(var(--u) * .11);
  background-color: var(--yellow);
  color: var(--green);
  background-image:
    repeating-linear-gradient(to right,
      var(--yellow-grid) 0 var(--grid-line),
      transparent var(--grid-line) var(--grid-cell)),
    repeating-linear-gradient(to bottom,
      var(--yellow-grid) 0 var(--grid-line),
      transparent var(--grid-line) var(--grid-cell));
  background-position: calc(var(--u) * .6) calc(var(--u) * 6);
}

.sec--green {
  background-color: var(--green);
  background-image: radial-gradient(circle at 50% 50%,
    var(--green-dot) 0 20%, transparent 21%);
  background-size: calc(var(--u) * 2.6) calc(var(--u) * 2.6);
}

@media (min-width: 1024px) {
  .sec--yellow {
    --grid-cell: calc(var(--u) * 8.93);
    --grid-line: calc(var(--u) * .08);
    background-position: calc(var(--u) * .4) calc(var(--u) * 1.4);
  }
  .sec--green { background-size: calc(var(--u) * 1.02) calc(var(--u) * 1.02); }
}

.stage {
  position: relative;
  width: calc(var(--u) * 100);
  height: calc(var(--fh) * var(--u));
  margin-inline: auto;
}

/* things centred inside the stage: no transform, so the reveal can own it */
.centred { left: 0; right: 0; margin-inline: auto; }

/* --- shared: the offset plate boxes -------------------------------------- */

.hero__plate { position: absolute; }

.plate__box, .plate__shadow {
  position: absolute;
  inset: 0;
  border: var(--stroke) solid var(--green);
  border-radius: calc(var(--u) * var(--radius, 3));
}
.plate__shadow { background: #fff; transform: translate(var(--offset), var(--offset)); }
.plate__box { display: grid; place-items: center; }

.plate__word {
  font-weight: 700;
  line-height: .84;
  margin: 0;
  white-space: nowrap;
  /* Aduma sits high in the em box; drop it to the optical centre of the plate */
  position: relative;
  top: .085em;
}

/* --- 1 · hero ------------------------------------------------------------ */

.blob {
  position: absolute;
  width: calc(var(--u) * 143.8);
  height: calc(var(--u) * 143.8);
  left: calc(var(--u) * -66.35);
  top: calc(var(--u) * 98.3);
  background: var(--green);
  border-radius: 50%;
}

.hero__plate {
  left: calc(var(--u) * 15.84);
  width: calc(var(--u) * 66.3);
  top: calc(var(--u) * 45.5);
  height: calc(var(--u) * 24.6);
  --radius: 3.2;
}
.hero__plate .plate__box { background: var(--btn); }
.hero__plate .plate__word {
  color: #fff;
  font-size: calc(var(--u) * 28.46);
  filter: drop-shadow(calc(var(--u) * -.55) calc(var(--u) * .8) calc(var(--u) * .5) rgba(0, 55, 20, .28));
}

.hero__copy {
  position: absolute;
  top: calc(var(--u) * 74.3);
  width: calc(var(--u) * 70);
  text-align: center;
  color: var(--green);
  font-size: calc(var(--u) * 3.65);
  line-height: calc(var(--u) * 3.51);
  font-weight: 400;
}

.hero__pack, .still__pack {
  position: absolute;
  width: calc(var(--u) * 28.9);
  left: calc(var(--u) * 31.5);
  top: calc(var(--u) * 107);
  rotate: -13deg;
  filter: drop-shadow(calc(var(--u) * -1.4) calc(var(--u) * 2) calc(var(--u) * 1.8) rgba(0, 30, 10, .32));
}

@media (min-width: 1024px) {
  .hero .blob { display: none; }

  .hero__plate {
    left: calc(var(--u) * 26.3);
    width: calc(var(--u) * 49.8);
    top: calc(var(--u) * 7.63);
    height: calc(var(--u) * 18.88);
    --radius: 1.7;
  }
  .hero__plate .plate__word { font-size: calc(var(--u) * 20.58); }

  .hero__copy {
    top: calc(var(--u) * 31.6);
    width: calc(var(--u) * 58);
    font-size: calc(var(--u) * 1.93);
    line-height: calc(var(--u) * 1.851);
  }

  .hero__pack {
    width: calc(var(--u) * 13.9);
    left: calc(var(--u) * 15.2);
    top: calc(var(--u) * 15.2);
    rotate: -6deg;
    filter: drop-shadow(calc(var(--u) * -.5) calc(var(--u) * .7) calc(var(--u) * .7) rgba(0, 30, 10, .28));
  }
}

/* --- 2 · tease ----------------------------------------------------------- */

.tease__text {
  position: absolute;
  top: calc(var(--u) * 104.3);
  left: calc(var(--u) * 19);
  width: calc(var(--u) * 62);
  text-align: center;
}
.tease__title {
  font-size: calc(var(--u) * 9.86);
  line-height: calc(var(--u) * 11.47);
  font-weight: 700;
}
.tease__note {
  margin-top: calc(var(--u) * 5.6);
  color: var(--accent);
  font-size: calc(var(--u) * 4.63);
  font-weight: 700;
  position: relative;
}
.squiggle {
  position: absolute;
  left: calc(var(--u) * 2.5);
  top: calc(var(--u) * -5.4);
  width: calc(var(--u) * 54.3);
  height: calc(var(--u) * 2.8);
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.7;
  stroke-linecap: round;
}

.tease__pack {
  position: absolute;
  width: calc(var(--u) * 32);
  left: calc(var(--u) * 36.5);
  top: calc(var(--u) * 38.7);
  filter: drop-shadow(0 calc(var(--u) * .4) calc(var(--u) * .8) rgba(0, 20, 8, .40));
}

.tease__zip {
  position: absolute;
  left: calc(var(--u) * 65.99);
  top: calc(var(--u) * 53.3);
  width: calc(var(--u) * 9.5);
  height: calc(var(--u) * 10.7);
  fill: none;
  stroke: var(--accent);
  stroke-width: 5;
  stroke-linecap: round;
}

/* mobile: a dotted stem drops from the bag down to the headline */
.tease__bracket {
  position: absolute;
  left: calc(var(--u) * 51.5);
  top: calc(var(--u) * 79.5);
  width: 0;
  height: calc(var(--u) * 20.3);
  border-left: calc(var(--u) * .55) dashed var(--accent);
}

@media (min-width: 1024px) {
  .tease__text {
    top: calc(var(--u) * 14.8);
    left: calc(var(--u) * 15.37);
    width: calc(var(--u) * 37);
    text-align: start;
  }
  .tease__title {
    font-size: calc(var(--u) * 5.55);
    line-height: calc(var(--u) * 6.5);
  }
  .tease__note {
    margin-top: calc(var(--u) * 1.4);
    font-size: calc(var(--u) * 2.39);
  }
  .squiggle {
    left: calc(var(--u) * 1.6);
    top: calc(var(--u) * .5);
    width: calc(var(--u) * 15);
    height: calc(var(--u) * 1.6);
  }

  .tease__pack {
    width: calc(var(--u) * 18.9);
    left: calc(var(--u) * 57.5);
    top: calc(var(--u) * 8.84);
  }
  .tease__zip {
    left: calc(var(--u) * 75.49);
    top: calc(var(--u) * 15);
    width: calc(var(--u) * 5.3);
    height: calc(var(--u) * 9);
    stroke-width: 4;
  }

  /* desktop: the same dotted rule becomes the bracket over the composition */
  .tease__bracket {
    left: calc(var(--u) * 37.69);
    top: calc(var(--u) * 8.86);
    width: calc(var(--u) * 34.28);
    height: calc(var(--u) * 6.12);
    border: 0;
    border-top: calc(var(--u) * .28) dashed var(--accent);
    border-left: calc(var(--u) * .28) dashed var(--accent);
  }
  .tease__bracket::after {
    content: "";
    position: absolute;
    right: calc(var(--u) * -0.28);
    top: 0;
    width: 0;
    height: calc(var(--u) * 2.4);
    border-right: calc(var(--u) * .28) dashed var(--accent);
  }
}

/* --- 3 · the nuggets ----------------------------------------------------- */

.nugs__title {
  letter-spacing: .072em;
  word-spacing: .16em;
  position: absolute;
  top: calc(var(--u) * 29.1);
  left: calc(var(--u) * 39.7);
  width: calc(var(--u) * 43.6);
  color: var(--accent);
  font-size: calc(var(--u) * 12.15);
  line-height: calc(var(--u) * 13.4);
  font-weight: 700;
  text-align: start;
}

.nugs__row { position: absolute; inset: 0; }
.nugs__item { position: absolute; }
.nugs__item:nth-child(1) { left: calc(var(--u) * 16.77); top: calc(var(--u) * 29.06); width: calc(var(--u) * 21.44); }
.nugs__item:nth-child(2) { left: calc(var(--u) * 16.24); top: calc(var(--u) * 67.70); width: calc(var(--u) * 20.66); }
.nugs__item:nth-child(3) { left: calc(var(--u) * 16.46); top: calc(var(--u) * 107.0); width: calc(var(--u) * 21.66); }

.dash { position: absolute; }
.dash--a, .dash--b {
  left: calc(var(--u) * 25.7);
  border-left: calc(var(--u) * .55) dashed #fff;
}
.dash--a { top: calc(var(--u) * 53.3); height: calc(var(--u) * 16); }
.dash--b { top: calc(var(--u) * 92.4); height: calc(var(--u) * 14.2); }
.dash--elbow {
  left: calc(var(--u) * 38.5);
  top: calc(var(--u) * 78.2);
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 44.4);
  border-bottom: calc(var(--u) * .55) dashed #fff;
  border-right: calc(var(--u) * .55) dashed #fff;
}

.nugs__foot {
  position: absolute;
  top: calc(var(--u) * 134);
  width: calc(var(--u) * 60);
  text-align: center;
  font-size: calc(var(--u) * 5.63);
  line-height: 1.2;
  font-weight: 400;
}
.asterisk {
  display: block;
  margin: 0 auto calc(var(--u) * 1.4);
  width: calc(var(--u) * 2.6);
  height: calc(var(--u) * 2.6);
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
}

@media (min-width: 1024px) {
  .nugs__title {
    top: calc(var(--u) * 3.9);
    left: 0; right: 0;
    margin-inline: auto;
    width: calc(var(--u) * 44);
    font-size: calc(var(--u) * 5.7);
    line-height: 1.1;
    text-align: center;
  }

  .nugs__item:nth-child(1) { left: calc(var(--u) * 64.76); top: calc(var(--u) * 13.01); width: calc(var(--u) * 14.98); }
  .nugs__item:nth-child(2) { left: calc(var(--u) * 42.61); top: calc(var(--u) * 13.01); width: calc(var(--u) * 14.98); }
  .nugs__item:nth-child(3) { left: calc(var(--u) * 20.47); top: calc(var(--u) * 13.01); width: calc(var(--u) * 14.98); }

  .dash--a, .dash--b {
    top: calc(var(--u) * 21.86);
    height: 0;
    width: calc(var(--u) * 7.16);
    border-left: 0;
    border-top: calc(var(--u) * .28) dashed #fff;
  }
  .dash--a { left: calc(var(--u) * 35.45); }
  .dash--b { left: calc(var(--u) * 57.59); }
  .dash--elbow { display: none; }

  .nugs__foot {
    top: calc(var(--u) * 35.2);
    width: calc(var(--u) * 54);
    font-size: calc(var(--u) * 2.22);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--u) * .7);
  }
  .asterisk { margin: 0; width: calc(var(--u) * 1.35); height: calc(var(--u) * 1.35); }
}

/* --- 4 · still disappointed ---------------------------------------------- */

.still__title {
  position: absolute;
  top: calc(var(--u) * 49.6);
  width: calc(var(--u) * 64);
  text-align: center;
  color: var(--green);
  font-size: calc(var(--u) * 5.89);
  line-height: calc(var(--u) * 6.4);
  font-weight: 700;
}
.still__title em { font-style: normal; color: var(--red); }

.still__plate {
  position: absolute;
  left: calc(var(--u) * 24.93);
  width: calc(var(--u) * 50.1);
  top: calc(var(--u) * 74.7);
}

@media (min-width: 1024px) {
  .still .blob, .still__pack { display: none; }

  .still__title {
    top: calc(var(--u) * 8.9);
    width: calc(var(--u) * 46);
    font-size: calc(var(--u) * 3.78);
    line-height: calc(var(--u) * 3.98);
  }
  .still__plate {
    left: calc(var(--u) * 32.79);
    width: calc(var(--u) * 33.75);
    top: calc(var(--u) * 23.7);
  }
  }

/* --- 5 · the wall -------------------------------------------------------- */

.wall__frame {
  position: absolute;
  left: calc(var(--u) * 21.93);
  top: calc(var(--u) * 77.3);
  width: calc(var(--u) * 56.12);
  height: calc(var(--u) * 56.7);
  border: calc(var(--u) * .55) dashed #fff;
}
.wall__title {
  position: absolute;
  inset-inline: calc(var(--u) * -1.5);
  top: calc(var(--u) * 23);
  display: grid;
  justify-items: center;
  gap: calc(var(--u) * 3.1);
  text-align: center;
  font-weight: 700;
  font-size: calc(var(--u) * 6.11);
  line-height: 1.04;
}
.wall__line1 { color: var(--accent); }
.wall__line3 { color: #fff; }

.wall__chip { position: relative; display: inline-block; }
.chip__box, .chip__shadow { border-radius: calc(var(--u) * 2.2); }
.chip__shadow {
  position: absolute;
  inset: 0;
  background: #fff;
  transform: translate(calc(var(--u) * 1.6), calc(var(--u) * 1.6));
}
.chip__box {
  position: relative;
  display: block;
  background: var(--accent);
  color: var(--green);
  font-size: calc(var(--u) * 7.05);
  padding: calc(var(--u) * .5) calc(var(--u) * 1.6) calc(var(--u) * 1.2);
}

.wall__card {
  position: absolute;
  z-index: 2;
  left: calc(var(--u) * 27.5);
  top: calc(var(--u) * 38);
  width: calc(var(--u) * 46.5);
  rotate: 4.75deg;
  transition: rotate .8s var(--ease);
  filter: drop-shadow(0 calc(var(--u) * 1) calc(var(--u) * 1.4) rgba(0, 20, 8, .35));
}
.wall__card:not(.is-in) { rotate: 0deg; }
.wall__plate {
  position: absolute;
  inset: 0;
  background: var(--accent);
  border-radius: calc(var(--u) * 2.6);
  transform: translate(calc(var(--u) * 2.4), calc(var(--u) * 2.4));
}
.wall__card img {
  position: relative;
  width: 100%;
  border: calc(var(--u) * 1.5) solid #fff;
  border-radius: calc(var(--u) * 2.6);
}

@media (min-width: 1024px) {
  .wall__frame {
    left: calc(var(--u) * 17.57);
    top: calc(var(--u) * 7.80);
    width: calc(var(--u) * 39.3);
    height: calc(var(--u) * 23.2);
    border-width: calc(var(--u) * .28);
  }
  .wall__title {
    top: calc(var(--u) * 1.7);
    gap: calc(var(--u) * 1.7);
    font-size: calc(var(--u) * 4.08);
  }
  .chip__shadow { transform: translate(calc(var(--u) * .9), calc(var(--u) * .9)); }
  .chip__box {
    font-size: calc(var(--u) * 4.56);
    padding: calc(var(--u) * .3) calc(var(--u) * 1.1) calc(var(--u) * .8);
  }
  .chip__box, .chip__shadow { border-radius: calc(var(--u) * 1.2); }

  .wall__card {
    left: calc(var(--u) * 53.4);
    top: calc(var(--u) * 4.9);
    width: calc(var(--u) * 24.6);
  }
  .wall__plate {
    transform: translate(calc(var(--u) * 1.3), calc(var(--u) * 1.3));
    border-radius: calc(var(--u) * 1.4);
  }
  .wall__card img { border-width: calc(var(--u) * .8); border-radius: calc(var(--u) * 1.4); }
}

/* --- 6 · the note + CTA -------------------------------------------------- */

.note {
  position: absolute;
  left: calc(var(--u) * 20.4);
  top: calc(var(--u) * 46.9);
  width: calc(var(--u) * 63.5);
  height: calc(var(--u) * 57);
}
.note__back {
  position: absolute;
  inset: calc(var(--u) * 3) calc(var(--u) * -1.5) calc(var(--u) * -1) calc(var(--u) * 6);
  background: var(--accent);
  border-radius: calc(var(--u) * 2.4);
  rotate: 1.4deg;
}
.note__sheet {
  position: absolute;
  inset: 0 calc(var(--u) * 6) calc(var(--u) * 3) 0;
  background: #fff;
  background-image: repeating-linear-gradient(to bottom,
    transparent 0 calc(var(--u) * 4.45),
    var(--paper-rule) calc(var(--u) * 4.45) calc(var(--u) * 4.65));
  background-position: 0 calc(var(--u) * 4.75);
  border-radius: calc(var(--u) * 1.6) calc(var(--u) * 1.6) 0 0;
  rotate: -3.74deg;
  transition: rotate .8s var(--ease);
  box-shadow: 0 calc(var(--u) * .6) calc(var(--u) * 1.2) rgba(0, 20, 8, .26);
  /* the torn bottom edge, traced off the comp */
  clip-path: polygon(
    0% 0%, 100% 0%,
    99.5% 93.4%, 97.2% 93.5%, 94.2% 94.1%, 91.2% 94.5%, 88.2% 95.3%,
    85.2% 95.6%, 82.2% 95.7%, 79.1% 96.1%, 76.1% 96.2%, 73.1% 96.3%,
    70.1% 97.2%, 67.1% 97.1%, 64.1% 97.3%, 61.0% 97.2%, 58.0% 97.6%,
    55.0% 97.3%, 52.0% 97.5%, 49.0% 98.3%, 46.0% 99.2%, 42.9% 99.4%,
    39.9% 99.8%, 36.9% 99.2%, 33.9% 99.4%, 30.9% 99.7%, 24.1% 99.6%,
    12.0% 100%, 0% 100%
  );
}
.note:not(.is-in) .note__sheet { rotate: -1deg; }

.note__body {
  position: absolute;
  inset: calc(var(--u) * 5.4) calc(var(--u) * 4.4) 0 calc(var(--u) * 4.4);
  color: var(--green);
  font-size: calc(var(--u) * 4.17);
  line-height: calc(var(--u) * 4.65);
  font-weight: 400;
  text-align: center;
}
.note__body p + p { margin-top: calc(var(--u) * 4.65); }
.note__body em { font-style: normal; color: var(--red); font-weight: 700; }
.note__count {
  margin-top: calc(var(--u) * 4.65);
  font-weight: 700;
  white-space: nowrap;
  font-size: .92em;
}
.note__count b { color: var(--red); font-weight: 700; }

.cta__col {
  position: absolute;
  left: calc(var(--u) * 22.17);
  top: calc(var(--u) * 114);
  width: calc(var(--u) * 55.74);
  text-align: center;
}

.cta__btn {
  width: 100%;
  height: calc(var(--u) * 7.57);
  border: 0;
  border-radius: 999px;
  background: var(--btn);
  color: var(--green);
  font-family: inherit;
  font-weight: 700;
  font-size: calc(var(--u) * 6.76);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 2.4);
  cursor: pointer;
  box-shadow: 0 calc(var(--u) * .5) 0 rgba(0, 40, 15, .16);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s;
}
.cta__btn:hover { background: #FFD24E; }
.cta__btn:active { transform: scale(.985); box-shadow: 0 calc(var(--u) * .2) 0 rgba(0, 40, 15, .16); }
.cta__arrow {
  width: calc(var(--u) * 8.4);
  height: calc(var(--u) * 3.8);
  fill: none;
  stroke: var(--green);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .18s var(--ease);
}
.cta__btn:hover .cta__arrow { transform: translateX(calc(var(--u) * -.6)); }

.cta__sub {
  margin-top: calc(var(--u) * 1.1);
  font-size: calc(var(--u) * 7.9);
  font-weight: 700;
  white-space: nowrap;
}

.credit {
  position: absolute;
  top: calc(var(--u) * 158);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * .9);
  white-space: nowrap;
  font-size: calc(var(--u) * 2.59);
  font-weight: 400;
}
.credit img { width: calc(var(--u) * 2.9); }
.credit b { color: var(--accent); }

@media (min-width: 1024px) {
  .note {
    left: calc(var(--u) * 53.7);
    top: calc(var(--u) * 7.1);
    width: calc(var(--u) * 33.7);
    height: calc(var(--u) * 28.4);
  }
  .note__back {
    inset: calc(var(--u) * 1.5) calc(var(--u) * -0.8) calc(var(--u) * -0.5) calc(var(--u) * 3);
    border-radius: calc(var(--u) * 1.2);
  }
  .note__sheet {
    inset: 0 calc(var(--u) * 3) calc(var(--u) * 1.5) 0;
    rotate: -6.2deg;
    border-radius: calc(var(--u) * .8) calc(var(--u) * .8) 0 0;
    background-image: repeating-linear-gradient(to bottom,
      transparent 0 calc(var(--u) * 2.25),
      var(--paper-rule) calc(var(--u) * 2.25) calc(var(--u) * 2.35));
    background-position: 0 calc(var(--u) * 2.55);
  }
  .note:not(.is-in) .note__sheet { rotate: -2.5deg; }
  .note__body {
    inset: calc(var(--u) * 2.8) calc(var(--u) * 2.2) 0 calc(var(--u) * 2.2);
    font-size: calc(var(--u) * 2.08);
    line-height: calc(var(--u) * 2.35);
  }
  .note__body p + p { margin-top: calc(var(--u) * 2.35); }
  .note__count { margin-top: calc(var(--u) * 2.35); }

  .cta__col {
    left: calc(var(--u) * 14.88);
    top: calc(var(--u) * 17.12);
    width: calc(var(--u) * 33.01);
  }
  .cta__btn {
    height: calc(var(--u) * 4.48);
    font-size: calc(var(--u) * 3.58);
    gap: calc(var(--u) * 1.4);
  }
  .cta__arrow { width: calc(var(--u) * 4.6); height: calc(var(--u) * 2.1); }
  .cta__sub { margin-top: calc(var(--u) * .9); font-size: calc(var(--u) * 4.8); }

  .credit {
    top: calc(var(--u) * 37.9);
    font-size: calc(var(--u) * 1.43);
    gap: calc(var(--u) * .5);
  }
  .credit img { width: calc(var(--u) * 1.6); }
}

/* --- modal --------------------------------------------------------------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: calc(var(--u) * 3);
}
.overlay[hidden] { display: none; }

.overlay__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 26, 10, .62);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .28s var(--ease);
}
.overlay.is-open .overlay__scrim { opacity: 1; }

.card {
  position: relative;
  width: min(calc(100vw - 62px), calc(var(--u) * 86), 430px);
  opacity: 0;
  transform: translateY(calc(var(--u) * 2.5)) scale(.95);
  transition: opacity .3s var(--ease), transform .34s var(--ease);
}
.overlay.is-open .card { opacity: 1; transform: none; }

.card__shadow, .card__box { border-radius: calc(var(--u) * 6.5); }
.card__shadow {
  position: absolute;
  inset: 0;
  background: var(--accent);
  border: var(--stroke) solid var(--green);
  transform: translate(calc(var(--u) * 5), calc(var(--u) * 5));
}
.card__box {
  position: relative;
  background: #fff;
  border: var(--stroke) solid var(--green);
  padding: calc(var(--u) * 14.5) calc(var(--u) * 7) calc(var(--u) * 16);
  text-align: center;
}
.card__title {
  color: var(--green);
  font-size: calc(var(--u) * 22.6);
  line-height: calc(var(--u) * 17.5);
  font-weight: 700;
}
.card__rule {
  display: block;
  height: calc(var(--u) * .55);
  background: var(--red);
  margin: calc(var(--u) * 7.5) auto calc(var(--u) * 6.5);
  width: 63%;
}
.card__text {
  color: var(--red);
  font-size: calc(var(--u) * 6.54);
  line-height: calc(var(--u) * 6.4);
  font-weight: 700;
}
.card__x {
  position: absolute;
  top: calc(var(--u) * 2.4);
  left: calc(var(--u) * 2.4);
  width: calc(var(--u) * 11);
  height: calc(var(--u) * 11);
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--green);
  cursor: pointer;
  transition: background-color .18s;
}
.card__x:hover { background: rgba(0, 76, 28, .10); }
.card__x svg { width: 52%; height: 52%; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }

@media (min-width: 1024px) {
  .overlay { padding: calc(var(--u) * 3); }
  /* the comp lays the card out landscape on desktop, portrait on mobile */
  .card { width: min(calc(100vw - 80px), calc(var(--u) * 46), 700px); }
  .card__shadow, .card__box { border-radius: calc(var(--u) * 2.35); }
  .card__shadow { transform: translate(calc(var(--u) * 1.4), calc(var(--u) * 1.4)); }
  .card__box { padding: calc(var(--u) * 3.6) calc(var(--u) * 3) calc(var(--u) * 4); }
  .card__title { font-size: calc(var(--u) * 6.47); line-height: 1.06; white-space: nowrap; }
  .card__rule {
    height: calc(var(--u) * .25);
    width: 50%;
    margin: calc(var(--u) * 2.6) auto calc(var(--u) * 2.4);
  }
  .card__text { font-size: calc(var(--u) * 2.44); line-height: calc(var(--u) * 2.6); }
  .card__x { width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); top: calc(var(--u) * 1.2); left: calc(var(--u) * 1.2); }
}

/* --- slide navigation ---------------------------------------------------- */

.dots {
  position: fixed;
  z-index: 55;
  bottom: max(calc(var(--u) * 3), env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  display: none;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .10);
  backdrop-filter: blur(6px);
}
.js .dots { display: flex; }

.dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  cursor: pointer;
  transition: background-color .25s, transform .25s var(--spring);
}
.sec--yellow ~ .dots button { background: rgba(0, 76, 28, .3); }
.dots button:hover { background: rgba(255, 255, 255, .75); }
.dots button[aria-current="true"] { background: #fff; transform: scale(1.45); }

/* a nudge to say the page moves a screen at a time */
.hint {
  position: fixed;
  z-index: 55;
  bottom: 58px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  color: #fff;
  font-weight: 700;
  letter-spacing: .02em;
  opacity: .85;
  pointer-events: none;
  animation: nudge 2.4s ease-in-out infinite;
}
.js .hint { display: block; }
.hint[hidden] { display: none; }
.hint svg { width: 30px; height: 18px; margin: 0 auto; display: block; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

@keyframes nudge {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 7px; }
}

/* --- motion -------------------------------------------------------------- */
/* `translate` rather than `transform`, so a reveal never fights a layout
   transform or the floating keyframes on the same element */

.reveal {
  opacity: 0;
  translate: 0 calc(var(--u) * 3);
  transition: opacity .62s var(--ease), translate .62s var(--ease);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.reveal.is-in { opacity: 1; translate: none; }

.float { animation: float 7.5s ease-in-out infinite; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(var(--u) * -1.2)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; translate: none; }
  .float { animation: none; }
  /* slides still change, they just cut instead of gliding */
  .js .sec .stage { transform: none; opacity: 1; }
}