/* The Bites website. The palette is the app's Day mode
   (app/src/theme/colors.ts, LIGHT) plus the logo's own coin gold, and the
   app's Night navy for the one dark band, so the site, the app and the
   creators site read as one product. One typeface, Plus Jakarta Sans, as
   in the app. The loud thing on each page is the bitten gold coin; the
   printed-menu dotted line carries anything listed with a value at its
   end. Everything else stays quiet.

   url("@asset/...") is swapped for the real, fingerprinted file name by
   website/build.js. */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-400.221a4135.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-600.8872bb5c.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-800.5f301a8e.woff2") format("woff2");
}

:root {
  --page: #f4eadb;
  --card: #fffcf6;
  --sunken: #efe3d1;
  --line: #e9dcca;
  --line-strong: #d9c6aa;
  --ink: #3a1512;
  --ink-soft: #7b5c52;
  --red: #b0201c;
  --red-deep: #7a1310;
  --coin: #ebc232;
  --coin-bright: #f3d04f;
  --gold-ink: #865900;
  --green: #1e7a46;
  --navy: #101b30;
  --navy-raised: #16233d;
  --navy-line: #26385c;
  --on-navy: #f6ece5;
  --on-navy-soft: #aebbd4;
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wrap: 1120px;
  --gutter: clamp(20px, 5vw, 40px);
  --r-card: 24px;
  --r-input: 14px;
  --header-h: 68px;
  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg {
  max-width: 100%;
}
img {
  height: auto;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

h1,
h2,
h3 {
  font-weight: 800;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.6rem, 8.4vw, 4.75rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--red);
}
h2 {
  font-size: clamp(1.9rem, 5vw, 3rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
}
h3 {
  font-size: 1.1875rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

p {
  text-wrap: pretty;
}
b,
strong {
  font-weight: 800;
}

a {
  color: var(--red);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}
a:hover {
  color: var(--red-deep);
}

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

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

.skip {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 100;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--card);
  font-weight: 800;
  text-decoration: none;
}
.skip:focus {
  top: 12px;
  color: var(--card);
}

.icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

/* ---------- layout ---------- */

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap.narrow {
  max-width: calc(760px + var(--gutter) * 2);
}

.section {
  padding-block: clamp(3.25rem, 9vw, 6rem);
}
.section + .section {
  padding-top: 0;
}

.band {
  --band-pad: clamp(3.25rem, 9vw, 6rem);
  padding-block: var(--band-pad);
}
.band-navy {
  background: var(--navy);
  color: var(--on-navy);
}
.band-navy .lead {
  color: var(--on-navy-soft);
}
.band-navy a:not(.btn) {
  color: var(--coin);
}
.band-red {
  background: var(--red);
  color: #fff;
}
/* A quiet step down from the page, for a chapter of its own. */
.band-sunken {
  background: var(--sunken);
}
/* A band is followed by a full section again, not a tucked-up one. */
.band + .section {
  padding-top: clamp(3.25rem, 9vw, 6rem);
}

.lead {
  margin-top: 1.1rem;
  max-width: 34em;
  font-size: clamp(1.125rem, 2.3vw, 1.3125rem);
  line-height: 1.5;
  color: var(--ink-soft);
}

.card {
  background: var(--card);
  border-radius: var(--r-card);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-weight: 800;
  text-decoration: none;
}
.text-link .icon {
  transition: transform 0.15s ease;
}
.text-link:hover .icon {
  transform: translateX(3px);
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 54px;
  padding: 0 1.6rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease, transform 0.12s ease;
}
.btn:active {
  transform: translateY(1px);
}
.btn-primary {
  background: var(--red);
  color: #fff;
}
.btn-primary:hover {
  background: var(--red-deep);
  color: #fff;
}
.btn-gold {
  background: var(--coin);
  color: var(--ink);
}
.btn-gold:hover {
  background: var(--coin-bright);
  color: var(--ink);
}
.btn-ghost {
  border-color: var(--ink);
  color: var(--ink);
}
.btn-ghost:hover {
  background: var(--ink);
  color: var(--card);
}
.btn-ghost-light {
  border-color: var(--on-navy);
  color: var(--on-navy);
}
.btn-ghost-light:hover {
  background: var(--on-navy);
  color: var(--navy);
}
.btn-small {
  min-height: 44px;
  padding: 0 1.1rem;
  font-size: 0.9375rem;
}
.btn-small .icon {
  display: none;
}
.btn-block {
  width: 100%;
}
.btn[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.stores {
  margin-top: 1rem;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}
.band-red .stores {
  color: rgba(255, 255, 255, 0.86);
}

/* Things only a laptop should see (the QR codes). site.js marks the page
   with data-platform; without JavaScript they stay hidden. */
[data-desktop-only] {
  display: none;
}

/* ---------- top bar ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--page);
  border-bottom: 1px solid var(--line);
}
.header-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--header-h);
}
.brand {
  display: flex;
  align-items: center;
  margin-right: auto;
}
.brand img {
  display: block;
}
.nav {
  display: none;
}
.nav a {
  padding: 0.5rem 0.2rem;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9875rem;
  text-decoration: none;
}
.nav a:hover {
  color: var(--red);
}
.nav a[aria-current="page"] {
  color: var(--red);
  box-shadow: 0 2px 0 var(--red);
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.nav-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: var(--sunken);
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle .icon {
  width: 22px;
  height: 22px;
}
.nav-toggle-open,
.nav-toggle-close {
  display: grid;
}
.nav-toggle-close,
.nav-toggle[aria-expanded="true"] .nav-toggle-open {
  display: none;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-close {
  display: grid;
}
/* The menu on a phone: a panel that drops from the bar. */
.nav.is-open {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: grid;
  padding: 0.5rem var(--gutter) 1.25rem;
  background: var(--page);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 24px 40px -28px rgba(58, 21, 18, 0.45);
}
.nav.is-open a {
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.1875rem;
  font-weight: 800;
}
.nav.is-open a[aria-current="page"] {
  box-shadow: none;
}

@media (min-width: 860px) {
  :root {
    --header-h: 76px;
  }
  .nav,
  .nav.is-open {
    position: static;
    display: flex;
    gap: 1.6rem;
    padding: 0;
    border: 0;
    box-shadow: none;
    margin-right: 1rem;
  }
  .nav.is-open a {
    padding: 0.5rem 0.2rem;
    border: 0;
    font-size: 0.9875rem;
    font-weight: 600;
  }
  .nav-toggle {
    display: none;
  }
}

/* ---------- the first screen ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2rem, 6vw, 4.5rem) clamp(3rem, 8vw, 5rem);
}
.hero-wrap {
  display: grid;
  gap: 3rem;
  align-items: center;
}
.hero-text {
  position: relative;
  z-index: 2;
}
.hero .lead {
  margin-top: 1.4rem;
}

.seen {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-strong);
  max-width: 34em;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}
.seen b {
  color: var(--ink);
  font-weight: 600;
}
.seen a {
  font-weight: 600;
  white-space: nowrap;
}

.qr {
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  max-width: 24rem;
}
.qr p {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.qr-code {
  flex: none;
  width: 104px;
  height: 104px;
  border-radius: 14px;
}
html[data-platform="desktop"] .qr[data-desktop-only] {
  display: flex;
}

.hero-art {
  position: relative;
  display: grid;
  justify-items: center;
}
/* On a phone Mr Bite stands on top of the hero's phone, so the art keeps
   room above it for him (only on the front page, where he is). */
.page-home .hero-art {
  padding-top: 168px;
}
.coin {
  position: absolute;
  top: 2%;
  left: 50%;
  width: min(150%, 600px);
  max-width: none;
  aspect-ratio: 1;
  transform: translateX(-47%);
}
.hero-phone {
  position: relative;
  z-index: 2;
  width: min(76vw, 320px);
  animation: rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.hero-phone figcaption,
.note-art figcaption {
  margin-top: 1rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  text-align: center;
  color: var(--ink-soft);
}
/* This caption sits on the gold coin, where the soft ink is too faint. */
.note-art figcaption {
  margin-top: 1.4rem;
  color: var(--ink);
  font-weight: 600;
}

/* A drawn phone around a real screenshot. */
.phone {
  padding: 9px;
  border-radius: 46px;
  background: #24100e;
  box-shadow: 0 34px 60px -34px rgba(58, 21, 18, 0.6), 0 2px 0 rgba(255, 255, 255, 0.08) inset;
}
.phone img {
  display: block;
  width: 100%;
  border-radius: 37px;
  background: var(--page);
}

/* The one moment of motion: the phone rises, then the coin gets its bite. */
.coin-bite {
  transform-box: fill-box;
  transform-origin: center;
  animation: chomp 0.45s 0.7s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
}
@keyframes chomp {
  from {
    transform: scale(0);
  }
}

@media (min-width: 900px) {
  .hero-wrap {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 2rem;
  }
  .hero-phone {
    width: 330px;
  }
  .coin {
    width: 590px;
  }
  .page-home .hero-art {
    padding-top: 0;
  }
}

/* ---------- Mr Bite in 3D ----------
   An empty box until site.js has put him in it, then he fades in: the
   live 3D one (.is-ready), or the still picture of him where 3D can't or
   shouldn't be drawn (.no-3d on the page, .is-still on one box; site.js
   says when). Both are the same shape and he stands in the same place in
   both: the soles of his shoes are a tenth of the way up his box, which
   is what the offsets below line up. */
.mrbite {
  position: relative;
  opacity: 0;
  transition: opacity 0.4s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.mrbite.is-ready {
  opacity: 1;
}
.no-3d .mrbite:not(.is-ready),
.mrbite.is-still {
  opacity: 1;
  background: url("img/mr-bite.f3f17dff.webp") center / 100% 100% no-repeat;
  cursor: default;
}
.mrbite.is-still canvas {
  display: none;
}
.mrbite canvas {
  display: block;
  width: 100%;
  height: 100%;
}
/* Front page, phones: standing on the top edge of the hero's phone,
   tucked just behind it. */
.mrbite-hero {
  position: absolute;
  z-index: 1;
  top: 0;
  right: max(2%, calc(50% - 168px));
  width: 168px;
  height: 198px;
}
/* Front page, wide screens: in front of the phone's lower right corner,
   pointing up at the prices. He goes as far right as he can and still be
   whole on the screen: his body ends 81% of the way across his box, and
   the screen's edge is one page margin past the art's. A narrower screen
   gets a smaller Mr Bite, so he never hides much of the phone. */
@media (min-width: 900px) {
  .mrbite-hero {
    --mb-w: 260px;
    --mb-h: calc(var(--mb-w) * 20 / 17);
    --page-margin: max(var(--gutter), calc((100vw - var(--wrap)) / 2));
    z-index: 3;
    top: calc(700px - var(--mb-h));
    right: auto;
    left: min(calc(50% + 30px), calc(100% + var(--page-margin) - 14px - var(--mb-w) * 0.81));
    width: var(--mb-w);
    height: var(--mb-h);
  }
}
@media (min-width: 900px) {
  /* He walks in from the right. On a very wide screen the right side of
     his box is in view, so it fades out there and he arrives out of thin
     air, not from behind a hard edge. (Standing, he is nowhere near it.) */
  .mrbite-hero canvas {
    -webkit-mask-image: linear-gradient(to left, transparent, #000 15%);
    mask-image: linear-gradient(to left, transparent, #000 15%);
  }
}
@media (min-width: 1100px) {
  .mrbite-hero {
    --mb-w: 300px;
  }
}
@media (min-width: 1280px) {
  .mrbite-hero {
    --mb-w: 340px;
  }
}

/* Pages with words only up top (press, about, help). */
.hero-plain {
  padding-bottom: clamp(2rem, 5vw, 3rem);
}
.hero-plain h1 {
  font-size: clamp(2.4rem, 7vw, 4rem);
}

/* Restaurants and home cooks: an example card on the coin, not a phone. */
.hero-art-note {
  padding-block: 4.5rem 4rem;
}
.hero-art-note .coin {
  top: 50%;
  width: min(104%, 460px);
  transform: translate(-50%, -50%);
}
.note-art {
  position: relative;
  width: min(100%, 380px);
  animation: rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.note {
  padding: 1.15rem 1.3rem 1.3rem;
  border-radius: 22px;
  background: var(--card);
  box-shadow: 0 30px 50px -30px rgba(58, 21, 18, 0.6);
  transform: rotate(-2deg);
  font-size: 0.9875rem;
  line-height: 1.45;
}
.note-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
.note-head img {
  border-radius: 7px;
}
.note-head b {
  color: var(--ink);
}
.note-head span {
  margin-left: auto;
}
.note-title {
  font-weight: 800;
  font-size: 1.0625rem;
  line-height: 1.3;
}
.kitchen-card .note-title {
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}
.kitchen-where {
  margin-bottom: 0.7rem;
  color: var(--ink-soft);
}
.kitchen-how {
  margin-block: 0.9rem 1rem;
  padding: 0.75rem 0.9rem;
  border-radius: 14px;
  background: var(--page);
  font-size: 0.9375rem;
}
.btn-whatsapp {
  width: 100%;
  min-height: 48px;
  background: #1e7a46;
  color: #fff;
  cursor: default;
}

.hero-lost {
  text-align: center;
  padding-block: clamp(3rem, 10vw, 6rem);
}
.hero-lost .lead {
  margin-inline: auto;
}
.hero-lost .actions {
  justify-content: center;
}
.lost-art {
  position: relative;
  width: 250px;
  height: 214px;
  margin: 0 auto 2rem;
}
.lost-art .coin {
  top: 6px;
  left: auto;
  right: 0;
  width: 176px;
  transform: none;
}
.lost-art .mrbite {
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 182px;
  height: 214px;
}

/* ---------- numbered steps ---------- */

.steps {
  display: grid;
  gap: 2.25rem;
  margin-top: 2.5rem;
  padding: 0;
  list-style: none;
}
.steps p {
  margin-top: 0.5rem;
  color: var(--ink-soft);
}
.steps b {
  color: var(--ink);
  font-weight: 600;
}
/* Each step number sits on a small coin with its own bite. */
.step-coin {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  background: var(--coin);
  color: var(--ink);
  font-size: 1.5rem;
  font-weight: 800;
  -webkit-mask: radial-gradient(circle 11px at 86% 12%, transparent 98%, #000 100%);
  mask: radial-gradient(circle 11px at 86% 12%, transparent 98%, #000 100%);
}
@media (min-width: 800px) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3rem;
  }
}

/* ---------- the price board ---------- */

.board-wrap {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}
.board {
  padding: clamp(1.1rem, 3.5vw, 1.75rem);
  border: 1px solid var(--navy-line);
  border-radius: var(--r-card);
  background: var(--navy-raised);
}
.board-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.board-tab {
  min-height: 44px;
  padding: 0 1.15rem;
  border: 1.5px solid var(--navy-line);
  border-radius: 999px;
  background: transparent;
  color: var(--on-navy);
  font: inherit;
  font-size: 0.9875rem;
  font-weight: 800;
  cursor: pointer;
}
.board-tab:hover {
  border-color: var(--on-navy-soft);
}
.board-tab[aria-pressed="true"] {
  border-color: var(--coin);
  background: var(--coin);
  color: var(--navy);
}
.board-panel + .board-panel {
  margin-top: 2rem;
}
.board-panel h3 {
  margin-top: 1.25rem;
  font-size: 1.3125rem;
}
.board-rows {
  margin-top: 0.4rem;
  padding: 0;
  list-style: none;
}
.board-row {
  display: grid;
  grid-template-columns: auto minmax(1.5rem, 1fr) auto;
  align-items: baseline;
  column-gap: 0.7rem;
  row-gap: 0.55rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--navy-line);
}
.board-city {
  font-size: 1.125rem;
  font-weight: 600;
}
.board-price {
  font-size: clamp(1.6rem, 5vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--coin);
}
.board-bar {
  grid-column: 1 / -1;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.board-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--coin);
  transition: width 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.board-note {
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--on-navy-soft);
}
.board-areas {
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--on-navy-soft);
}
.board-areas summary {
  display: inline-block;
  color: var(--on-navy);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
  list-style: none;
}
.board-areas summary::-webkit-details-marker {
  display: none;
}
.board-areas p {
  margin-top: 0.5rem;
}
@media (min-width: 900px) {
  .board-wrap {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 4rem;
  }
  .board-intro {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
}

/* The dotted line of a printed menu. */
.leader-dots {
  align-self: end;
  height: 0;
  margin-bottom: 0.38em;
  border-bottom: 2px dotted currentColor;
  opacity: 0.35;
}

/* ---------- where a price came from ---------- */

.trust-wrap {
  display: grid;
  gap: 2.25rem;
  align-items: center;
}
.badges > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--line-strong);
}
.badges > div:first-child {
  border-top: 2px solid var(--ink);
}
.badges dt {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-width: 10.5rem;
}
.badges dd {
  flex: 1 1 14rem;
  color: var(--ink-soft);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}
.chip .icon {
  width: 0.95em;
  height: 0.95em;
}
/* The app's own badge colours (TrustBadge.tsx). */
.chip-official {
  background: #c9efe6;
  color: #005740;
}
.chip-neutral {
  background: #fae8a2;
  color: #825d00;
}
.chip-seen {
  background: #e3e8f1;
  color: #3c4c6b;
}
@media (min-width: 900px) {
  .trust-wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4rem;
  }
}

/* ---------- anyone can post a price ----------
   One real post, the four steps down a dotted line, and what a post earns
   on a till slip. On a phone they come one under the other. On a wide
   screen they stand side by side and read left to right: the post, what
   happens to it, what it earns. */

.crowd-wrap {
  display: grid;
  gap: 2.5rem;
}
.crowd-art {
  justify-self: center;
  width: min(72vw, 264px);
}
.crowd-art .phone {
  padding: 7px;
  border-radius: 38px;
  box-shadow: 0 26px 44px -30px rgba(58, 21, 18, 0.55);
}
.crowd-art .phone img {
  border-radius: 31px;
}
.crowd-art figcaption {
  margin-top: 1rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
  color: var(--ink-soft);
}

.crowd-steps {
  display: grid;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.crowd-steps li {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  column-gap: 1.1rem;
  align-items: start;
}
.crowd-steps .step-coin {
  width: 46px;
  height: 46px;
  margin: 0;
  font-size: 1.25rem;
  -webkit-mask: radial-gradient(circle 9px at 86% 12%, transparent 98%, #000 100%);
  mask: radial-gradient(circle 9px at 86% 12%, transparent 98%, #000 100%);
}
/* The menu's dotted line, stood on end: one step leads to the next. */
.crowd-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 54px;
  bottom: -1.25rem;
  left: 22px;
  border-left: 2px dotted var(--ink);
  opacity: 0.3;
}
.crowd-steps h3 {
  margin-top: 0.55rem;
}
.crowd-steps p {
  margin-top: 0.35rem;
  color: var(--ink-soft);
}

/* What a post earns, on a till slip. The paper's torn bottom edge is cut
   with a mask, so the soft shadow goes on a wrapper around it. */
.slip {
  max-width: 30rem;
  filter: drop-shadow(0 14px 16px rgba(58, 21, 18, 0.13));
}
.slip-paper {
  --tooth: 14px;
  padding: 1.5rem 1.5rem calc(1.5rem + var(--tooth));
  border-radius: 6px 6px 0 0;
  background: var(--card);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--tooth) 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--tooth) 100%;
}
.slip-rows {
  margin: 0.9rem 0 0;
  padding: 0;
  border-top: 2px solid var(--ink);
  list-style: none;
}
.slip-rows li {
  display: grid;
  grid-template-columns: auto minmax(1.25rem, 1fr) auto;
  align-items: baseline;
  column-gap: 0.6rem;
  padding-block: 0.75rem;
  border-bottom: 1px dashed var(--line-strong);
}
.slip-rows .leader-dots {
  color: var(--ink-soft);
}
/* The narrowest phones: a line that has to wrap goes without its dots. */
@media (max-width: 359px) {
  .slip-rows li {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .slip-rows .leader-dots {
    display: none;
  }
}
.slip-points {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--red);
}
.slip-note {
  margin-top: 1rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* A tablet: the post beside the steps, the slip under them. */
@media (min-width: 700px) {
  .crowd-wrap {
    grid-template-columns: 240px minmax(0, 1fr);
    grid-template-areas:
      "head head"
      "art steps"
      ". slip";
    column-gap: 3rem;
    align-items: start;
  }
  .crowd-head {
    grid-area: head;
  }
  .crowd-art {
    grid-area: art;
    width: 100%;
  }
  .crowd-steps {
    grid-area: steps;
  }
  .slip {
    grid-area: slip;
    width: 100%;
  }
}
/* A laptop: all three in a row. */
@media (min-width: 1100px) {
  .crowd-wrap {
    grid-template-columns: 240px minmax(0, 1fr) 312px;
    grid-template-areas:
      "head head head"
      "art steps slip";
    column-gap: 2.75rem;
  }
  .slip {
    margin-top: 0.5rem;
    transform: rotate(1deg);
  }
}
@media (min-width: 1240px) {
  .crowd-wrap {
    grid-template-columns: 252px minmax(0, 1fr) 332px;
    column-gap: 3.5rem;
  }
}

/* ---------- more than search ---------- */

.features {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(74%, 280px);
  gap: 1.25rem;
  margin: 2.5rem calc(var(--gutter) * -1) 0;
  padding: 0 var(--gutter) 1.25rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  -webkit-overflow-scrolling: touch;
}
.features li {
  scroll-snap-align: start;
}
.features .phone {
  padding: 7px;
  border-radius: 38px;
  box-shadow: 0 26px 44px -30px rgba(58, 21, 18, 0.55);
}
.features .phone img {
  border-radius: 31px;
}
.features h3 {
  margin-top: 1.4rem;
}
.features p {
  margin-top: 0.4rem;
  color: var(--ink-soft);
}
.features-also {
  margin-top: 1.5rem;
  color: var(--ink-soft);
}
/* Four phones in a row need a wide screen. Below that they stay a row to
   swipe through, as on a phone. */
@media (min-width: 1000px) {
  .features {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2.5rem;
    margin-inline: 0;
    padding: 0;
    overflow: visible;
  }
  .features .phone {
    max-width: 280px;
  }
  .features-also {
    margin-top: 2.5rem;
  }
}

/* ---------- where Bites has menus ---------- */

.cities {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding: 0;
  list-style: none;
}
.cities li {
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--card);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
}
.cities-note {
  margin-top: 1.5rem;
  max-width: 44em;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

/* ---------- menu rows: who else Bites is for ---------- */

.leaders {
  margin-top: 2rem;
  border-top: 2px solid var(--ink);
}
.leader {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 1rem;
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--line-strong);
  color: var(--ink);
  text-decoration: none;
}
.leader .leader-dots {
  display: none;
}
.leader-label {
  font-size: clamp(1.3rem, 3.4vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.leader-value {
  grid-column: 1;
  margin-top: 0.15rem;
  font-weight: 600;
  color: var(--red);
}
.leader .icon-chevron {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--red);
  transition: transform 0.15s ease;
}
.leader-link:hover {
  color: var(--ink);
}
.leader-link:hover .leader-label {
  color: var(--red);
}
.leader-link:hover .icon-chevron {
  transform: translateX(4px);
}
@media (min-width: 720px) {
  .leader {
    grid-template-columns: auto minmax(2rem, 1fr) auto auto;
    align-items: baseline;
    padding-block: 1.4rem;
  }
  .leader .leader-dots {
    display: block;
    color: var(--ink-soft);
  }
  .leader-value {
    grid-column: auto;
    margin-top: 0;
    font-size: 1.125rem;
  }
  .leader .icon-chevron {
    grid-column: auto;
    grid-row: auto;
    align-self: center;
  }
}

/* ---------- the founder's note and the news ---------- */

.story-wrap {
  display: grid;
  gap: 3rem;
  align-items: start;
}
.letter {
  padding: clamp(1.5rem, 5vw, 2.5rem);
}
.letter h2,
.news h2 {
  font-size: clamp(1.6rem, 4vw, 2.1rem);
}
.letter p {
  margin-top: 1rem;
}
.letter-sign {
  font-weight: 800;
}
.news-list {
  margin-top: 1.25rem;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--ink);
}
.news-list + p {
  margin-top: 1.25rem;
}
.news-list a {
  display: grid;
  gap: 0.15rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--line-strong);
  color: var(--ink);
  text-decoration: none;
}
.news-outlet {
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--red);
}
.news-title {
  font-weight: 600;
  line-height: 1.35;
}
.news-date {
  font-size: 0.875rem;
  color: var(--ink-soft);
}
.news-list a:hover .news-title {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
@media (min-width: 900px) {
  .story-wrap {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 4rem;
  }
}

/* ---------- questions ---------- */

.faq {
  margin-top: 1.75rem;
  border-top: 2px solid var(--ink);
}
.faq details {
  border-bottom: 1px solid var(--line-strong);
}
.faq summary {
  position: relative;
  padding: 1.15rem 2.75rem 1.15rem 0;
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
/* A plus that turns into a minus. */
.faq summary::before,
.faq summary::after {
  content: "";
  position: absolute;
  right: 0.35rem;
  top: 50%;
  width: 16px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--red);
  transition: transform 0.2s ease;
}
.faq summary::after {
  transform: rotate(90deg);
}
.faq details[open] summary::after {
  transform: rotate(0deg);
}
.faq details p {
  max-width: 42em;
  padding-bottom: 1.3rem;
  color: var(--ink-soft);
}
@media (min-width: 900px) {
  .faq-wrap {
    display: grid;
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
    gap: 4rem;
    align-items: start;
  }
  .faq {
    margin-top: 0.6rem;
  }
}

/* ---------- the red band that ends a page ---------- */

.closing h2 {
  color: #fff;
}
.closing .lead {
  color: rgba(255, 255, 255, 0.88);
}
.closing {
  overflow: hidden;
}
/* Phones: the words run the full width, and Mr Bite stands beside the
   last of them (the app-store line), on the band's bottom edge. The text
   block is "see-through" to the grid here, so its lines and Mr Bite can
   share one. */
.closing-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 0.5rem;
  align-items: start;
}
.closing-text {
  display: contents;
}
.closing-text > * {
  grid-column: 1 / -1;
}
.closing-text > .stores {
  grid-column: 1;
}
.mrbite-closing {
  --mb-w: clamp(150px, 44vw, 190px);
  grid-column: 2;
  align-self: end;
  width: var(--mb-w);
  height: calc(var(--mb-w) * 20 / 17);
  /* Down through the band's padding, so he stands on its bottom edge (the
     soles of his shoes are a tenth of the way up his box), and out into
     the page margin by the empty part of his box. */
  margin: 0.75rem calc(var(--mb-w) * -0.14) calc(-1 * var(--band-pad) - var(--mb-w) * 0.112) 0;
}
/* The QR code is for a laptop with room for it (below). */
.closing-qr {
  display: none;
  padding: 1.1rem 1.1rem 0.9rem;
  border-radius: 22px;
  background: var(--card);
  color: var(--ink);
  text-align: center;
}
.closing-qr .qr-code {
  display: block;
  width: 148px;
  height: 148px;
}
.closing-qr p {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 800;
}
/* Wider: the words on the left, Mr Bite on the right. */
@media (min-width: 800px) {
  .closing-wrap {
    grid-template-columns: minmax(0, 1fr) auto auto;
    column-gap: 2.5rem;
    align-items: center;
  }
  .closing-text {
    display: block;
  }
  .mrbite-closing {
    --mb-w: 200px;
    grid-column: auto;
    margin-top: -2rem;
    margin-right: 0;
  }
}
/* Wider still, on a laptop: the QR code after him. */
@media (min-width: 1000px) {
  html[data-platform="desktop"] .closing-qr[data-desktop-only] {
    display: block;
  }
}
@media (min-width: 1200px) {
  .mrbite-closing {
    --mb-w: 236px;
  }
}

/* ---------- ticked lists ---------- */

.ticks {
  display: grid;
  gap: 1.5rem 3rem;
  margin-top: 2.25rem;
  padding: 0;
  list-style: none;
}
.ticks li {
  display: flex;
  gap: 0.9rem;
}
.ticks .icon {
  width: 28px;
  height: 28px;
  margin-top: 0.05rem;
  padding: 5px;
  border-radius: 50%;
  background: var(--coin);
  color: var(--ink);
}
.ticks p {
  margin-top: 0.25rem;
  color: var(--ink-soft);
}
@media (min-width: 720px) {
  .ticks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1000px) {
  .ticks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* A list of four reads better as two rows of two than as three and one. */
  .ticks-pairs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 880px;
  }
}

