/* Big Basket landing page (thebigbasketguyana.com).
   Tokens come from the Organic design system (prototypes/_ds/organic-…/styles.css);
   only the ones this page uses are copied. The landing prototype overrides the
   accent ramps with the Work palette (orange #e0661a, green #0f6e5c), but only
   on the top bar, nav, hero and produce band (see .work below). Layout and
   motion values match "Big Basket Landing Page.html" (27 Oct 2026). */

@font-face {
  font-family: "Caprasimo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/caprasimo-latin.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: "Figtree";
  font-style: normal;
  font-weight: 400 700; /* variable font: one file covers 400, 600 and 700 */
  font-display: swap;
  src: url(assets/fonts/figtree-latin.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;
}

:root {
  --color-text: #201e1d;
  --color-neutral-200: #eee7db;
  --color-neutral-300: #dcd3c4;
  --color-neutral-700: #645c50;
  --color-neutral-800: #474238;

  /* Design-system defaults (Organic). The sections below the produce band
     render with these in the prototype: olive greens and copper. */
  --color-accent: #c67139;
  --color-accent-100: #fff2eb;
  --color-accent-200: #ffe1d0;
  --color-accent-300: #ffc6a5;
  --color-accent-500: #d67f48;
  --color-accent-600: #b2622d;
  --color-accent-700: #8c491a;
  --color-accent-800: #643312;
  --color-accent-2: #7a8a5e;
  --color-accent-2-100: #f0fae1;
  --color-accent-2-200: #e1eecc;
  --color-accent-2-300: #ccdbb2;
  --color-accent-2-500: #8fa073;
  --color-accent-2-700: #56633f;
  --color-accent-2-800: #3d472b;
  --color-accent-2-900: #272e1b;

  /* Fixed in the prototype's page style, whatever the palette. */
  --color-link: #a94a0f;
  --color-link-hover: #e0661a;
  --color-focus: #e0661a;

  --color-cream: #fdf3e1;
  --color-paper: #fff8ee;
  --color-card: #fffaf1;
  --color-farm: #ffefb8;
  --color-farm-ink: #7a5600;
  --color-dry: #f6e8d0;
  --color-dry-ink: #5d4a2a;

  --font-heading: "Caprasimo", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, sans-serif;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-wave: cubic-bezier(.45, 0, .55, 1);
  --blob: 62% 38% 55% 45% / 58% 50% 50% 42%;
  --blob-hover: 45% 55% 42% 58% / 50% 58% 42% 50%;
}

/* Work palette (orange #e0661a, green #0f6e5c). The prototype's wrapper closes
   after the produce band (probably a stray </div>), so it covers only the top
   bar, nav, hero and band. To use it on the whole page, put the class on <body>
   (index.html also has it on .topbar, .site-header and .hero-band). */
.work {
  --color-accent: #e0661a;
  --color-accent-100: #fff3e6;
  --color-accent-200: #ffdfbf;
  --color-accent-300: #ffc28a;
  --color-accent-500: #f7802a;
  --color-accent-600: #e0661a;
  --color-accent-700: #a94a0f;
  --color-accent-800: #7a340a;
  --color-accent-2: #0f6e5c;
  --color-accent-2-100: #e2f3ef;
  --color-accent-2-200: #bfe5dc;
  --color-accent-2-300: #8dd0c0;
  --color-accent-2-500: #17907a;
  --color-accent-2-700: #0b5a4b;
  --color-accent-2-800: #084537;
  --color-accent-2-900: #052e25;
}

/* — base (design system) — */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-cream);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
}
h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
}
p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--color-link); text-decoration: none; }
a:hover { color: var(--color-link-hover); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }
section[id] { scroll-margin-top: 24px; }

/* Press feedback on everything clickable. */
a, button, input {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .18s cubic-bezier(.3, .7, .4, 1);
}
a:active, button:active { transform: translateY(2px) scale(.98); }

.icon { display: block; flex: none; fill: none; stroke: currentColor; stroke-width: 2.75; stroke-linecap: round; stroke-linejoin: round; }

/* The hero art and the rotated produce band bleed past the edges; this clips them. */
.page, .hero-band { overflow: hidden; }
.wrap { max-width: 1180px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }

