/* Soft Clay tokens, as the app and the orchard console have them. */
:root {
  color-scheme: light dark;
  --ground: #e7efe0;
  --surface: #fffefb;
  --tint: #eaf2e4;
  --ink: #33463a;
  --muted: #6b736c;
  --line: #d9d9cf;
  --fern: #4f7d5c;
  --fern-text: #f2f8ef;
  --soil: #e8e4cf;
  --bark: #6e6749;
  /* The levels of a tree in the orchard console, from first steps to last. */
  --level-0: #b86b00;
  --level-1: #17843f;
  --level-2: #0465af;
  --level-3: #8b306a;
  --shadow-raised: 0 2px 3px rgba(70, 96, 74, .06), 0 8px 20px rgba(70, 96, 74, .10);
  --shadow-phone: 0 4px 8px rgba(70, 96, 74, .10), 0 24px 48px rgba(70, 96, 74, .18);
  --radius-card: 20px;
  --rounded: ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  /* The theme button shows the moon in light, and the sun in dark. */
  --moon-icon: block;
  --sun-icon: none;
}

/* Dark: when the system is dark and the visitor chose nothing else, or when
   the visitor chose dark with the button in the top bar (theme.js). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #1a211b;
    --surface: #242c25;
    --tint: #2c362d;
    --ink: #e8ece6;
    --muted: #9aa39b;
    --line: #2c332d;
    --fern: #7fae8f;
    --fern-text: #152018;
    --soil: #302e20;
    --bark: #aba37e;
    --level-0: #c5770f;
    --level-1: #54b66e;
    --level-2: #59aaf8;
    --level-3: #ef8bc5;
    --shadow-raised: 0 2px 3px rgba(0, 0, 0, .25), 0 8px 20px rgba(0, 0, 0, .30);
    --shadow-phone: 0 4px 8px rgba(0, 0, 0, .30), 0 24px 48px rgba(0, 0, 0, .40);
    --moon-icon: none;
    --sun-icon: block;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #1a211b;
  --surface: #242c25;
  --tint: #2c362d;
  --ink: #e8ece6;
  --muted: #9aa39b;
  --line: #2c332d;
  --fern: #7fae8f;
  --fern-text: #152018;
  --soil: #302e20;
  --bark: #aba37e;
  --level-0: #c5770f;
  --level-1: #54b66e;
  --level-2: #59aaf8;
  --level-3: #ef8bc5;
  --shadow-raised: 0 2px 3px rgba(0, 0, 0, .25), 0 8px 20px rgba(0, 0, 0, .30);
  --shadow-phone: 0 4px 8px rgba(0, 0, 0, .30), 0 24px 48px rgba(0, 0, 0, .40);
  --moon-icon: none;
  --sun-icon: block;
}

:root[data-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 17px/1.55 system-ui, -apple-system, sans-serif;
}

h1, h2, .wordmark, .store, .button, .premium { font-family: var(--rounded); }
h1 { font-size: clamp(40px, 7vw, 64px); line-height: 1.05; margin: 0 0 20px; }
h2 { font-size: clamp(26px, 4vw, 36px); line-height: 1.15; margin: 0 0 12px; }
p { margin: 0 0 12px; }
a { color: var(--fern); }
img, video, picture { display: block; max-width: 100%; height: auto; }

main, .top, footer { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
main > section { padding: 40px 0; }

.top { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; padding-bottom: 16px; }
.wordmark { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 700; color: var(--ink); text-decoration: none; }
.wordmark img { width: 40px; border-radius: 10px; }
.top nav { display: flex; gap: 20px; }
.top nav a { color: var(--muted); text-decoration: none; font-weight: 600; }
.actions { display: flex; align-items: center; gap: 20px; }

.theme {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-raised);
  color: var(--ink);
  cursor: pointer;
}
.theme svg { width: 20px; height: 20px; }
.theme .moon { display: var(--moon-icon); }
.theme .sun { display: var(--sun-icon); }

.hero { display: grid; grid-template-columns: 1fr 300px; gap: 48px; align-items: center; }
.lead { font-size: 20px; color: var(--muted); max-width: 34em; }
.note { color: var(--muted); font-size: 15px; }

/* No link and no Apple badge: the badge is for apps that are on the App
   Store. At launch, Apple's own badge and a link to the app take its place. */
.store {
  display: inline-block;
  margin: 16px 0 8px;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ground);
  font-weight: 700;
}

.phone { border-radius: 36px; box-shadow: var(--shadow-phone); background: var(--surface); }
.hero .phone { width: 300px; }
.hero-video { cursor: pointer; }

.skills { text-align: center; }
.skills > p { color: var(--muted); max-width: 32em; margin: 0 auto; }
.skills ul { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; padding: 0; margin: 32px 0 0; }
.skills li { font-family: var(--rounded); font-weight: 700; }
.skills li img { width: 120px; margin: 0 auto 4px; }

.features { position: relative; }
/* A row is the phone and the text, centered on one line. Every second row
   is the other way round. */
