/* Food Library's website: the app's cream paper, sage, terracotta and gold, its serif for names and its
   watercolours, with the chart colours of the diary for life. No fonts or scripts from elsewhere.
   Text colours are a shade deeper than in the app, for contrast on a web page. */
:root {
  --bg: #F8F4EE; --card: #FFFEFB; --border: #EDE6DB; --paper: #F9F4EA; --track: #EFE8DD;
  --text: #3B3A36; --text-2: #66645E; --sage: #4B5F4A; --link: #A8563C;
  --button: #5A6E50; --button-text: #FBF6EC; --shade: rgba(74, 58, 30, .14);
  --green: #2D6A4F; --protein: #E76F51; --carbs: #E59A2F; --fat: #8C63CF; --peach: #E39A82;
  --gold-1: #F6DE95; --gold-2: #D9A441; --deep-1: #2E3A2D; --deep-2: #4B5F4A;
  --number-1: #C4512F; --number-3: #A8690C; --number-4: #7A4FC0; --mineral: #2A9D8F; --other: #D9547F;
  --serif: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141311; --card: #1F1D1A; --border: #2E2B27; --paper: #292520; --track: #2B2824;
    --text: #EEE9E1; --text-2: #B5AFA5; --sage: #B7CCA9; --link: #E59A80;
    --button: #9DB38E; --button-text: #141311; --shade: rgba(0, 0, 0, .5);
    --green: #5CC28F; --protein: #F08A6E; --carbs: #F2B65A; --fat: #A88AE6;
    --deep-1: #1B211A; --deep-2: #2E3A2D;
    --number-1: #F08A6E; --number-3: #F2B65A; --number-4: #A88AE6; --mineral: #3FC1B0; --other: #F08FB5;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.55 var(--sans); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 22px; }

/* The logo and the language menu stay in view, on frosted paper. */
.top { position: sticky; top: 0; z-index: 30; background: var(--bg); border-bottom: 1px solid transparent; }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .top { background: rgba(248, 244, 238, .78); -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px); }
}
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 10px; padding-bottom: 10px; }
.brand img { height: 46px; width: auto; }
.lang { position: relative; font-size: 15px; }
.lang summary { list-style: none; cursor: pointer; padding: 8px 14px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--card); }
.lang summary::-webkit-details-marker { display: none; }
.lang summary::after { content: " ▾"; color: var(--text-2); }
.lang ul { position: absolute; right: 0; z-index: 5; margin: 6px 0 0; padding: 6px; list-style: none; min-width: 170px;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 14px 34px var(--shade); }
.lang a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--text); text-decoration: none; }
.lang a:hover, .lang a[aria-current] { background: var(--bg); }

/* The first screen: the start screen's painted paper from edge to edge, the words, and a phone with the
   diary in it among floating fruit. */
.hero { position: relative; z-index: 0; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2;
  background: url(img/paper.jpg) top center / cover no-repeat; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, transparent 55%, var(--bg) 100%); }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; align-items: center; padding-top: 54px; padding-bottom: 40px; }
.hero h1 { font: 400 clamp(40px, 6.6vw, 68px)/1.04 var(--serif); letter-spacing: -.01em; color: var(--sage); margin: 0 0 18px; }
.hero h1::after { content: ""; display: block; width: 86px; height: 6px; margin-top: 18px; border-radius: 6px;
  background: linear-gradient(90deg, var(--protein), var(--carbs), var(--green)); }
.hero p { font-size: 20px; max-width: 30em; margin: 0 0 26px; }
.cta { display: inline-block; padding: 15px 28px; border-radius: 999px; background: var(--button); color: var(--button-text);
  font-weight: 600; text-decoration: none; box-shadow: 0 10px 24px var(--shade); }
.cta.soon { background: var(--card); color: var(--sage); border: 1.5px solid var(--button); }
.hero .small { font-size: 15px; color: var(--text-2); margin: 14px 0 0; }