/* — pill buttons — */
.pill { border-radius: 999px; font-weight: 700; }
.pill-solid { background: var(--color-accent-600); color: #fff; }
.pill-solid:hover { background: var(--color-accent-700); color: #fff; }
.pill-outline { color: var(--color-accent-2-800); border: 2px solid var(--color-accent-2-300); }
.pill-outline:hover { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.pill-green { background: var(--color-accent-2-700); color: #fff; }
.pill-green:hover { background: var(--color-accent-2-800); color: #fff; }

/* Chunky buttons: heading font, a solid drop shadow that lifts on hover and
   presses on click. */
.btn-order {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--color-accent-600); color: var(--color-paper);
  padding: 12px 24px 13px; border-radius: 999px;
  font-family: var(--font-heading); font-weight: 400; font-size: 17px; /* Caprasimo has no bold */
  box-shadow: 0 4px 0 var(--color-accent-800);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), background-color .4s ease;
}
.btn-order:hover { background: var(--color-accent-700); color: var(--color-paper); transform: translateY(-2px); box-shadow: 0 6px 0 var(--color-accent-800); }
.btn-order:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--color-accent-800); }

.btn-blob {
  position: relative; display: inline-flex; align-items: center; gap: 14px;
  background: var(--color-accent-600); color: var(--color-paper);
  padding: 24px 56px 26px; border-radius: var(--blob);
  font-family: var(--font-heading); font-size: clamp(24px, 2.6vw, 30px);
  box-shadow: 0 7px 0 var(--color-accent-800);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-radius .9s var(--ease-out), background-color .5s ease;
}
.btn-blob span { position: relative; }
.btn-blob:hover {
  color: var(--color-paper); background: var(--color-accent-700);
  transform: translateY(-2px); border-radius: var(--blob-hover);
  box-shadow: 0 9px 0 var(--color-accent-800);
}
.btn-blob:active { transform: translateY(4px); box-shadow: 0 3px 0 var(--color-accent-800); }

.btn-blob-light {
  gap: 12px; padding: 22px 44px 24px;
  background: var(--color-paper); color: var(--color-accent-800);
  font-size: clamp(22px, 2.4vw, 26px);
  box-shadow: 0 6px 0 var(--color-accent-800);
}
.btn-blob-light:hover { background: var(--color-paper); color: var(--color-accent-800); }
.btn-blob-light:active { box-shadow: 0 2px 0 var(--color-accent-800); }

/* — 1 top bar — */
.topbar {
  background: var(--color-accent-2-900);
  color: var(--color-accent-2-100);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  padding: 10px 20px;
}

/* — 2 nav — */
.site-header {
  padding-top: 18px; padding-bottom: 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--color-text); }
.brand:hover { color: var(--color-text); }
.brand img { width: 50px; height: 50px; }
.brand span { font-family: var(--font-heading); font-size: 23px; color: var(--color-accent-2-700); }
.nav { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; font-weight: 600; font-size: 15px; }
.nav-link { color: var(--color-text); }
.nav-link:hover { color: var(--color-link-hover); }
.nav .pill-outline { padding: 9px 20px; font-weight: 600; }

/* — 3 hero — */
.hero {
  position: relative; max-width: 1320px; margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) 28px clamp(64px, 8vw, 96px);
  display: flex; justify-content: center;
}
.hero-side { position: absolute; top: 0; bottom: 0; width: clamp(110px, 24vw, 330px); pointer-events: none; }
.hero-left { left: 0; }
.hero-right { right: 0; }
.hero-side > *, .hero-mini > * { position: absolute; top: var(--y); width: var(--w); }
.hero-mini { display: none; position: relative; width: 260px; height: 180px; }
.hero-left > *, .hero-mini > * { left: var(--x); }
.hero-right > * { right: var(--x); }
.circle { aspect-ratio: 1; border-radius: 50%; background: var(--bg); animation: bb-breathe 9s ease-in-out var(--d) infinite; }
.drop { transform: rotate(var(--r)); animation: bb-drop .9s cubic-bezier(.3, .7, .4, 1) var(--d) both; }
.drop img {
  width: 100%; filter: drop-shadow(0 8px 10px rgba(15, 39, 22, .16));
  animation: bb-bob var(--bob) ease-in-out calc(var(--d) + 1s) infinite;
}
.drop-still img { filter: drop-shadow(0 6px 8px rgba(15, 39, 22, .16)); animation: none; }
.hero-basket { animation: bb-basket-in .6s ease-out both; }
.hero-basket img {
  width: 100%; transform-origin: 50% 100%;
  filter: drop-shadow(0 14px 18px rgba(15, 39, 22, .18));
  animation: bb-catch .5s ease-out var(--d) both;
}

