@font-face { font-family: "Victor Mono"; font-weight: 400; font-display: swap; src: url("/assets/fonts/victor-mono-cyrillic-400.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Victor Mono"; font-weight: 600; font-display: swap; src: url("/assets/fonts/victor-mono-cyrillic-600.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Victor Mono"; font-weight: 400; font-display: swap; src: url("/assets/fonts/victor-mono-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Victor Mono"; font-weight: 600; font-display: swap; src: url("/assets/fonts/victor-mono-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --cream: #FFF1DE;
  --orange: #F84604;
  /* 1 Figma px. The mobile frame is 380 px wide; the whole collage scales with the screen, capped at 430 px on desktop */
  --u: calc(min(100vw, 430px) / 380);
}

* { box-sizing: border-box; }
html { background: var(--cream); -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--orange); font-family: "Victor Mono", ui-monospace, monospace; font-weight: 600; }
p, h1, h2, ul { margin: 0; padding: 0; }
ul { list-style: none; }
img { display: block; width: 100%; height: 100%; }
a { color: inherit; text-decoration: none; }

.page {
  position: relative;
  width: min(100vw, 430px);
  height: calc(2076 * var(--u));
  margin: 0 auto;
  overflow: hidden; /* header, peas, tomato and pepper bleed past the frame edges in the design */
  --dip: 0px;
}

/* Absolute block at Figma coordinates: --x --y --w --h in Figma px */
.a {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
}
.a:not([style*="--w"]) { width: auto; }
.a:not([style*="--h"]) { height: auto; }

/* Rotated picture: the outer box is the rotated bounding box from Figma, the inner image keeps its own size */
.rot { display: flex; align-items: center; justify-content: center; }
.rot > img {
  flex: none;
  width: calc(var(--iw) * var(--u));
  height: calc(var(--ih) * var(--u));
  /* --sqx/--sqy: squash on impact, kept standing on its bottom edge; --hop: jump on a basket tap (basket.js) */
  transform: rotate(var(--r)) translateY(calc(var(--hop, 0px) + (1 - var(--sqy, 1)) * 50%))
    scale(var(--sqx, 1), var(--sqy, 1)) scaleY(var(--sy, 1));
}
/* Figma shows the left 154 px of the 188 px square pepper image */
.pepper > img { object-fit: cover; object-position: left center; }

.eyebrow { font-size: calc(10 * var(--u)); line-height: calc(20 * var(--u)); text-align: center; }
.label { font-size: calc(12 * var(--u)); line-height: 1.2; transition: opacity .4s .25s; }
/* .done: the vegetable went to the basket, its label fades (basket.js) */
.label.done { opacity: .45; }
.nowrap { white-space: nowrap; }

.brands { display: flex; justify-content: center; align-items: center; gap: calc(13 * var(--u)); font-size: calc(10 * var(--u)); line-height: calc(20 * var(--u)); }
.brands .x { font-size: calc(8 * var(--u)); }
.cta-text { font-size: calc(12 * var(--u)); line-height: 1.3; text-align: center; }

.cta-button {
  padding: 0;
  border: 0;
  background: url("/assets/svg/button-bg.svg") center / 100% 100% no-repeat;
  color: #fff;
  font: inherit;
  font-size: calc(14 * var(--u));
  line-height: calc(20 * var(--u));
  cursor: pointer;
}

/* Basket animation layers (basket.js). Without .anim (no JS or reduced motion) only the final picture is shown */
.basket-back, .basket-occluder, .basket-front { display: none; }
.anim .basket-back, .anim .basket-occluder, .anim .basket-front { display: block; }
.anim .basket-final { opacity: 0; }
/* --dip: the basket gives on impact (basket.js); landed vegetables get the same offset via GSAP */
.basket { translate: 0 var(--dip, 0px); }
.basket-back { z-index: 1; }
/* .fly: z-index 2-3 and 5-7 inline, in the order the vegetables overlap in the design */
.basket-occluder { z-index: 4; }
.basket-front { z-index: 10; }
.basket-final { z-index: 11; -webkit-tap-highlight-color: transparent; } /* on top of all layers: takes the taps */

.footer-link { font-size: calc(12 * var(--u)); line-height: calc(20 * var(--u)); white-space: nowrap; }

/* ---------- Lead popup (Figma 41:149) ---------- */
html:has(.lead[open]) { overflow: hidden; }
.lead {
  width: calc(317 * var(--u));
  height: calc(654 * var(--u));
  max-width: none;
  max-height: 100dvh;
  padding: 0;
  border: 0;
  overflow: auto;
  background: url("/assets/svg/popup-bg.svg") 0 0 / 100% 100% no-repeat;
  color: var(--cream);
  font-weight: 400;
  text-align: left;
  outline: none; /* the dialog takes the initial focus (app.js); the shape itself needs no ring */
}
.lead::backdrop { background: rgba(0, 0, 0, .6); }
.lead form, .lead-done { display: contents; }
.lead [hidden] { display: none; }

.lead-close {
  position: absolute;
  top: calc(4 * var(--u));
  right: calc(4 * var(--u));
  width: calc(32 * var(--u));
  height: calc(32 * var(--u));
  padding: 0;
  border: 0;
  background: none;
  color: var(--cream);
  font: 400 calc(22 * var(--u)) / 1 "Victor Mono", monospace;
  cursor: pointer;
}

.field { display: block; border-bottom: .6px solid var(--cream); overflow: hidden; }
/* iOS zooms into inputs under 16 px: render at >= 16 px and scale down to the design size (10 px) */
.field input {
  position: absolute;
  inset: 0 auto auto 0;
  width: 160%;
  height: 160%;
  transform: scale(.625);
  transform-origin: 0 0;
  padding: calc(16 * var(--u)) calc(16 * var(--u)) 0 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--cream);
  font: 400 max(16px, calc(16 * var(--u))) / 1.2 "Victor Mono", monospace;
  outline: none;
}
.field input::placeholder { color: rgba(255, 241, 222, .7); opacity: 1; }
.field:focus-within { border-bottom-width: 1.2px; }

.services { margin: 0; padding: 0; border: 0; }
.services legend { padding: 0; font-size: calc(10 * var(--u)); line-height: 1.2; }
.services .hint { margin: calc(4 * var(--u)) 0 calc(16 * var(--u)); font-size: calc(8 * var(--u)); line-height: calc(11 * var(--u)); opacity: .6; }
.services .check + .check { margin-top: calc(5 * var(--u)); }

.check { display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(10 * var(--u)); line-height: 1.3; cursor: pointer; }
.check input {
  flex: none;
  appearance: none;
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  margin: 0;
  border: 1px solid var(--cream);
  border-radius: 0;
  background: none;
  cursor: pointer;
}
.check input:checked { border: 0; background: url("/assets/svg/checkbox-checked.svg") 0 0 / 100% 100%; }
.check input:focus-visible { outline: 1px solid var(--cream); outline-offset: 2px; }

.consent { align-items: flex-start; font-size: calc(8 * var(--u)); line-height: calc(11 * var(--u)); }
.consent span { opacity: .6; }
.consent a { text-decoration: underline; }

.lead-submit {
  padding: 0;
  border: 0;
  background: url("/assets/svg/popup-button-bg.svg") center / 100% 100% no-repeat;
  color: #000;
  font: 600 calc(14 * var(--u)) / calc(20 * var(--u)) "Victor Mono", monospace;
  cursor: pointer;
}
.lead-submit:disabled { opacity: .6; cursor: progress; }

.lead-error { font-size: calc(9 * var(--u)); line-height: 1.3; }
.lead-done-title { font-size: calc(30 * var(--u)); font-weight: 600; line-height: 1.2; text-align: center; }
.lead-done-text { font-size: calc(12 * var(--u)); line-height: 1.4; text-align: center; }

/* Popup opens like a sheet put on the table: rises with a slight turn, settles without bounce */
@keyframes lead-in { from { opacity: 0; transform: translateY(calc(40 * var(--u))) rotate(-2deg) scale(.96); } }
@keyframes lead-out { to { opacity: 0; transform: translateY(calc(24 * var(--u))) rotate(1deg) scale(.98); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(calc(12 * var(--u))); } }
.lead[open] { animation: lead-in .5s cubic-bezier(.2, .9, .25, 1); }
.lead[open]::backdrop { animation: fade-in .3s ease-out; }
.lead.closing { animation: lead-out .22s ease-in forwards; }
.lead.closing::backdrop { animation: fade-out .22s ease-in forwards; }
.lead-done:not([hidden]) > * { animation: rise-in .45s cubic-bezier(.2, .9, .25, 1) both; }
.lead-done:not([hidden]) > :nth-child(2) { animation-delay: .07s; }
.lead-done:not([hidden]) > :nth-child(3) { animation-delay: .14s; }
@media (prefers-reduced-motion: reduce) {
  .lead[open], .lead[open]::backdrop, .lead.closing, .lead.closing::backdrop, .lead-done > * { animation: none; }
}

.trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

@keyframes shake { 25% { translate: -4px 0; } 75% { translate: 4px 0; } }
.shake { animation: shake .25s 2; }

/* ---------- Privacy page ---------- */
.doc main { max-width: 720px; margin: 0 auto; padding: 24px 16px 48px; font-weight: 400; font-size: 14px; line-height: 1.5; }
.doc h1 { margin: 16px 0 24px; font-size: 22px; line-height: 1.2; }
.doc h2, .doc h3 { margin: 28px 0 12px; font-size: 16px; }
.doc p, .doc ul { margin: 0 0 12px; }
.doc ul { padding-left: 20px; list-style: disc; }
.doc a { text-decoration: underline; }
.doc .back { font-weight: 600; text-decoration: none; }