.features article { display: grid; grid-template-columns: 240px minmax(0, 30em); justify-content: start; align-items: center; gap: 48px; padding: 16px 0; }
.features article:nth-of-type(even) { grid-template-columns: minmax(0, 30em) 240px; justify-content: end; }
.features article:nth-of-type(even) > picture,
.features article:nth-of-type(even) > .art { order: 2; }
.features article p { font-size: 19px; color: var(--muted); }
.features .art { width: 200px; margin: 0 auto; }

/* A large, faint copy of the corner bonsai behind the page, with its pot on
   the bottom of the window. Grown, its canopy reaches the top. It grows with
   the scroll, as the corner one does. */
.backdrop {
  position: fixed;
  z-index: -1;
  bottom: 0;
  left: 50%;
  width: 150vh;
  height: 150vh;
  transform: translateX(-50%);
  opacity: .06;
  pointer-events: none;
}

/* The feature graph: the script draws it in the gutter on the left. Each
   node fills when it passes the middle of the window. */
.features.alive { padding-left: 112px; }
.graph { display: none; }
.alive .graph { display: block; position: absolute; top: 0; left: 0; width: 112px; overflow: visible; }
.graph path { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.graph .base path { stroke: var(--line); }
.graph .filled path { stroke: url(#graph-fill); }
.graph circle {
  fill: var(--ground);
  stroke: var(--line);
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
  transition: fill .3s, stroke .3s, transform .3s;
}
.graph circle.unlocked { fill: var(--level); stroke: var(--level); transform: scale(1.25); }

.premium {
  display: inline-block;
  margin-bottom: 10px;
  white-space: nowrap;
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--soil);
  color: var(--bark);
  font-size: 14px;
  font-weight: 700;
}

.orchards {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 40px;
  align-items: center;
  margin: 24px 0;
  padding: 40px;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-raised);
}
.orchards ul { padding-left: 20px; margin: 0 0 16px; }
.orchards li { margin-bottom: 6px; }

/* A Premium capsule inside a sentence. */
p .premium { margin: 0 2px; padding: 0 10px; vertical-align: 1px; }
.screen { border-radius: 12px; box-shadow: var(--shadow-raised); }

.button {
  display: inline-block;
  margin-top: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--fern);
  color: var(--fern-text);
  font-weight: 700;
  text-decoration: none;
}

.closing { text-align: center; }
.entrance { position: relative; max-width: 420px; margin: 0 auto 16px; }
.entrance .waving { position: absolute; left: 50%; bottom: 2.3%; width: auto; height: 45%; transform: translateX(-50%); }
.closing > p:not(.store) { color: var(--muted); }

/* The space under the footer keeps the corner bonsai off its text. */
footer { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 32px; padding-bottom: 150px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; }
footer a { color: var(--muted); }
footer span { margin-left: auto; }

/* The bonsai in the corner grows as the page scrolls. At the bottom it
   bounces, and petals fall. */
.corner { position: fixed; z-index: 2; right: 12px; bottom: 12px; width: 120px; height: 120px; pointer-events: none; }
.corner canvas { width: 100%; height: 100%; }
.corner.celebrate canvas { animation: bounce .7s ease-out; transform-origin: 50% 96%; }
.petal {
  position: absolute;
  top: 30%;
  left: var(--start);
  width: 7px;
  height: 7px;
  border-radius: 60% 0;
  opacity: 0;
  animation: fall 1.6s ease-in forwards;
}
@keyframes bounce {
  30% { transform: scale(1.12, .9); }
  55% { transform: scale(.95, 1.08) translateY(-6px); }
  80% { transform: scale(1.02, .98); }
}
@keyframes fall {
  10% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--drift), 90px) rotate(240deg); }
}

/* The page for an address that does not exist. */
.lost { text-align: center; padding-top: 24px; padding-bottom: 56px; }
.lost img { width: 200px; margin: 0 auto 8px; }
.lost p { color: var(--muted); }

/* The privacy, terms and support pages. */
.page { max-width: 720px; padding-top: 24px; padding-bottom: 56px; }
.page h2 { font-size: 24px; margin-top: 36px; }
.page li { margin-bottom: 6px; }
.page .note { margin-bottom: 24px; }
.page table { border-collapse: collapse; width: 100%; margin: 8px 0 16px; font-size: 15px; }
.page th, .page td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--line); }

@media (max-width: 760px) {
  main > section { padding: 40px 0; }
  .top nav { display: none; }
  .hero, .orchards { grid-template-columns: 1fr; }
  .hero .phone { width: 240px; margin: 0 auto; }
  .skills ul { grid-template-columns: repeat(3, 1fr); }
  .skills li img { width: 96px; }
  .features.alive { padding-left: 0; }
  .alive .graph { display: none; }
  .features article, .features article:nth-of-type(even) { grid-template-columns: 1fr; gap: 20px; padding: 24px 0; text-align: center; }
  .features article:nth-of-type(even) > picture,
  .features article:nth-of-type(even) > .art { order: 0; }
  .features .phone { width: 220px; margin: 0 auto; }
  .corner { width: 72px; height: 72px; right: 8px; bottom: 8px; }
  footer { padding-bottom: 96px; }
  .features article p { margin: 0 auto; }
  .orchards { padding: 24px; }
  footer span { margin-left: 0; width: 100%; }
}