/* Shopping List: the app's teal, mint and warm orange on a light mint ground. */

@font-face {
  font-family: "Inter";
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-400-normal.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: "Inter";
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext-400-normal.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-weight: 600 700;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-600-normal.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: "Inter";
  font-weight: 600 700;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext-600-normal.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-weight: 700 800;
  font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-latin-800-normal.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: "Plus Jakarta Sans";
  font-weight: 700 800;
  font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-latin-ext-800-normal.woff2")
    format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ground: #f7faf9;
  --surface: #ffffff;
  --ink: #10231f;
  --muted: #3e534e;
  --quiet: #5b6e69;
  --line: #e1ece9;
  --line-strong: #c9dad5;
  --teal: #087567;
  --teal-text: #076b5f;
  --mint: #7ad1ab;
  --orange: #f59e59;
  --orange-text: #9a4a12;
  --blue-text: #1d5f8c;
  --tile-teal: #e6f2ef;
  --tile-blue: #e4f0f8;
  --tile-orange: #fbede3;
  --tile-gold: #faf3dc;
  --tile-brown: #f1e9e1;
  --dark: #10231f;
  --dark-card: #18322d;
  --dark-raised: #24453e;
  --dark-text: #b9cbc6;
  --display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font:
    400 16px/1.55 "Inter",
    system-ui,
    -apple-system,
    "Hiragino Sans",
    sans-serif;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--display);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: var(--teal-text);
}
a:hover {
  color: #05524a;
}

img {
  max-width: 100%;
}

code {
  font:
    0.92em ui-monospace,
    "SF Mono",
    Menlo,
    monospace;
  overflow-wrap: anywhere;
}

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
  border-radius: 6px;
}

.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding-inline: 24px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 10;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
}
.skip:focus {
  top: 12px;
}

/* Buttons and badges */

.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
}
.button-outline {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.button-light {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid #d5e3df;
  padding: 14px 24px;
}
.button:hover {
  color: var(--ink);
  border-color: var(--teal);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  border-radius: 16px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
}
a.badge:hover {
  color: #fff;
  background: #1d3b35;
}
.badge-text {
  display: flex;
  flex-direction: column;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.15;
}
.badge-text small {
  font-size: 12px;
  font-weight: 400;
}

.kicker {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-text);
}
.kicker-mint {
  color: var(--mint);
}
.kicker-orange {
  color: var(--orange-text);
}
.kicker-blue {
  color: var(--blue-text);
}

.lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted);
}

/* Navigation */

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 20px;
}
.wordmark {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 800;
  font-size: 19px;
}
.wordmark img {
  border-radius: 10px;
}
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 24px;
  font-size: 15px;
  font-weight: 500;
}
.site-nav li a:not(.button) {
  color: var(--muted);
  text-decoration: none;
}
.site-nav li a:not(.button):hover,
.site-nav a[aria-current] {
  color: var(--ink);
}

@media (max-width: 720px) {
  .site-nav li:not(:last-child) {
    display: none;
  }
}

/* Hero */

.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 56px;
  padding-top: 24px;
  padding-bottom: 72px;
}
.hero-text {
  flex: 999 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #e4f5ec;
  color: #075c52;
  font-size: 14px;
  font-weight: 600;
}
.hero h1 {
  font-size: clamp(38px, 5.2vw, 64px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.025em;
}
.hero .lead {
  font-size: 19px;
  max-width: 560px;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 4px;
}
.feature {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  border-radius: 22px;
}
.feature h2 {
  font-size: 18px;
  letter-spacing: -0.01em;
}
.feature p {
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}
.feature-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.tile-teal {
  background: var(--tile-teal);
}
.tile-teal .feature-icon {
  background: #cbe7e0;
  color: var(--teal-text);
}
.tile-blue {
  background: var(--tile-blue);
}
.tile-blue .feature-icon {
  background: #cce2f1;
  color: var(--blue-text);
}
.tile-orange {
  background: var(--tile-orange);
}
.tile-orange .feature-icon {
  background: #f7d9c3;
  color: #a44c14;
}
.tile-gold {
  background: var(--tile-gold);
}
.tile-gold .feature-icon {
  background: #f2e4b4;
}
.tile-brown {
  background: var(--tile-brown);
}

.hero-phone {
  flex: 1 1 300px;
  position: relative;
  display: flex;
  justify-content: center;
  padding-block: 12px;
}
.hero-phone::before {
  content: "";
  position: absolute;
  inset: 6% 0;
  margin-inline: auto;
  max-width: 420px;
  border-radius: 48px;
  background: #ddefea;
}
.phone {
  position: relative;
  width: 300px;
  max-width: 100%;
  padding: 10px;
  border-radius: 44px;
  background: var(--ink);
  box-shadow: 0 30px 60px -20px rgb(16 35 31 / 35%);
}
.phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 36px;
}
.toast {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 12px 30px -12px rgb(16 35 31 / 30%);
  font-size: 14px;
  line-height: 1.35;
}
.toast-family {
  left: 0;
  bottom: 18%;
}
.toast-ai {
  right: 0;
  top: 14%;
}

.avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 14px;
}
.avatar-orange {
  background: var(--orange);
  color: var(--ink);
}
.avatar-mint {
  background: var(--mint);
  color: var(--ink);
}
.avatar-ink {
  background: var(--ink);
  color: #fff;
}
.avatar-soft {
  background: var(--tile-orange);
  color: #a44c14;
}

/* Food icons: black line art, tinted like the app's categories. */
.food {
  display: block;
}
.tint-teal {
  filter: invert(32%) sepia(62%) saturate(1200%) hue-rotate(137deg)
    brightness(86%);
}
.tint-orange {
  filter: invert(55%) sepia(80%) saturate(900%) hue-rotate(340deg)
    brightness(98%);
}
.tint-gold {
  filter: invert(66%) sepia(70%) saturate(650%) hue-rotate(5deg) brightness(95%);
}
.tint-brown {
  opacity: 0.7;
}

/* AI section */

.dark {
  background: var(--dark);
  color: #f2f7f5;
}
.dark .wrap {
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding-block: 96px;
}
.dark .lead {
  color: var(--dark-text);
}
.dark a {
  color: var(--mint);
}
.section-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 760px;
}
.section-head h2 {
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 800;
}

.cases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 24px;
}
.case {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 28px;
  border-radius: 28px;
  background: var(--dark-card);
}
.case-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.case-head h3 {
  font-size: 21px;
}
.case-head p {
  margin-top: 2px;
  font-size: 15px;
  color: #9fb6b0;
}
.case-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--dark-raised);
}
.case-icon-mint {
  color: var(--mint);
}
.case-icon-orange {
  color: var(--orange);
}

.voice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--dark);
  color: var(--orange);
  font-size: 13px;
}
.voice svg {
  max-width: 40%;
}
.voice span:last-child {
  color: #9fb6b0;
}
.voice-mic {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--ink);
}

.chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 15px;
}
.bubble {
  max-width: 86%;
  padding: 12px 16px;
}
.bubble-user {
  align-self: flex-end;
  max-width: 82%;
  border-radius: 18px 18px 4px 18px;
  background: var(--teal);
  color: #fff;
}
.bubble-ai {
  align-self: flex-start;
  border-radius: 18px 18px 18px 4px;
  background: #f2f7f5;
  color: var(--ink);
}
.tool {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 10px;
  background: var(--dark-raised);
  color: var(--mint);
  font-size: 13px;
}

.result {
  display: grid;
  grid-template-columns: repeat(var(--count), minmax(0, 1fr));
  gap: 6px;
  padding: 16px;
  border-radius: 20px;
  background: var(--surface);
  color: var(--ink);
}
.result li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.result li.is-new {
  color: #a44c14;
  font-weight: 600;
}
.result li.is-new .chip {
  box-shadow: 0 0 0 2px var(--orange);
}
@media (max-width: 480px) {
  .result {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 14px;
  }
}
.chip {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
.chip-teal {
  background: #ddefea;
}
.chip-gold {
  background: var(--tile-gold);
}
.chip-brown {
  background: var(--tile-brown);
}
.chip-orange {
  background: var(--tile-orange);
}

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  padding-top: 40px;
  border-top: 1px solid #2c4a44;
  counter-reset: step;
}
.steps li {
  display: flex;
  gap: 14px;
  font-size: 15px;
  color: var(--dark-text);
  counter-increment: step;
}
.steps li::before {
  content: counter(step);
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--mint);
  border-radius: 50%;
  color: var(--mint);
  font-weight: 700;
}
.steps strong {
  color: #f2f7f5;
}
.steps code {
  color: #f2f7f5;
}