/* The copy keeps 70px clear of the art columns at every width (the prototype's
   clamp(70px, 14vw, 40px) always resolves to 70px). */
.hero-copy {
  position: relative; max-width: 620px; padding: 0 70px;
  display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--color-card); border: 2px solid var(--color-accent-2-200);
  padding: 8px 18px; border-radius: 999px;
  font-size: 14.5px; font-weight: 600; color: var(--color-accent-2-800);
  animation: bb-rise .6s ease-out .2s both;
}
.hero h1 {
  font-size: clamp(46px, 7vw, 88px);
  line-height: .98;
  letter-spacing: -.02em;
  color: var(--color-accent-2-900);
  text-wrap: balance;
}
.hero h1 span { color: var(--color-accent-600); }
.hero-lede { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--color-neutral-800); text-wrap: pretty; max-width: 480px; }

.hero-cta { position: relative; margin-top: 18px; display: inline-flex; animation: bb-sway 9s var(--ease-wave) infinite; }
.cta-blob {
  position: absolute; inset: -18px -26px; pointer-events: none;
  background: var(--color-accent-2-200);
  border-radius: 56% 44% 53% 47% / 52% 56% 44% 48%;
  animation: bb-blob 12s var(--ease-wave) infinite;
}
.leaf {
  position: absolute; pointer-events: none; border-radius: 0 100% 0 100%;
  transform: rotate(var(--lr));
  animation: bb-leaf 7s var(--ease-wave) infinite;
}
.leaf-1 { --lr: -35deg; left: -40px; top: -22px; width: 34px; height: 20px; background: var(--color-accent-2-500); }
.leaf-2 { --lr: -10deg; left: -18px; top: -34px; width: 24px; height: 14px; background: var(--color-accent-2-700); animation-delay: -2.3s; }
.leaf-3 { --lr: 150deg; right: -38px; bottom: -16px; width: 30px; height: 18px; background: var(--color-accent-2-500); animation-duration: 8s; animation-delay: -4s; }

.checks {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px;
  font-size: 15px; font-weight: 600; color: var(--color-accent-2-800);
}
.checks li { display: flex; align-items: center; gap: 7px; }

