/* Upleaf landing page. Plain CSS, no build step. */

/* Fraunces is served from this site (SIL OFL, assets/fonts/Fraunces-OFL.txt),
   so pages make no requests to font services. Text uses the system font. */
@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/Fraunces.ttf") format("truetype");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/Fraunces-Italic.ttf") format("truetype");
  font-weight: 100 900; font-style: italic; font-display: swap;
}

:root {
  --cream: #F6F1E7;
  --ink: #1C2B21;
  --moss: #6F746C;
  --leaf: #5E9E5A;
  --coral: #F08A6C;
  --clay: #C98B6B;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  --serif: "Fraunces", Georgia, serif;
  --page: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 17px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }

/* Fine monotone grain over everything, like the app's aura backgrounds */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 100;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .17 0 0 0 0 .13 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Blurred pastel auras. Position with --x/--y, size with --s, colour with --c */
.aura {
  position: absolute; z-index: 0; pointer-events: none;
  left: var(--x); top: var(--y);
  width: var(--s); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--c);
  opacity: var(--o, 1);
  filter: blur(120px);
}

section { position: relative; }
main { overflow-x: clip; }
section > :not(.aura):not(.poppies) { position: relative; z-index: 1; }

.section { padding: 120px 24px; text-align: center; }
.section h2 {
  font: 600 56px/1.1 var(--sans);
  letter-spacing: -.025em;
  max-width: 900px; margin: 0 auto;
}
.lead {
  max-width: 640px; margin: 20px auto 0;
  font-size: 20px; line-height: 1.5; color: var(--moss);
}
.muted { color: var(--moss); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 999px; font: 600 16px/1 var(--sans);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-dark { background: var(--ink); color: #fff; box-shadow: 0 10px 24px rgba(28, 43, 33, .22); }
.btn-light { background: var(--cream); color: var(--ink); height: 52px; padding: 0 26px; }
.btn-small { height: 48px; padding: 0 26px; }
.btn-large { height: 64px; padding: 0 34px; font-size: 18px; }
.apple {
  width: 18px; height: 20px; flex: none;
  background: currentColor;
  -webkit-mask: url(assets/logos/apple.svg) center / contain no-repeat;
          mask: url(assets/logos/apple.svg) center / contain no-repeat;
}

/* Frosted glass card */
.glass {
  background: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px);
  border: 1.2px solid rgba(255, 255, 255, .9);
  border-radius: 36px;
  box-shadow: 0 20px 40px rgba(115, 84, 51, .08);
}

/* Sprig and objects sit on a soft ground shadow */
.sprig-stage { position: relative; display: inline-block; }
.ground-shadow {
  position: absolute; left: 50%; bottom: 0; z-index: -1;
  width: 62%; height: 9%;
  transform: translate(-50%, 40%);
  border-radius: 50%;
  background: rgba(138, 106, 74, .2);
  filter: blur(14px);
}

/* Nav */
.nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; gap: 40px;
  max-width: calc(var(--page) + 48px); margin: 0 auto; padding: 24px;
}
.brand { display: flex; align-items: center; gap: 12px; font: 300 28px/1 var(--serif); }
.brand img { border-radius: 10px; }
.nav-links { display: flex; gap: 40px; margin-left: auto; font-weight: 500; font-size: 16px; color: var(--moss); }
.nav-links a:hover { color: var(--ink); }

/* Hero */
.hero { padding: 110px 24px 80px; text-align: center; }
.hero-inner { display: flex; flex-direction: column; align-items: center; }
.hero .sprig { height: 400px; width: auto; }
.hero-title { margin-top: 24px; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.hero-title .sans { font: 600 84px/1 var(--sans); letter-spacing: -.04em; }
.hero-title .serif {
  font: italic 600 92px/1.05 var(--serif);
  letter-spacing: -.01em; color: var(--leaf);
  font-variation-settings: "SOFT" 0, "WONK" 1;
}
.hero .lead { max-width: 720px; font-size: 22px; }
.hero .btn-large { margin-top: 36px; }
.fine { margin-top: 20px; font-size: 15px; color: var(--moss); }

.poppies { position: absolute; z-index: 0; pointer-events: none; }
.hero .poppies-left { width: 480px; left: -160px; top: 400px; }
.hero .poppies-right { width: 440px; right: -160px; top: 430px; }

/* Works with */
.works-with { max-width: var(--page); margin: 0 auto; padding: 8px 24px 64px; text-align: center; border-bottom: 1px solid rgba(28, 43, 33, .1); }
.works-with .muted { font-weight: 500; font-size: 16px; }
.logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 48px; margin-top: 28px; }
.logos li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 19px; letter-spacing: -.015em; color: rgba(28, 43, 33, .8); }
.mark {
  width: 28px; height: 28px; background: var(--c);
  -webkit-mask: var(--logo) center / contain no-repeat;
          mask: var(--logo) center / contain no-repeat;
}

