/* Food Futures, rebuilt by hand from https://foodfutures.framer.website/
   Every value here was read from the live Framer build (computed styles and component source).
   Breakpoints match Framer's: desktop >= 1200, tablet 810 to 1199.98, phone <= 809.98. */

@font-face { font-family: "General Sans"; src: url("assets/fonts/general-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("assets/fonts/general-sans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("assets/fonts/general-sans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("assets/fonts/general-sans-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter Variable"; src: url("assets/fonts/inter-variable-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("assets/fonts/dm-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

/* ---------- Design tokens ---------- */

:root {
  /* Color */
  --page: #f3f3f3;
  --ink: #000;
  --ink-muted: rgb(0 0 0 / 0.6);
  --accent: #00a577;
  --on-accent: #fff;
  --glass: rgb(255 255 255 / 0.76);
  --hairline: rgb(0 0 0 / 0.08);
  --hairline-solid: #e6e6e6;
  --header-bg: rgb(243 243 243 / 0.95);
  --step-number: #ccc;
  --step-track: rgb(0 0 0 / 0.1);
  --screen-tint: rgb(255 255 231 / 0.15);

  /* Type */
  --font-sans: "General Sans", system-ui, sans-serif;
  --font-label: "Inter Variable", system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, monospace;
  --text-display: 68px;
  --text-heading: 48px;
  --text-lead: 23px;
  --leading-lead: 1.2em;
  --text-statement: 52px;
  --text-statement-2: 50px;

  /* Layout */
  --content: 872px;

  /* Motion. Tween curves come from the Framer source; the --spring-* tokens are
     sampled from Framer's spring settings by script.js (these fallbacks cover no-JS). */
  --ease-reveal: cubic-bezier(0.2, 0.65, 0.3, 0.9);
  --ease-exit: cubic-bezier(0.25, 0.1, 0.35, 1);
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --ease-out: cubic-bezier(0, 0, 0.58, 1);
  --ease-link: cubic-bezier(0.44, 0, 0.56, 1);
  --spring-card: 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
  --spring-press: 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  --spring-link: 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  --spring-nudge: 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  --spring-exit: 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 809.98px) {
  :root {
    --text-display: 57px;
    --text-heading: 39px;
    --text-lead: 19px;
    --leading-lead: 1.3em;
    --text-statement: 32px;
    --text-statement-2: 32px;
  }
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--page); scroll-behavior: smooth; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--font-sans); }
h1, h2, p, figure, ol { margin: 0; }
img, svg { display: block; }
img { object-fit: cover; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; cursor: pointer; }
::selection { background: rgb(0 165 119 / 0.22); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

@keyframes fade-in { from { opacity: 0; } }

.display {
  width: 100%;
  font-size: var(--text-display);
  font-weight: 500;
  line-height: 1em;
  letter-spacing: -0.04em;
}
.heading {
  font-size: var(--text-heading);
  font-weight: 500;
  line-height: 1.1em;
  letter-spacing: -0.03em;
}
.arrow { flex: none; width: 16px; height: 16px; }

/* ---------- Links and buttons ---------- */

.text-button,
.site-footer {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2em;
  letter-spacing: -0.02em;
}

.text-button,
.announce {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 24px;
}
.text-button .arrow,
.announce .arrow { transition: translate var(--spring-nudge); }
.text-button:hover .arrow,
.announce:hover .arrow { translate: 4px 0; }

.announce {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  line-height: 1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  transition: color var(--spring-nudge);
}
.announce:hover { color: var(--ink); }

/* Framer adds 8px of bottom padding on hover; the label and arrow lift 4px on a spring. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 24px;
  border-radius: 80px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3em;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.button > * { transition: translate var(--spring-press); }
.button:hover > * { translate: 0 -4px; }
.button .arrow { width: 20px; height: 20px; }

/* ---------- Header (desktop and tablet only) ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  height: 68px;
  padding: 0 36px;
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  animation: fade-in 0.6s linear both;
}
.site-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--hairline-solid);
}
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--content);
  height: 100%;
  margin: 0 auto;
}
.site-header__side { display: flex; width: 200px; }
.site-header__side--end { justify-content: flex-end; }
.site-header__logo img { width: 65px; height: 64px; }

/* ---------- Hero ---------- */

.hero { padding-top: 172px; }
.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  max-width: var(--content);
  margin: 0 auto;
  text-align: center;
  animation: fade-in 0.6s linear 0.1s both;
}
.lead {
  max-width: 500px;
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  letter-spacing: -0.02em;
  color: var(--ink-muted);
}

/* ---------- Intro: phone mockup and glass cards ---------- */

.intro { padding-top: 128px; overflow: hidden; }
.intro__stage {
  position: relative;
  max-width: var(--content);
  height: 660px;
  margin: 0 auto;
}

.phone {
  position: absolute;
  top: calc(50% - 330.5px);
  left: calc(50% - 162px);
  width: 324px;
  height: 661px;
  overflow: hidden;
}
.phone__screen {
  position: absolute;
  inset: 6px 12px 5px;
  overflow: hidden;
  border-radius: 30px;
  background: var(--page);
}
.phone__screen::before { content: ""; position: absolute; inset: 0; background: var(--screen-tint); }
.phone__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 123px;
  height: auto;
  translate: -50% -50%;
}
.phone__bevel { position: absolute; top: 0; left: 0.5px; width: 323px; height: 660px; }

.widget { position: absolute; }
.widget img { flex: none; }
.widget--co2 { right: -14px; bottom: 45px; width: 424px; height: 200px; }
.widget--boundaries { top: 33%; left: 84%; height: 227px; translate: -50% -50%; }
.widget--soy { top: 45%; left: 19%; width: 376px; translate: -50% -50%; }

/* The 1px edge is an inset shadow so it never shifts layout, like Framer's ::after border. */
.glass-card {
  display: flex;
  height: 100%;
  padding: 24px;
  border-radius: 16px;
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--hairline);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.widget--co2 .glass-card { flex-direction: column; align-items: center; }
.widget--co2 img { width: 400px; height: 150px; }
.widget--boundaries .glass-card { align-items: flex-end; }
.widget--boundaries img { width: 352px; height: 190px; }
.widget--soy img { width: 332px; height: 356px; }

/* Framer "appear" effect: runs once, the moment a card enters the viewport. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-appear] {
    opacity: 0;
    translate: var(--from);
    transition:
      opacity var(--spring-card) var(--delay, 0s),
      translate var(--spring-card) var(--delay, 0s);
  }
  .js [data-appear].is-in { opacity: 1; translate: none; }
}

/* ---------- Story: three statements with scroll reveals ---------- */

.story {
  display: flex;
  flex-direction: column;
  gap: 400px;
  max-width: 900px;
  margin: 0 auto;
  padding: 430px 40px;
  overflow: clip;
}
.story__block { display: flex; flex-direction: column; gap: 40px; overflow: clip; }
.story__label {
  font-family: var(--font-label);
  font-size: 24px;
  line-height: 1.2em;
  color: var(--ink-muted);
}
.story__text { font-size: var(--text-statement); line-height: 1.3em; }
.story__block + .story__block .story__text { font-size: var(--text-statement-2); }
.story__art { display: flex; justify-content: flex-end; }
.story__art img { width: 400px; height: 420px; }
.story__art--fit img { object-fit: contain; }

/* Framer text reveal: replays every time 30% of the text enters or leaves.
   Entering uses the component's 0.8s curve; leaving uses Motion's defaults. */
[data-reveal] > span { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] > span {
    transition:
      clip-path 0.3s var(--ease-exit),
      translate var(--spring-exit);
  }
  .js [data-reveal="top"]:not(.is-in) > span { clip-path: inset(100% 0 0 0); translate: 0 -40px; }
  .js [data-reveal="left"]:not(.is-in) > span { clip-path: inset(0 100% 0 0); translate: -40px 0; }
  .js [data-reveal].is-in > span {
    clip-path: inset(0);
    transition:
      clip-path 0.8s var(--ease-reveal),
      translate 0.8s var(--ease-reveal);
  }
}