.plain-list {
  display: grid;
  gap: 1rem;
  padding: 0;
  list-style: none;
}
.plain-list b {
  font-weight: 800;
}

/* ---------- restaurants: coming soon; home cooks: what we ask ---------- */

.soon-wrap {
  max-width: calc(820px + var(--gutter) * 2);
}
.soon-tag {
  display: inline-block;
  margin-bottom: 1.1rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: var(--coin);
  color: var(--navy);
  font-size: 0.875rem;
  font-weight: 800;
}
.safety-wrap {
  display: grid;
  gap: 2.25rem;
  align-items: start;
}
.safety-wrap .plain-list li {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--navy-line);
  color: var(--on-navy-soft);
}
.safety-wrap .plain-list b {
  color: var(--on-navy);
}
@media (min-width: 900px) {
  .safety-wrap {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 4rem;
  }
}

/* ---------- press and about ---------- */

.facts {
  margin-top: 1.75rem;
  border-top: 2px solid var(--ink);
}
.facts > div {
  display: grid;
  gap: 0.2rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--line-strong);
}
.facts dt {
  font-weight: 800;
}
.facts dd {
  color: var(--ink-soft);
}
@media (min-width: 640px) {
  .facts > div {
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: 1.5rem;
  }
}

.story-plain p {
  margin-top: 1.1rem;
  max-width: 40em;
}
.story-plain h2 + p {
  margin-top: 1.5rem;
}