/* The problem */
.weight {
  max-width: 1040px; margin: 64px auto 0; padding: 40px 0 44px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end;
}
.weight figure { display: flex; flex-direction: column; align-items: center; }
.weight figure + .times + figure { border-left: 1px solid rgba(28, 43, 33, .08); }
.weight img { height: 270px; width: auto; }
.weight figcaption { margin-top: 30px; font-weight: 500; color: var(--moss); }
.kg { font: 600 68px/1.1 var(--sans); letter-spacing: -.03em; }
.kg.clay { color: var(--clay); }
.times {
  align-self: center; width: 76px; height: 76px; margin: 0 -38px; z-index: 2;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--cream); border: 1.2px solid #fff;
  box-shadow: 0 20px 40px rgba(115, 84, 51, .08);
  color: var(--clay); font-weight: 600; font-size: 20px;
}
.source { margin-top: 20px; font-size: 13px; color: #8E928A; }
.subhead { margin-top: 120px; font: 600 40px/1.15 var(--sans); letter-spacing: -.02em; }

.cards { max-width: 1160px; margin: 56px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; text-align: left; }
.card { padding: 16px 16px 32px; border-radius: 32px; }
.card-art {
  position: relative; height: 236px; border-radius: 22px;
  background: color-mix(in srgb, var(--tint) 55%, transparent);
  display: grid; place-items: center;
}
.card-art img { position: relative; z-index: 1; height: 190px; width: auto; }
.card-art .ground-shadow { bottom: 30px; width: 120px; height: 18px; z-index: 0; transform: translateX(-50%); }
.card h4 { margin: 28px 12px 0; font-weight: 600; font-size: 21px; line-height: 1.3; letter-spacing: -.015em; }
.card p { margin: 10px 12px 0; color: var(--moss); line-height: 1.55; }

.bridge {
  margin: 110px auto 0; display: flex; align-items: center; justify-content: center; gap: 18px;
  font-weight: 600; font-size: 30px; line-height: 1.27; letter-spacing: -.02em; text-align: left;
}
.bridge img { width: 44px; flex: none; }
.bridge em { font-style: normal; color: var(--leaf); }

/* How it works */
.how { padding-top: 40px; }
.steps { max-width: 1140px; margin: 64px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; text-align: left; }
.screen { width: 100%; max-width: 314px; margin: 0 auto; border-radius: 44px; box-shadow: 0 30px 60px rgba(84, 64, 43, .16); }
.step h4 { margin: 44px 20px 0; font-weight: 600; font-size: 22px; letter-spacing: -.015em; }
.step p { margin: 10px 20px 0; color: var(--moss); }
.dots { display: none; }

/* Sprig grows */
.stages {
  max-width: 1120px; margin: 64px auto 0; padding: 48px 0 44px;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.stages li { display: flex; flex-direction: column; align-items: center; }
.stage-art { height: 260px; display: flex; align-items: flex-end; }
.stage-art img { height: var(--h); width: auto; }
.stages strong { margin-top: 24px; font-weight: 600; font-size: 20px; }
.stages span { margin-top: 4px; font-size: 15px; color: var(--moss); }

/* Privacy */
.privacy-card {
  max-width: 1120px; margin: 0 auto; padding: 56px 64px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; text-align: left;
}
.privacy-intro { padding-right: 56px; border-right: 1px solid rgba(28, 43, 33, .08); }
.sprig-stage.tiny img { width: 170px; }
.privacy-card h2 { margin: 36px 0 0; font-size: 40px; text-align: left; }
.privacy-card p { margin-top: 14px; color: var(--moss); font-size: 18px; }
.promises { display: flex; flex-direction: column; justify-content: center; }
.promises li { display: flex; gap: 16px; align-items: flex-start; padding: 22px 0; }
.promises li + li { border-top: 1px solid rgba(28, 43, 33, .08); }
.promises img { width: 64px; flex: none; margin-top: -6px; }
.promises strong { display: block; font-weight: 600; font-size: 20px; letter-spacing: -.015em; }
.promises span { display: block; margin-top: 4px; color: var(--moss); font-size: 16px; }

/* Final call to action */
.final { padding-top: 60px; padding-bottom: 140px; }
.final .sprig { height: 380px; width: auto; }
.final-title { margin-top: 28px; font-size: 72px !important; letter-spacing: -.035em !important; }
.final .btn-large { margin-top: 40px; }
.final .poppies-left { width: 420px; left: max(-80px, calc(50% - 720px + 150px)); top: 120px; }
.final .poppies-right { width: 360px; right: max(-60px, calc(50% - 720px + 160px)); top: 170px; }

/* Footer */
.footer {
  position: relative; overflow: hidden;
  background: var(--ink); color: var(--cream);
  border-radius: 48px 48px 0 0; padding: 96px 24px 40px;
}
.footer::before {
  content: ""; position: absolute; width: 700px; aspect-ratio: 1; left: -200px; top: -260px;
  border-radius: 50%; background: rgba(94, 158, 90, .22); filter: blur(160px);
}
.footer > * { position: relative; max-width: var(--page); margin-left: auto; margin-right: auto; }
.footer-top { display: flex; justify-content: space-between; gap: 48px; }
.footer .brand { font-size: 34px; }
.tagline { margin-top: 28px; font: 300 22px/1.3 var(--serif); }
.tagline em { font-style: italic; color: #A9CFA2; }
.muted-light { margin-top: 6px; color: #A9AEA6; font-size: 16px; }
.footer .btn-light { margin-top: 28px; }
.footer-cols { display: grid; grid-template-columns: repeat(3, 200px); }
.footer-cols h5 { font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #A9CFA2; margin-bottom: 18px; }
.footer-cols a { display: block; margin-bottom: 14px; font-weight: 500; font-size: 16px; }
.footer-cols a:hover { color: #A9CFA2; }
.napping { display: flex; align-items: flex-end; gap: 16px; margin-top: 48px; }
.napping img { width: 110px; }
.napping em { font: italic 300 15px var(--serif); color: #A9AEA6; padding-bottom: 14px; }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 16px;
  padding-top: 32px; border-top: 1px solid rgba(246, 241, 231, .14);
  font-size: 14px; color: #A9AEA6;
}
.socials { display: flex; gap: 32px; font-weight: 500; color: var(--cream); }

/* Tablet */
@media (max-width: 1100px) {
  .hero .poppies-left { width: 360px; left: -170px; }
  .hero .poppies-right { width: 320px; right: -150px; }
  .footer-cols { grid-template-columns: repeat(3, 160px); }
}

/* Mobile */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .br-wide { display: none; }
  .section { padding: 72px 24px; }
  .section h2 { font-size: 34px; line-height: 1.18; letter-spacing: -.03em; }
  .lead { font-size: 17px; }

  .nav { padding: 16px 24px; }
  .nav-links { display: none; }
  .nav .btn-small { margin-left: auto; height: 40px; padding: 0 18px; font-size: 14px; box-shadow: none; }
  .brand { font-size: 22px; gap: 10px; }
  .brand img { width: 32px; height: 32px; border-radius: 8px; }

  .hero { padding: 76px 24px 48px; }
  .hero .sprig { height: 240px; width: auto; }
  .hero-title .sans { font-size: 46px; }
  .hero-title .serif { font-size: 50px; }
  .hero .lead { font-size: 17px; }
  .hero .poppies-left { width: 210px; left: -80px; top: 170px; }
  .hero .poppies-right { width: 180px; right: -70px; top: 200px; }
  .btn-large { width: 100%; height: 56px; font-size: 17px; }
  .fine { font-size: 13px; max-width: 300px; }

  .works-with { padding-bottom: 40px; margin: 0 24px; padding-left: 0; padding-right: 0; }
  .works-with .muted { font-size: 14px; }
  .logos { gap: 18px 22px; margin-top: 18px; }
  .logos li { font-size: 15px; gap: 8px; }
  .mark { width: 22px; height: 22px; }

  .weight { margin-top: 32px; padding: 28px 8px; border-radius: 28px; grid-template-columns: 1fr 1fr; }
  .weight figure { min-width: 0; }
  .weight img { height: 130px; width: 100%; object-fit: contain; }
  .weight figcaption { white-space: nowrap; }
  .weight figcaption { margin-top: 18px; font-size: 13px; }
  .kg { font-size: 40px; }
  .weight .muted { font-size: 13px; }
  .times { display: none; }
  .source { font-size: 11px; max-width: 300px; margin-left: auto; margin-right: auto; }
  .subhead { margin-top: 56px; font-size: 28px; }

  .cards { grid-template-columns: 1fr; gap: 16px; margin-top: 28px; }
  .card { padding: 12px 12px 24px; border-radius: 26px; }
  .card-art { height: 170px; border-radius: 18px; }
  .card-art img { height: 140px; }
  .card-art .ground-shadow { bottom: 18px; width: 100px; }
  .card h4 { margin-top: 18px; font-size: 19px; }
  .card p { font-size: 16px; }

  .bridge { flex-direction: column; text-align: center; font-size: 22px; margin-top: 56px; }

  .how { padding-top: 24px; }
  .steps {
    display: flex; gap: 16px; margin: 32px -24px 0; padding: 0 24px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .steps::-webkit-scrollbar { display: none; }
  .step { flex: 0 0 260px; scroll-snap-align: start; scroll-margin-left: 24px; }
  .screen { border-radius: 36px; }
  .step h4 { margin: 24px 0 0; font-size: 19px; }
  .step p { margin: 8px 0 0; font-size: 15px; }
  .dots { display: flex; justify-content: center; gap: 6px; margin-top: 28px; }
  .dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(28, 43, 33, .2); transition: width .2s, background .2s; }
  .dots i.on { width: 18px; background: rgba(28, 43, 33, .8); }

  .stages { grid-template-columns: 1fr 1fr; row-gap: 32px; margin-top: 32px; padding: 32px 0; border-radius: 28px; }
  .stage-art { height: 150px; }
  .stage-art img { height: calc(var(--h) * .62); }
  .stages strong { margin-top: 14px; font-size: 17px; }
  .stages span { font-size: 13px; }

  .privacy-card { grid-template-columns: 1fr; gap: 8px; padding: 28px 24px 12px; border-radius: 28px; }
  .privacy-intro { padding: 0 0 24px; border-right: 0; border-bottom: 1px solid rgba(28, 43, 33, .08); }
  .sprig-stage.tiny { margin-top: -96px; }
  .sprig-stage.tiny img { width: 150px; }
  .privacy { padding-top: 120px; }
  .privacy-card h2 { margin-top: 24px; font-size: 30px; }
  .privacy-card p { font-size: 16px; }
  .promises img { width: 56px; }
  .promises strong { font-size: 17px; }
  .promises span { font-size: 14px; }

  .final { padding-top: 32px; padding-bottom: 72px; }
  .final .sprig { height: 220px; width: auto; }
  .final-title { font-size: 38px !important; }
  .final .poppies-left { width: 200px; left: -70px; top: 60px; }
  .final .poppies-right { width: 170px; right: -50px; top: 90px; }

  .footer { border-radius: 32px 32px 0 0; padding: 48px 24px 32px; }
  .footer-top { flex-direction: column; gap: 40px; }
  .footer .brand { font-size: 28px; }
  .footer .brand img { width: 40px; height: 40px; }
  .footer .btn-light { width: 100%; }
  .footer-cols { grid-template-columns: 1fr 1fr; row-gap: 24px; }
  .footer-bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}

/* Live Sprig in the hero (canvas rig, same as the app). The still image shows until it loads. */
.sprig-rig { display: block; height: 480px; width: auto; aspect-ratio: 600 / 890; }
.sprig-rig[hidden] { display: none; }
.hero-sprig.is-live .ground-shadow { display: none; }
@media (max-width: 760px) {
  .sprig-rig { height: 280px; }
}