.stores { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.store-link {
  background: var(--color-accent-2-900); color: #fff;
  padding: 10px 20px; border-radius: 999px; font-weight: 700; font-size: 14px;
}
.store-link:hover { background: var(--color-accent-2-800); color: #fff; }

/* produce band */
.band {
  background: var(--color-accent-2-700);
  transform: rotate(-1.5deg);
  margin: 0 -40px;
  padding: 14px 0;
  box-shadow: var(--shadow-md);
}
.band ul {
  list-style: none; margin: 0;
  display: flex; align-items: center; justify-content: center; gap: 30px; flex-wrap: wrap;
  padding: 0 60px;
  color: #fff; font-family: var(--font-heading); font-size: 22px;
}
.band li { display: flex; align-items: center; gap: 10px; }
.band .band-repeat { display: none; }
.band img { width: 44px; }

/* section headings */
.section-title { font-size: clamp(30px, 3.6vw, 42px); color: var(--color-accent-2-900); }

/* — 4 categories — */
.categories { padding-top: 96px; display: flex; flex-direction: column; gap: 28px; }
.grid-4 {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(clamp(25% - 15px, (800px - 100%) * 999, clamp(50% - 10px, (460px - 100%) * 999, 100%)), 1fr));
}
.cat { border-radius: 32px; padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.cat-art { height: 110px; display: flex; align-items: flex-end; justify-content: center; }
.cat-art img { flex: 0 1 var(--w); min-width: 0; width: var(--w); max-width: 34%; margin: 0 -4px; transform: rotate(var(--r, 0deg)); }
.cat-text { display: flex; flex-direction: column; gap: 4px; }
.cat h3 { font-size: 23px; }
.cat-text p { font-size: 15px; color: var(--color-neutral-800); }
.cat-produce { background: var(--color-accent-2-100); }
.cat-produce h3 { color: var(--color-accent-2-800); }
.cat-meat { background: var(--color-accent-100); }
.cat-meat h3 { color: var(--color-accent-800); }
.cat-farm { background: var(--color-farm); }
.cat-farm h3 { color: var(--color-farm-ink); }
.cat-dry { background: var(--color-dry); }
.cat-dry h3 { color: var(--color-dry-ink); }

/* awnings (how it works, footer) */
.awning { height: 30px; background-repeat: repeat-x; background-size: 64px 30px; }
.awning-coral { background-image: url(assets/art/awning-coral.svg); }
.awning-green { background-image: url(assets/art/awning-green.svg); }

/* — 5 how it works — */
.how { background: var(--color-accent-2-700); color: #fff; }
.how .wrap { padding-top: 72px; padding-bottom: 88px; display: flex; flex-direction: column; gap: 44px; }
.how h2 { font-size: clamp(32px, 4vw, 44px); color: #fff; }
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 36px;
}
.step { display: flex; flex-direction: column; gap: 14px; }
.step-art {
  position: relative; width: 180px; height: 180px; border-radius: 50%;
  background: var(--color-accent-2-800); display: grid; place-items: center;
}
.step-art .main { width: 130px; }
.step-art .main.scooter { width: 136px; }
.step-art .extra { position: absolute; }
.extra-mango { width: 52px; left: 50px; top: 40px; }
.extra-tomato { width: 48px; left: 88px; top: 44px; }
.step-num {
  position: absolute; top: 0; left: 0; width: 48px; height: 48px; border-radius: 50%;
  background: var(--color-accent-500); display: grid; place-items: center;
  font-family: var(--font-heading); font-size: 22px;
}
.step h3 { font-size: 24px; }
.step p { font-size: 16.5px; line-height: 1.55; color: var(--color-accent-2-100); }

/* — 6 join — */
.join {
  padding-top: 88px; padding-bottom: 40px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px;
}
.join-card {
  border-radius: 36px; padding: 40px;
  display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
  position: relative; overflow: hidden;
}
.join-card > img { width: 200px; align-self: flex-end; margin: -10px -6px -6px 0; }
.join-kicker { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.join-card h2 { font-size: 34px; line-height: 1.1; max-width: 12em; }
.join-card p { font-size: 16.5px; line-height: 1.55; max-width: 30em; }
.join-card .pill { margin-top: 6px; padding: 12px 22px; }
.join-vendor { background: var(--color-accent-100); }
.join-vendor .join-kicker { color: var(--color-accent-700); }
.join-vendor h2 { color: var(--color-accent-800); }
.join-rider { background: var(--color-accent-2-100); }
.join-rider .join-kicker { color: var(--color-accent-2-700); }
.join-rider h2 { color: var(--color-accent-2-800); }

/* — 7 closing call to action — */
.cta-end { padding-top: 72px; }
.cta-card {
  position: relative; overflow: hidden;
  background: var(--color-accent-700); border-radius: 48px;
  padding: clamp(40px, 6vw, 64px) clamp(28px, 5vw, 56px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px;
}
.cta-basket { position: absolute; width: 220px; right: -40px; bottom: -60px; opacity: .25; transform: rotate(-10deg); pointer-events: none; }
.cta-copy { position: relative; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; max-width: 560px; }
.cta-copy h2 { font-size: clamp(32px, 4vw, 46px); line-height: 1.05; color: var(--color-paper); }
.cta-copy p { font-size: 17px; line-height: 1.55; color: var(--color-accent-100); }
.share {
  margin-top: 6px; display: inline-flex; align-items: center; gap: 8px;
  color: var(--color-paper); font-weight: 700; font-size: 15.5px;
  text-decoration: underline; text-underline-offset: 4px;
}
.share:hover { color: var(--color-accent-200); }

/* — 8 app waitlist — */
.waitlist { padding-top: 64px; padding-bottom: 96px; }
.waitlist-card {
  background: var(--color-card); border-radius: 40px; padding: 48px 44px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 32px; align-items: center;
  box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.waitlist-card > img { position: absolute; width: 110px; right: -20px; top: -24px; transform: rotate(20deg); opacity: .9; }
.waitlist-copy { display: flex; flex-direction: column; gap: 10px; }
.waitlist-copy h2 { font-size: clamp(28px, 3.4vw, 38px); line-height: 1.1; color: var(--color-accent-2-900); }
.waitlist-copy p { font-size: 16.5px; line-height: 1.55; color: var(--color-neutral-800); }
.waitlist-form { display: flex; gap: 10px; flex-wrap: wrap; }
.phone-field {
  flex: 1 1 220px; display: flex; align-items: center; gap: 8px;
  background: #fff; border: 2px solid var(--color-neutral-300); border-radius: 999px;
  padding: 0 20px; height: 54px;
}
.phone-field:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.phone-field span { font-weight: 700; color: var(--color-neutral-700); }
.phone-field input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 17px; min-width: 0; color: var(--color-text);
}
.waitlist-form button {
  height: 54px; padding: 0 26px; border: 0; border-radius: 999px;
  background: var(--color-accent-600); color: #fff;
  font: inherit; font-weight: 700; font-size: 16px; cursor: pointer;
}
.waitlist-form button:hover { background: var(--color-accent-700); }
.waitlist-form button:disabled { opacity: .7; cursor: progress; }
.form-msg {
  flex-basis: 100%; font-size: 14px; color: var(--color-accent-700); padding-left: 20px;
  animation: bb-shake .4s ease-out both;
}
.form-msg:empty { display: none; }
.thanks {
  display: flex; align-items: center; gap: 14px;
  background: var(--color-accent-2-100); border-radius: 999px; padding: 14px 22px;
  animation: bb-pop .45s cubic-bezier(.3, .7, .4, 1.3) both;
}
.thanks-tick {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--color-accent-2-700); color: #fff; display: grid; place-items: center; font-weight: 700;
}
.thanks p { font-weight: 600; color: var(--color-accent-2-800); }

/* — 9 footer — */
.site-footer { background: var(--color-accent-2-900); color: var(--color-accent-2-100); }
.site-footer .awning { background-color: var(--color-cream); }
.footer-inner {
  padding-top: 44px; padding-bottom: 44px;
  display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
}
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand img { width: 40px; height: 40px; }
.footer-brand span { font-family: var(--font-heading); font-size: 19px; color: #fff; }
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; font-size: 14.5px; white-space: nowrap; }
.footer-links a { color: var(--color-accent-2-100); }
.footer-links a:hover { color: #fff; }
.copyright { font-size: 13.5px; opacity: .8; }

/* — sticky Start shopping — */
.sticky-cta {
  position: fixed; left: 50%; bottom: 22px; z-index: 50;
  transform: translate(-50%, 140%); opacity: 0; pointer-events: none;
  transition: transform .7s var(--ease-out), opacity .5s ease;
}
.sticky-cta.is-shown { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.sticky-cta a {
  display: flex; align-items: center; gap: 12px;
  background: var(--color-accent-600); color: var(--color-paper);
  padding: 16px 32px 17px; border-radius: 999px;
  font-family: var(--font-heading); font-size: 20px; white-space: nowrap;
  box-shadow: 0 5px 0 var(--color-accent-800), var(--shadow-lg);
}
.sticky-cta a:hover { background: var(--color-accent-700); color: var(--color-paper); }
.sticky-cta a:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--color-accent-800); }

/* — privacy and contact pages — */
.doc { padding-top: 24px; padding-bottom: 96px; }
.doc-card {
  max-width: 760px; background: var(--color-card); border-radius: 40px; padding: 48px 44px;
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 16px;
}
.doc-card h1 { font-size: clamp(34px, 4.4vw, 48px); line-height: 1.05; color: var(--color-accent-2-900); }
.doc-card h2 { font-size: 24px; color: var(--color-accent-2-800); margin-top: 16px; }
.doc-card p, .doc-card li { font-size: 16.5px; line-height: 1.6; color: var(--color-neutral-800); }
.doc-card ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.doc-card a { font-weight: 600; }
.doc-updated { font-size: 14px; color: var(--color-neutral-700); }
@media (max-width: 520px) {
  .doc-card { padding: 36px 24px; }
}

/* Tablets and small laptops: the three text links push the header onto two or
   three rows, so it keeps just the logo, Sign in and Order now. The footer and
   the page itself still lead to How it works and the join cards. */
@media (max-width: 900px) {
  .site-header { flex-wrap: nowrap; }
  .nav-link { display: none; }
}

/* — phones —
   The prototype is laid out for desktop and tablet. Below 640 px the page gets
   its own tighter layout: a one-line top bar and header, a single basket in
   place of the side columns, a scrolling produce band, and row layouts for the
   categories and steps instead of a long column of oversized cards. */
@media (max-width: 640px) {
  .wrap { padding-left: 20px; padding-right: 20px; }

  .topbar { font-size: 13px; padding: 8px 16px; }
  .topbar [data-coming-soon] { display: none; }

  .site-header { padding-top: 12px; padding-bottom: 12px; flex-wrap: nowrap; gap: 12px; }
  .brand { gap: 8px; }
  .brand img { width: 36px; height: 36px; }
  .brand span { font-size: 19px; }
  .nav { gap: 14px; flex-wrap: nowrap; }
  .nav .pill-outline { border: 0; padding: 6px 0; font-size: 14.5px; color: var(--color-accent-2-800); }
  .nav .pill-outline:hover { background: none; text-decoration: underline; }
  .btn-order { padding: 9px 16px 10px; font-size: 15px; box-shadow: 0 3px 0 var(--color-accent-800); }
  .btn-order .icon { display: none; }

  .hero { padding: 20px 20px 48px; }
  .hero-side { display: none; }
  .hero-mini { display: block; margin-bottom: -4px; }
  .hero-copy { padding: 0; gap: 16px; }
  .hero-badge { font-size: 13px; padding: 6px 14px; }
  .hero h1 { font-size: 44px; }
  .hero-lede { font-size: 16.5px; }
  .hero-cta { margin-top: 10px; }
  .cta-blob { inset: -12px -18px; }
  .btn-blob { padding: 17px 34px 19px; font-size: 22px; gap: 10px; white-space: nowrap; box-shadow: 0 5px 0 var(--color-accent-800); }
  .btn-blob .icon { width: 24px; height: 24px; }
  .leaf-1 { left: -30px; top: -16px; }
  .leaf-2 { left: -10px; top: -26px; }
  .leaf-3 { right: -28px; bottom: -12px; }
  .checks { margin-top: 6px; gap: 6px 16px; font-size: 14px; }
  .checks .icon { width: 16px; height: 16px; }

  .band { display: flex; padding: 11px 0; }
  .band ul, .band .band-repeat {
    display: flex; flex: none; flex-wrap: nowrap; justify-content: flex-start;
    gap: 24px; padding: 0 24px 0 0; font-size: 18px; white-space: nowrap;
    animation: bb-marquee 32s linear infinite;
  }
  .band img { width: 32px; height: 32px; }

  .section-title { font-size: 28px; }
  .categories { padding-top: 56px; gap: 18px; }
  .grid-4 { grid-template-columns: 1fr; gap: 12px; }
  .cat { flex-direction: row; align-items: center; gap: 14px; padding: 14px 18px 14px 12px; border-radius: 24px; }
  .cat-art { flex: 0 0 104px; height: 72px; align-items: center; }
  .cat-art img { max-width: 40%; }
  .cat h3 { font-size: 19px; }
  .cat-text { gap: 2px; }
  .cat-text p { font-size: 14px; line-height: 1.4; }

  .awning { height: 22px; background-size: 47px 22px; }
  .how { margin-top: 56px; }
  .how .wrap { padding-top: 44px; padding-bottom: 52px; gap: 26px; }
  .how h2 { font-size: 30px; }
  .steps { gap: 22px; }
  .step { display: grid; grid-template-columns: 96px 1fr; column-gap: 18px; row-gap: 4px; align-items: center; }
  .step-art { grid-row: span 2; width: 96px; height: 96px; }
  .step-art .main { width: 68px; }
  .step-art .main.scooter { width: 74px; }
  .extra-mango { width: 28px; left: 26px; top: 20px; }
  .extra-tomato { width: 26px; left: 46px; top: 22px; }
  .step-num { width: 32px; height: 32px; font-size: 15px; top: -4px; left: -4px; }
  .step h3 { font-size: 19px; align-self: end; }
  .step p { font-size: 14.5px; line-height: 1.45; align-self: start; }

  .join { padding-top: 48px; padding-bottom: 0; gap: 14px; }
  .join-card { border-radius: 28px; padding: 26px 24px 28px; gap: 10px; }
  .join-card > img { width: 104px; margin: -8px -6px -14px 0; }
  .join-kicker { font-size: 12px; }
  .join-card h2 { font-size: 27px; }
  .join-card p { font-size: 15px; }

  .cta-end { padding-top: 48px; }
  .cta-card { border-radius: 32px; padding: 32px 24px; gap: 22px; }
  .cta-copy h2 { font-size: 31px; }
  .cta-copy p { font-size: 15.5px; }
  .cta-basket { width: 160px; right: -36px; bottom: -44px; }
  .btn-blob-light { padding: 16px 30px 18px; font-size: 21px; }
  .btn-blob-light .icon { width: 22px; height: 22px; }

  .waitlist { padding-top: 40px; padding-bottom: 64px; }
  .waitlist-card { border-radius: 28px; padding: 30px 22px 26px; gap: 20px; }
  .waitlist-card > img { width: 84px; right: -18px; top: -18px; }
  .waitlist-copy h2 { font-size: 26px; padding-right: 36px; }
  .waitlist-copy p { font-size: 15px; }
  .phone-field { height: 50px; flex-basis: 100%; }
  .waitlist-form button { height: 50px; flex: 1 1 100%; }
  .thanks { border-radius: 24px; }

  .footer-inner { padding-top: 32px; padding-bottom: 88px; gap: 18px; flex-direction: column; align-items: flex-start; }
  .footer-links { gap: 10px 20px; font-size: 14px; }
  .copyright { font-size: 13px; }

  .sticky-cta { bottom: 16px; }
  .sticky-cta a { padding: 13px 26px 14px; font-size: 18px; }
  .sticky-cta .icon { width: 20px; height: 20px; }

  .doc-card { border-radius: 28px; }
}

/* Narrow phones (360 px and under): the logo mark carries the brand. */
@media (max-width: 370px) {
  .brand span { display: none; }
}

/* — motion — */
@keyframes bb-drop {
  0% { opacity: 0; transform: translateY(-140%) rotate(calc(var(--r) - 40deg)); }
  55% { opacity: 1; }
  72% { transform: translateY(5%) rotate(var(--r)); }
  86% { transform: translateY(-3%) rotate(var(--r)); }
  100% { opacity: 1; transform: translateY(0) rotate(var(--r)); }
}
@keyframes bb-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-7px) rotate(2.5deg); } }
@keyframes bb-basket-in { 0% { opacity: 0; transform: translateY(30px) scale(.9); } 100% { opacity: 1; transform: none; } }
@keyframes bb-catch { 0%, 100% { transform: scale(1, 1); } 40% { transform: scale(1.05, .93); } 70% { transform: scale(.98, 1.03); } }
@keyframes bb-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes bb-rise { 0% { opacity: 0; transform: translateY(16px); } 100% { opacity: 1; transform: none; } }
@keyframes bb-blob {
  0%, 100% { border-radius: 56% 44% 53% 47% / 52% 56% 44% 48%; transform: rotate(-1deg) scale(1); }
  50% { border-radius: 47% 53% 48% 52% / 56% 47% 53% 44%; transform: rotate(1deg) scale(1.02); }
}
@keyframes bb-sway { 0%, 100% { transform: rotate(-.6deg) translateY(0); } 50% { transform: rotate(.6deg) translateY(-2px); } }
@keyframes bb-leaf { 0%, 100% { transform: rotate(var(--lr)) translateY(0); } 50% { transform: rotate(calc(var(--lr) + 7deg)) translateY(-2px); } }
@keyframes bb-pop { 0% { opacity: 0; transform: translateY(8px) scale(.96); } 100% { opacity: 1; transform: none; } }
@keyframes bb-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
@keyframes bb-marquee { to { transform: translateX(-100%); } }
@keyframes bb-arrive { 0% { opacity: .4; transform: translateY(18px); } 100% { opacity: 1; transform: none; } }

/* Jumping to #how or #join eases the section in. */
section:target > * { animation: bb-arrive .6s cubic-bezier(.3, .7, .4, 1) .35s both; }

/* Reduced motion: no animation and no smooth scroll. Everything rests in its
   final position (the static transforms above). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; }
}