.timeline {
  display: grid;
  gap: 0;
  margin-top: 2rem;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--ink);
}
.timeline li {
  display: grid;
  gap: 0.1rem;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--line-strong);
}
.timeline-date {
  font-weight: 800;
}
@media (min-width: 640px) {
  .timeline li {
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: 1.5rem;
  }
}

.coverage-section h3 {
  margin-top: 2.5rem;
  font-size: 1.3125rem;
}
.radio-list {
  margin-top: 1rem;
  color: var(--ink-soft);
}
.radio-list b {
  color: var(--ink);
}

.brand-kit {
  display: grid;
  gap: 2rem;
  margin-top: 1.75rem;
  align-items: center;
}
.brand-logo {
  display: grid;
  gap: 1rem;
  justify-items: start;
  padding: 1.75rem;
  border-radius: var(--r-card);
  background: var(--card);
}
.swatches {
  display: grid;
  gap: 0.7rem;
  padding: 0;
  list-style: none;
}
.swatches li {
  display: grid;
  grid-template-columns: 44px 5rem auto;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.9375rem;
}
.swatches li span:last-child {
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.swatch {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
}
.brand-note {
  margin-top: 1.5rem;
  max-width: 40em;
  color: var(--ink-soft);
}
@media (min-width: 640px) {
  .brand-kit {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 3rem;
  }
}

/* ---------- help ---------- */

.prose h2 {
  margin-top: 2.5rem;
  font-size: clamp(1.4rem, 3.4vw, 1.75rem);
  letter-spacing: -0.025em;
}
.prose h2:first-child {
  margin-top: 0;
}
.prose p {
  margin-top: 0.75rem;
  max-width: 40em;
}
.prose-foot {
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-strong);
  font-size: 0.9375rem;
  color: var(--ink-soft);
}
.prose .prose-foot {
  margin-top: 2.5rem;
}