/* ---------- How it Works ---------- */

.steps { position: relative; z-index: 1; padding-top: 164px; }
.steps__inner {
  display: flex;
  flex-direction: column;
  gap: 44px;
  max-width: 1100px;
  margin: 0 auto;
}
.steps__frame { overflow: hidden; }
.steps__list {
  display: flex;
  gap: 20px;
  padding: 40px;
  list-style: none;
}

/* Desktop: the active card takes double width, plays a 5s progress line, then hands off. */
.step {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 24px;
  overflow: hidden;
  cursor: pointer;
  transition: flex-grow 0.5s var(--ease-in-out);
}
.step.is-active { flex-grow: 2; }
.step__track {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background: var(--step-track);
}
.step__fill {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: bottom;
}
.step.is-active .step__fill { animation: step-progress 5s linear forwards; }
@keyframes step-progress { to { transform: scaleY(1); } }

.step__head {
  all: unset;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  cursor: inherit;
}
.step__head:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.step__num {
  font-size: 40px;
  font-weight: 700;
  line-height: 1em;
  letter-spacing: -0.04em;
  color: var(--step-number);
  opacity: 0.5;
}
.step__title {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2em;
  letter-spacing: -0.01em;
  opacity: 0.7;
}
.step.is-active :is(.step__num, .step__title) { opacity: 1; }