.stage { position: relative; justify-self: center; width: 300px; height: 604px; }
.fruit { position: absolute; z-index: 2; filter: drop-shadow(0 12px 14px var(--shade)); animation: float 7s ease-in-out infinite; }
.fruit.f1 { width: 96px; left: -58px; top: 40px; --tilt: -10deg; }
.fruit.f2 { width: 104px; right: -66px; top: 150px; --tilt: 9deg; animation-duration: 8.5s; animation-delay: -2s; }
.fruit.f3 { width: 88px; left: -44px; bottom: 96px; --tilt: 7deg; animation-duration: 9s; animation-delay: -4s; }
.fruit.f4 { width: 92px; right: -40px; bottom: 26px; --tilt: -8deg; animation-duration: 7.5s; animation-delay: -1s; }
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(var(--tilt)); }
  50% { transform: translateY(-14px) rotate(calc(var(--tilt) + 4deg)); }
}

/* The phone: the diary as the app shows it, drawn here, with the ring filling up. */
.phone { position: absolute; inset: 0; z-index: 1; padding: 11px; border-radius: 48px; background: #2B2A27;
  box-shadow: 0 34px 60px var(--shade), 0 4px 0 #46443F inset; transform: rotate(-4deg); }
.screen { height: 100%; border-radius: 38px; background: var(--bg); overflow: hidden; padding: 16px 14px; font-size: 12px; }
.screen .logo { height: 26px; width: auto; margin: 4px auto 0; }
.mini-shelf { position: relative; height: 12px; margin: 30px 0 12px; background: url(img/plank.png) center / 100% 100% no-repeat; }
.mini-shelf::before { content: ""; position: absolute; left: 8px; bottom: calc(100% - 2px); width: 34px; height: 30px;
  background: url(img/books.png) left bottom / contain no-repeat; }
.today { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 12px; text-align: center; }
.ring { position: relative; width: 112px; height: 112px; margin: 0 auto 6px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 11; stroke-linecap: round; }
.ring .track { stroke: var(--track); }
.ring .value { stroke: var(--green); stroke-dasharray: 314; stroke-dashoffset: 63; animation: ring 2s .5s cubic-bezier(.2, .8, .2, 1) backwards; }
@keyframes ring { from { stroke-dashoffset: 314; } }
.ring b { position: absolute; inset: 0; display: grid; place-content: center; font: 700 24px/1 var(--sans); }
.ring b small { display: block; font: 500 10px/1.4 var(--sans); color: var(--text-2); }
.left { color: var(--text-2); margin: 0 0 10px; }
.macros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.macros div { background: var(--bg); border-radius: 10px; padding: 6px 2px; }
.macros b { display: block; font-size: 13px; }
.macros span { color: var(--text-2); font-size: 10px; white-space: nowrap; }
.macros i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 3px; }
.macros .protein { background: var(--protein); }
.macros .carbs { background: var(--carbs); }
.macros .fat { background: var(--fat); }
.meals { list-style: none; margin: 10px 0 0; padding: 0; background: var(--card); border: 1px solid var(--border); border-radius: 18px; }
.meals li { display: flex; align-items: center; gap: 9px; padding: 7px 12px; font-weight: 600; }
.meals li + li { border-top: 1px solid var(--border); }
.meals img { width: 30px; height: 30px; object-fit: contain; }
.meals span { margin-left: auto; color: var(--text-2); font-weight: 400; }

/* The shelf from the app under the first screen: the plank, with the books and the honey on it. */
.shelf { position: relative; height: 27px; margin-top: 30px; background: url(img/plank.png) center / 100% 100% no-repeat; }
.shelf::before { content: ""; position: absolute; left: 18px; bottom: calc(100% - 3px); width: 73px; height: 64px;
  background: url(img/books.png) left bottom / contain no-repeat; }

/* Four numbers, large. */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 44px 0 18px; text-align: center; }
.stats b { display: block; font: 400 clamp(42px, 6vw, 64px)/1 var(--serif); color: var(--sage); }
.stats div:nth-child(1) b { color: var(--number-1); }
.stats div:nth-child(2) b { color: var(--green); }
.stats div:nth-child(3) b { color: var(--number-3); }
.stats div:nth-child(4) b { color: var(--number-4); }
.stats span { color: var(--text-2); font-size: 15px; }