/* Family and icons */

.duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 24px;
  padding-block: 96px;
}
.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 36px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--surface);
}
.card h2 {
  font-size: 32px;
  font-weight: 800;
}
.card > p:not(.kicker, .typed) {
  color: var(--muted);
  margin-bottom: 12px;
}
@media (max-width: 480px) {
  .card {
    padding: 24px;
  }
}

.feed {
  display: flex;
  flex-direction: column;
  padding: 8px 18px;
  border-radius: 20px;
  background: var(--ground);
  font-size: 15px;
}
.feed li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-block: 12px;
}
.feed li + li {
  border-top: 1px solid var(--line);
}

.icon-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.icon-grid li {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 16px;
}
.icon-grid .food {
  width: 55%;
  height: auto;
}
.typed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 8px 8px 8px 20px;
  border-radius: 28px;
  background: var(--ground);
}
.caret {
  color: var(--teal);
}
.category {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--teal-text);
  font-size: 13px;
  font-weight: 600;
}
.category .chip {
  width: 28px;
  height: 28px;
}

/* Cloud */

.cloud {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding: clamp(24px, 4vw, 48px);
  border-radius: 32px;
  background: var(--tile-teal);
}
.cloud .section-head h2 {
  font-size: clamp(28px, 3.6vw, 42px);
}
.modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.mode {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border-radius: 22px;
  background: var(--surface);
  color: var(--muted);
}
.mode h3 {
  font-size: 19px;
  color: var(--ink);
}
.mode p {
  font-size: 15px;
}
.mode-chosen {
  box-shadow: 0 0 0 2px var(--teal);
  color: var(--teal);
}
.mode-chosen p {
  color: var(--muted);
}
.mode-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.free {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

/* More features */

.more {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-block: 96px;
}
.more h2 {
  font-size: 28px;
  font-weight: 800;
}
.more ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
}
.more li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--teal-text);
}
.more h3 {
  font-family: inherit;
  font-size: 17px;
  letter-spacing: 0;
  color: var(--ink);
}
.more p {
  font-size: 15px;
  color: var(--muted);
}

/* Call to action */

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 80px;
  padding: clamp(32px, 5vw, 56px) clamp(24px, 4vw, 48px);
  border-radius: 32px;
  background: var(--teal);
  color: #fff;
}
.cta-text {
  flex: 1 1 420px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.cta-text img {
  flex: none;
  border-radius: 22px;
  box-shadow: 0 0 0 4px rgb(255 255 255 / 18%);
}
.cta h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 800;
}
.cta p {
  margin-top: 8px;
  font-size: 17px;
  color: #d8efe9;
}
@media (max-width: 480px) {
  .cta-text {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Footer */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 48px;
  font-size: 14px;
  color: var(--quiet);
}
.footer-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.footer-links a {
  color: var(--muted);
}

.languages {
  position: relative;
}
.languages summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px 0 14px;
  border: 1px solid #d5e3df;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}
.languages summary::-webkit-details-marker {
  display: none;
}
.languages summary svg {
  color: var(--muted);
}
.languages summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 4px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: translateY(-2px) rotate(45deg);
}
.languages ul {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 5;
  width: max-content;
  max-height: 60vh;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 16px 40px -16px rgb(16 35 31 / 35%);
}
.languages li a {
  display: block;
  padding: 8px 14px;
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
}
.languages li a:hover {
  background: var(--ground);
}
.languages a[aria-current] {
  background: var(--tile-teal);
  font-weight: 600;
}

/* Support and privacy */

.policy {
  display: flex;
  flex-direction: column;
  gap: 48px;
  max-width: 820px;
  padding-block: 40px 96px;
}
.policy-intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.policy h1 {
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 800;
}
.policy-summary {
  font-size: 19px;
  line-height: 1.6;
  color: var(--muted);
}
.policy-meta {
  font-size: 15px;
  color: var(--quiet);
}
.policy-body {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.policy-body section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.policy-body h2 {
  font-size: 22px;
  letter-spacing: -0.01em;
}
.policy-body div {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--muted);
}
.policy-body ul,
.policy-body ol {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 22px;
}
.policy-body ul {
  list-style: disc;
}
.policy-body ol {
  list-style: decimal;
}
.policy-body strong {
  color: var(--ink);
}

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