/* ---------- the contact form ---------- */

.form-wrap {
  display: grid;
  gap: 2.25rem;
  align-items: start;
}
.form-alt {
  margin-top: 1.25rem;
  color: var(--ink-soft);
}
.form {
  display: grid;
  gap: 1.1rem;
  padding: clamp(1.25rem, 4.5vw, 2rem);
}
.field label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.9375rem;
  font-weight: 800;
}
.optional {
  font-weight: 400;
  color: var(--ink-soft);
}
.field input,
.field textarea {
  display: block;
  width: 100%;
  padding: 0.8rem 0.95rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-input);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
}
.field textarea {
  resize: vertical;
  min-height: 7rem;
}
.field input::placeholder,
.field textarea::placeholder {
  color: #a08a7e;
}
.field input:focus-visible,
.field textarea:focus-visible {
  border-color: var(--ink);
  border-radius: var(--r-input);
}
.field [aria-invalid="true"] {
  border-color: var(--red);
  background: #fff7f5;
}
.field-pair {
  display: grid;
  gap: 1.1rem;
}
.field-hint {
  margin-top: -0.5rem;
  font-size: 0.875rem;
  color: var(--ink-soft);
}
.field-hint.is-error {
  color: var(--red);
  font-weight: 600;
}
/* Left empty by people; filled by scripts that fill every box. */
.field-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-status {
  padding: 0.85rem 1rem;
  border-radius: var(--r-input);
  font-weight: 600;
  line-height: 1.45;
}
.form-status.is-error {
  background: #ffd3d0;
  color: #8f1022;
}
.form-status.is-error a {
  color: inherit;
}
.form-status.is-ok {
  background: #ddf3e3;
  color: #135c33;
}
.form-legal {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
/* Sent: the boxes go, the thank-you stays. */
.form.is-sent > :not(.form-status) {
  display: none;
}
.form.is-sent .form-status {
  padding: 1.5rem;
  font-size: 1.125rem;
}
@media (min-width: 560px) {
  .field-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 900px) {
  .form-wrap {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 4rem;
  }
  .form-intro {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
}

/* ---------- footer ---------- */

.site-footer {
  padding-block: clamp(2.5rem, 7vw, 4rem) 1.75rem;
  background: var(--sunken);
  font-size: 0.9375rem;
}
.footer-wrap {
  display: grid;
  gap: 2.5rem;
}
.footer-brand p {
  margin-top: 1rem;
  max-width: 22em;
  color: var(--ink-soft);
}
.footer-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 1.5rem;
}
/* The email address is long: on a phone it gets a row to itself. */
.footer-nav > div:last-child {
  grid-column: 1 / -1;
}
.footer-nav h2 {
  margin-bottom: 0.6rem;
  font-size: 0.9375rem;
  letter-spacing: 0;
}
.footer-nav a {
  display: block;
  width: fit-content;
  padding-block: 0.35rem;
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.footer-nav a:hover {
  color: var(--red);
  text-decoration: underline;
}
.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-strong);
  color: var(--ink-soft);
}
.footer-base a {
  margin-left: 1.25rem;
  color: var(--ink-soft);
}
.footer-base p:last-child a:first-child {
  margin-left: 0;
}
@media (min-width: 800px) {
  .footer-wrap {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr);
    gap: 4rem;
  }
  .footer-nav {
    grid-template-columns: repeat(4, auto);
    justify-content: space-between;
  }
  .footer-nav > div:last-child {
    grid-column: auto;
  }
}

/* ---------- the button that follows you down the page (phones) ---------- */

.sticky-get {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgba(244, 234, 219, 0.95);
  transform: translateY(110%);
  transition: transform 0.25s ease;
}
.sticky-get.is-shown {
  transform: none;
}
@media (min-width: 800px) {
  .sticky-get {
    display: none;
  }
}

/* ---------- less motion, and paper ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media print {
  .site-header,
  .sticky-get,
  .nav-toggle,
  .closing-qr,
  .mrbite,
  .qr {
    display: none !important;
  }
  .band-navy,
  .band-red,
  .band-sunken {
    background: none;
    color: var(--ink);
  }
}