/* The paintings passing by, as on a market stall. */
.parade { overflow: hidden; padding: 26px 0 30px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent); }
.parade .row { display: flex; align-items: center; gap: 46px; width: max-content; animation: pass 80s linear infinite; }
.parade:hover .row { animation-play-state: paused; }
.parade img { height: 84px; width: auto; filter: drop-shadow(0 8px 10px var(--shade)); }
@keyframes pass { to { transform: translateX(-50%); } }

/* The diary's nutrients: a second phone in which the page scrolls by, card after card (vitamins, minerals,
   fatty acids, other), the week's bars on a card beside it, and what it means in words. */
.insight { display: grid; grid-template-columns: .9fr 1.1fr; gap: 44px; align-items: center; padding: 34px 0 54px; }
.stage.second { height: 700px; }
.stage.second .phone { bottom: 96px; transform: rotate(4deg); }
.fruit.f5 { width: 84px; left: -58px; top: 52px; --tilt: -12deg; animation-duration: 8s; animation-delay: -3s; }
.fruit.f6 { width: 70px; left: -36px; bottom: 20px; --tilt: 10deg; animation-duration: 9.5s; animation-delay: -5s; }
.stage.second .screen { display: flex; flex-direction: column; }
/* The page under the logo runs on to the screen's lower edge and fades in under the logo. */
.npage { flex: 1; min-height: 0; margin: 12px 0 -16px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12px); mask-image: linear-gradient(to bottom, transparent, #000 12px); }
/* Eight cards of one height (the four, twice): it rests on each card, moves one card up, and after the
   fourth stands where it began. */
.nscroll { display: flex; flex-direction: column; animation: leaf 18s cubic-bezier(.65, 0, .2, 1) infinite; }
@keyframes leaf {
  0%, 16% { transform: translateY(0); }
  25%, 41% { transform: translateY(-12.5%); }
  50%, 66% { transform: translateY(-25%); }
  75%, 91% { transform: translateY(-37.5%); }
  100% { transform: translateY(-50%); }
}
.ncard { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 12px 6px 8px; margin-bottom: 12px; }
.ncard h4 { margin: 0 6px 8px; font: 600 13px/1.2 var(--sans); }
.nrings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 2px; }
.nring { position: relative; min-width: 0; text-align: center; }
.nring.vitamin { --tint: var(--carbs); } .nring.mineral { --tint: var(--mineral); }
.nring.fatty { --tint: var(--fat); } .nring.other { --tint: var(--other); }
.nring svg { display: block; width: 48px; height: 48px; margin: 0 auto 4px; transform: rotate(-90deg); }
.nring circle { fill: none; stroke-width: 6; stroke-linecap: round; }
.nring .track { stroke: var(--track); }
.nring .value { stroke: var(--tint); transition: stroke-dashoffset 1.5s .35s cubic-bezier(.2, .8, .2, 1); }
/* No recommended amount: a calm circle in the group's colour holds the amount. */
.nring .calm { fill: var(--tint); fill-opacity: .1; stroke: var(--tint); stroke-opacity: .35; stroke-width: 1.5; }
.nring:nth-child(2) .value, .nring:nth-child(5) .value { transition-delay: .5s; }
.nring:nth-child(3) .value, .nring:nth-child(6) .value { transition-delay: .65s; }
.nring b { position: absolute; left: 0; right: 0; top: 0; height: 48px; display: grid; place-content: center; font: 700 11px/1 var(--sans); }
.nring.plain b { font-size: 8.5px; }
/* The name on one or two lines and the amount under it, in a box of one height so every card is as high. */
.nlabel { height: 38px; overflow: hidden; }
.nring span { display: block; font-size: 10px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.nring small { display: block; color: var(--text-2); font-size: 9.5px; line-height: 1.3; white-space: nowrap; }
.week { position: absolute; z-index: 3; right: -34px; bottom: 0; width: 214px; padding: 14px 16px 16px; border-radius: 18px; font-size: 12px;
  background: var(--card); border: 1px solid var(--border); box-shadow: 0 22px 44px var(--shade); transform: rotate(-3deg); }
.week b { display: block; margin-bottom: 11px; font: 600 14px/1.2 var(--sans); }
.wbar { display: grid; grid-template-columns: 74px 1fr 32px; align-items: center; gap: 8px; margin-top: 8px; }
.wbar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wbar i { display: block; height: 8px; border-radius: 8px; background: var(--track); overflow: hidden; }
.wbar u { display: block; height: 100%; border-radius: 8px; transition: width 1.4s .6s cubic-bezier(.2, .8, .2, 1); }
.wbar em { font-style: normal; font-weight: 600; text-align: right; color: var(--text-2); }
.wbar .good { background: var(--green); }
.wbar .fair { background: var(--carbs); }
.wbar .low { background: var(--protein); }
.w96 { width: 96%; } .w82 { width: 82%; } .w58 { width: 58%; } .w38 { width: 38%; }
.js .reveal:not(.in) .nring .value { stroke-dashoffset: 150.8; }
.js .reveal:not(.in) .wbar u { width: 0; }
.tag { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 14px; padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 600;
  color: #5E400E; background: linear-gradient(135deg, var(--gold-1), #EBC774); }
.tag svg { width: 16px; height: 16px; fill: #8A5E12; }
.ticks { list-style: none; margin: 22px 0 0; padding: 0; }
.ticks li { position: relative; padding-left: 32px; margin: 11px 0; }
.ticks li::before { content: "✓"; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; display: grid;
  place-content: center; font-size: 12px; font-weight: 700; color: var(--button-text); background: var(--button); }

section { padding: 44px 0; }
h2 { font: 400 clamp(28px, 4.4vw, 40px)/1.15 var(--serif); color: var(--sage); margin: 0 0 22px; }
.lead { max-width: 44em; margin: 0; font-size: 18px; }

/* What the app does: six cards, each with its painting on a wash of its own colour. */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.card { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--border); border-radius: 22px;
  padding: 26px 24px 24px; transition: transform .3s ease, box-shadow .3s ease; }
.card::before { content: ""; position: absolute; width: 190px; height: 190px; left: -50px; top: -70px; border-radius: 50%;
  background: var(--tint, var(--peach)); opacity: .16; }
.card:hover { transform: translateY(-6px); box-shadow: 0 22px 40px var(--shade); }
.card img { position: relative; height: 78px; width: auto; margin-bottom: 16px; transition: transform .4s ease; }
.card:hover img { transform: scale(1.08) rotate(-4deg); }
.card h3 { position: relative; font: 600 20px/1.3 var(--sans); margin: 0 0 6px; }
.card p { position: relative; margin: 0; color: var(--text-2); font-size: 16px; }
.card:nth-child(1) { --tint: var(--carbs); }
.card:nth-child(2) { --tint: var(--green); }
.card:nth-child(3) { --tint: var(--fat); }
.card:nth-child(4) { --tint: var(--protein); }
.card:nth-child(5) { --tint: var(--peach); }
.card:nth-child(6) { --tint: var(--gold-2); }

/* Recipe photos: one large, four beside it. */
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; gap: 14px; margin-top: 26px; }
.mosaic figure { position: relative; margin: 0; overflow: hidden; border-radius: 20px; }
.mosaic figure:first-child { grid-column: span 2; grid-row: span 2; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.mosaic figure:hover img { transform: scale(1.07); }
.mosaic figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 14px 12px; color: #fff; font-size: 14px; line-height: 1.3;
  background: linear-gradient(to top, rgba(20, 16, 10, .78), transparent); }

/* The countries, each with its flag (drawn by the builder, so they show on every computer). */
.places { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 22px 0 0; padding: 0; }
.places li { display: flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; background: var(--card);
  border: 1px solid var(--border); font-size: 15px; }
.places img { width: 21px; height: 14px; margin-right: 3px; border-radius: 3px; box-shadow: 0 0 0 1px var(--border); }

/* Premium: deep green and gold. */
.premium { position: relative; overflow: hidden; border-radius: 28px; padding: 44px 40px; margin: 26px 0 10px; color: #F3EEE4;
  background: linear-gradient(135deg, var(--deep-1), var(--deep-2)); }
.premium::after { content: ""; position: absolute; width: 380px; height: 380px; right: -120px; top: -160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(246, 222, 149, .34), transparent 68%); }
.premium h2 { position: relative; display: flex; align-items: center; gap: 12px; margin-bottom: 14px; color: var(--gold-1); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .premium h2 span { background: linear-gradient(90deg, var(--gold-1), #E9C46A); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.premium svg { flex: none; width: 34px; height: 34px; fill: var(--gold-2); }
.premium p { position: relative; max-width: 46em; margin: 0 0 10px; }
.chips { position: relative; display: flex; flex-wrap: wrap; gap: 9px; list-style: none; margin: 20px 0 0; padding: 0; }
.chips li { padding: 8px 15px; border-radius: 999px; border: 1px solid rgba(246, 222, 149, .5); color: var(--gold-1); font-size: 15px; }

/* The last word, with the peach on its book. */
.closing { display: flex; align-items: center; justify-content: center; gap: 30px; text-align: left; padding: 54px 0 20px; }
.closing img { width: 150px; animation: float 8s ease-in-out infinite; --tilt: -3deg; }
.closing h2 { margin-bottom: 16px; }
.medical { color: var(--text-2); font-size: 15px; text-align: center; padding: 10px 0 0; margin: 0; }

/* What comes into view slides up softly; without scripts everything simply stands there. */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s ease; }
.js .reveal.in { opacity: 1; transform: none; }

/* The documents and the help page: one column to read. */
.article { max-width: 760px; padding: 40px 0 10px; }
.article h1 { font: 400 clamp(30px, 5vw, 42px)/1.15 var(--serif); color: var(--sage); margin: 0 0 18px; }
.article h2 { font: 600 20px/1.3 var(--sans); color: var(--text); margin: 30px 0 8px; }
.article h3 { font: 600 17px/1.3 var(--sans); margin: 22px 0 6px; }
.article ul { padding-left: 22px; }
.article li { margin: 6px 0; }
.back { display: inline-block; margin-top: 26px; }

footer { border-top: 1px solid var(--border); margin-top: 44px; padding: 28px 0 46px; font-size: 15px; color: var(--text-2); }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 14px; }
footer a { color: var(--text); text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer p { margin: 4px 0; }

/* Between a phone and a wide screen the fruit stays inside the page's edge. */
@media (max-width: 1000px) {
  .fruit.f2 { right: -40px; } .fruit.f4 { right: -30px; }
  .fruit.f5 { left: -46px; }
}
@media (max-width: 860px) {
  .brand img { height: 40px; }
  .hero-grid { grid-template-columns: 1fr; padding-top: 34px; gap: 44px; }
  .fruit.f1 { left: -30px; width: 72px; } .fruit.f2 { right: -22px; width: 78px; }
  .fruit.f3 { left: -28px; width: 66px; } .fruit.f4 { right: -26px; width: 70px; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 26px 14px; }
  .insight { grid-template-columns: 1fr; gap: 34px; padding-top: 20px; }
  .insight .stage { order: 2; }
  .fruit.f5 { left: -30px; width: 64px; } .fruit.f6 { left: -26px; width: 56px; }
  .week { right: -18px; }
  .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .premium { padding: 32px 22px; }
  .closing { flex-direction: column; text-align: center; gap: 12px; }
}
@media (prefers-color-scheme: dark) {
  .top { background: rgba(20, 19, 17, .78); }
  .hero::before { background-image: url(img/night.jpg); }
  .shelf, .shelf::before, .mini-shelf, .mini-shelf::before { opacity: .65; }
  .card::before { opacity: .22; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fruit, .closing img, .parade .row, .ring .value, .nscroll { animation: none; }
  .nring .value, .wbar u { transition: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .card, .card img, .mosaic img { transition: none; }
}