.step__body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.3s var(--ease-out),
    opacity 0.3s var(--ease-out);
}
.step.is-active .step__body { grid-template-rows: 1fr; opacity: 1; }
.step__body-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  overflow: hidden;
}
.step__text {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3em;
  letter-spacing: -0.01em;
  opacity: 0.8;
}
.step__media { aspect-ratio: 1; }
.step__media img { width: 100%; height: 100%; border-radius: 8px; }

/* The original component switches to a plain list below 768px, not at Framer's 810px breakpoint. */
@media (max-width: 767.98px) {
  .steps__list { flex-direction: column; }
  .step { gap: 16px; padding: 0; overflow: visible; cursor: auto; }
  .step__track { display: none; }
  .step__head { gap: 16px; }
  .step__num, .step__title { opacity: 1; }
  .step__body { grid-template-rows: 1fr; opacity: 1; transition: none; }
  .step__media { aspect-ratio: 2240 / 2000; }
  .step__media img { object-fit: fill; }
}

/* ---------- Closing call to action ---------- */

.cta { position: relative; z-index: 1; padding: 164px 0; }
.cta__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 44px;
  max-width: var(--content);
  margin: 0 auto;
}
.cta__title { max-width: 644px; }

/* ---------- Footer ---------- */

.site-footer {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 0 0 32px;
  color: var(--ink-muted);
}
.site-footer::before { content: ""; align-self: stretch; height: 1px; background: var(--hairline); }
.site-footer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--content);
}
.site-footer__meta { display: flex; align-items: center; gap: 80px; }
.site-footer__links,
.site-footer__social { display: flex; align-items: center; gap: 28px; }
.site-footer__links a,
.site-footer__social a { transition: color 0.2s var(--ease-link); }
.site-footer__links a:hover,
.site-footer__social a:hover { color: var(--ink); }

/* ---------- Legal page ---------- */

.legal {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 680px;
  margin: 0 auto;
  padding: 152px 20px 96px;
}
.legal h2 { margin-top: 16px; font-size: 20px; font-weight: 500; line-height: 1.2em; letter-spacing: -0.02em; }
.legal p { font-size: 16px; line-height: 1.6em; color: rgb(0 0 0 / 0.72); }
.legal__date { font-size: 14px; color: var(--ink-muted); }
.legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; }

/* ---------- Tablet ---------- */

@media (max-width: 1199.98px) {
  .hero__content { padding: 0 32px; }
  .intro { padding: 128px 36px 0; }
  .widget--soy { left: 21%; width: 360px; }
  .steps { padding: 164px 36px 0; }
  .cta { padding: 164px 36px; }
  .site-footer { padding: 0 36px 32px; }
  .site-footer__meta { gap: 40px; }
  .site-footer__links,
  .site-footer__social { gap: 24px; }
}

/* ---------- Phone ---------- */

@media (max-width: 809.98px) {
  .site-header { display: none; }

  .hero { padding-top: 152px; }
  .hero__content { gap: 28px; padding: 0 20px; }

  .intro { padding: 72px 20px 0; }
  .intro__stage { height: 556px; }
  .phone { top: calc(53.777% - 257px); left: calc(50% - 125.865px); width: 252px; height: 514px; }
  /* In the original the phone variant's screen collapses to 0x0, so the frame shows empty. */
  .phone__screen { display: none; }
  .phone__bevel { left: 0.4px; width: 251px; height: 513px; }
  .widget { display: none; }

  .story { gap: 301px; padding: 159px 40px; }
  .story__art img { width: 310px; }
  .story__art--last img { width: 290px; height: 350px; }

  .steps { padding: 64px 20px; }
  .steps__inner { gap: 36px; }

  .cta { padding: 64px 20px; }
  .cta__inner { gap: 36px; }

  .site-footer { padding: 0 0 44px; }
  .site-footer__row { align-items: flex-start; justify-content: flex-start; gap: 44px; padding: 0 20px; }
  .site-footer__meta { align-items: flex-start; gap: 44px; }
  .site-footer__links,
  .site-footer__social { flex-direction: column; align-items: flex-start; gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}