/* Meals.Chat landing · shared responsive layout and components. */
:root {
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --container: 1120px; --gutter: 24px;
  --display-1: clamp(2.5rem, 6vw, 4.5rem); --display-2: clamp(1.875rem, 4vw, 2.75rem);
  --h3: 1.5rem; --body-l: 1.1875rem; --body: 1.0625rem;
  --small: 0.875rem; --label: 0.75rem; --section-pad: var(--space-8); --button-height: 56px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0; min-width: 0; overflow-x: clip; background: var(--ground); color: var(--text);
  font-family: var(--font-text); font-size: var(--body); line-height: 1.55;
  -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.1; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
button { font: inherit; color: inherit; }
.container { width: min(calc(100% - 2 * var(--gutter)), var(--container)); min-width: 0; margin-inline: auto; }
.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 20; padding: 10px 14px;
  background: var(--text); color: var(--ground); text-decoration: none; border-radius: var(--radius-button);
}
.skip-link:focus { top: 12px; }
.label {
  color: var(--muted); font-family: var(--font-label); font-size: var(--label);
  letter-spacing: 0.12em; text-transform: uppercase;
}

/* Header */
.site-header { padding: var(--space-5) 0; }
.site-header .container { display: flex; min-width: 0; align-items: center; }
.wordmark {
  display: inline-flex; min-width: 0; align-items: center; gap: 10px; white-space: nowrap;
  font-family: var(--font-wordmark); font-size: 22px; letter-spacing: -0.01em; text-decoration: none;
}
.wordmark .mark { width: 26px; height: 26px; flex: none; }

/* Mobile-first hero */
.hero { padding: var(--space-7) 0 var(--space-9); }
.hero--landing { padding-top: 0; }
.hero__grid { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr); gap: 0; }
.hero__copy { order: 2; min-width: 0; padding-top: var(--space-6); }
.hero__title {
  max-width: 14ch; font-size: min(var(--display-1), 13.5vw); line-height: 1;
  letter-spacing: -0.02em;
}
.hero__sub {
  max-width: 40ch; margin: var(--space-5) 0 0; color: var(--text-soft);
  font-size: var(--body-l); line-height: 1.5;
}
.hero__actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-4); margin-top: var(--space-5); }
.hero__actions .button { width: 100%; }
.hero__actions .link { align-self: flex-start; }
.hero__trust { margin-top: var(--space-5); color: var(--muted); font-size: var(--small); }
.hero--landing .hero__trust { display: none; }
.hero:not(.hero--landing) .button { width: 100%; }

/* Filled button, outlined button, and underlined text link. */
.button {
  display: inline-flex; min-width: 0; min-height: var(--button-height); max-width: 100%;
  padding: 0 18px; align-items: center; justify-content: center;
  border: 1.5px solid var(--button-border); border-radius: var(--radius-button);
  background: transparent; color: var(--text); font-family: var(--font-text);
  font-size: 15px; font-weight: 600; text-align: center; text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease; cursor: pointer;
}
.button:hover { background: var(--button-hover); }
.button--primary {
  border-color: var(--button-primary-bg); background: var(--button-primary-bg); color: var(--button-primary-text);
}
.button--primary:hover { border-color: var(--button-primary-hover); background: var(--button-primary-hover); }
.link {
  font: inherit; font-weight: 400; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}

/* TABLE photo and reply */
.photo-demo {
  position: relative; order: 1; width: calc(100% + 2 * var(--gutter)); max-width: none;
  aspect-ratio: 4 / 5; margin: 0 calc(-1 * var(--gutter)); overflow: hidden; background: var(--plate);
}
.photo-demo picture, .photo-demo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
}
.bubble {
  position: absolute; right: var(--space-4); bottom: var(--space-4); left: var(--space-4);
  max-width: none; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 12px;
  background: var(--ground); color: var(--text); font-size: 15px; line-height: 1.45;
}

/* SIGNAL ticket */
.ticket {
  order: 1; width: calc(100% + 2 * var(--gutter)); max-width: none; min-width: 0;
  margin: 0 calc(-1 * var(--gutter)); overflow: hidden; border: 1px solid var(--rule);
  border-radius: 0; background: var(--panel); font-family: var(--font-label);
  font-variant-numeric: tabular-nums;
}
.ticket picture, .ticket img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 50%;
}
.ticket__body { padding: var(--space-3) var(--space-4); }
.ticket__name {
  color: var(--text); font-family: var(--font-display); font-size: 18px;
  font-weight: 600; line-height: 1.1; text-transform: uppercase;
}
.ticket__kcal {
  margin: 4px 0 6px; font-family: var(--font-label); font-size: 44px;
  font-weight: 700; line-height: 1; letter-spacing: -0.02em;
}
.ticket__kcal small {
  margin-left: 6px; color: var(--muted); font-size: 13px; font-weight: 500; letter-spacing: 0.06em;
}
.ticket__macros {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  color: var(--text-soft); font-size: 12px; line-height: 1.15;
}
.ticket__macros span, .ticket__macros b { display: block; }
.ticket__macros b { color: var(--text); font-size: 14px; font-weight: 600; white-space: nowrap; }
.ticket__bar {
  position: relative; height: 3px; margin: 8px 0 6px; overflow: hidden;
  border-radius: 2px; background: var(--track);
}
.ticket__bar::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--fill, 0%); background: var(--accent);
}
.ticket__day {
  display: flex; min-width: 0; justify-content: space-between; gap: 8px;
  color: var(--text-soft); font-size: 12px; line-height: 1.2;
}
.ticket__ingredients { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rule); }
.ticket__label { margin-bottom: 6px; color: var(--muted); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.ticket__ingredients ol { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 16px; }
.ticket__ingredients li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; break-inside: avoid; color: var(--text-soft); font-size: 11.5px; line-height: 1.6; }
.ticket__ingredients li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket__ingredients li span:last-child { color: var(--text); }
.ticket__g { display: none; }


/* Sections and shared channel rows */
.section { padding: var(--section-pad) 0; border-top: 1px solid var(--rule); }
.section__head { max-width: 60ch; margin-bottom: var(--space-6); }
.section__title { font-size: min(var(--display-2), 11vw); line-height: 1.08; letter-spacing: -0.015em; }
.section__sub { margin-top: var(--space-3); color: var(--muted); font-size: var(--body); }
.channel-list {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
  margin: 0; padding: 0; list-style: none;
}
.channel {
  display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr); gap: 8px;
  padding: var(--space-5) 0; border-top: 1px solid var(--rule);
}
.channel:last-child { border-bottom: 1px solid var(--rule); }
.channel__glyph { width: 20px; height: 20px; fill: currentColor; }
.channel__name { min-width: 0; font-family: var(--font-display); font-size: var(--h3); font-weight: 600; }
.channel__text { min-width: 0; color: var(--text-soft); }
.channel__link { justify-self: start; }

/* Exhibits */
.exchanges {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5);
  margin: 0; padding: 0; list-style: none;
}
.exchange { display: flex; min-width: 0; flex-direction: column; gap: 10px; }
.exchange__label { margin-bottom: 4px; }
.exchange__user { max-width: 86%; align-self: flex-end; }
.exchange__user picture, .exchange__user img { width: 176px; height: 132px; }
.exchange__user img { border-radius: var(--radius-bubble); object-fit: cover; }
.exchange__user--text {
  padding: 9px 13px; border-radius: var(--radius-bubble) var(--radius-bubble) 4px var(--radius-bubble);
  background: var(--user-bubble); color: var(--text); font-size: 15px;
}
.exchange__reply {
  max-width: 92%; padding: 10px 14px; align-self: flex-start; border: 1px solid var(--rule);
  border-radius: var(--radius-bubble) var(--radius-bubble) var(--radius-bubble) 4px;
  background: var(--reply-bubble); font-size: 15px; line-height: 1.5; white-space: pre-line;
}

/* Reviews, final ask, and footer */
.reviews {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5);
  margin: 0; padding: 0; list-style: none;
}
.review { display: flex; flex-direction: column; gap: 12px; padding-top: var(--space-4); border-top: 1px solid var(--rule); }
.review blockquote { margin: 0; }
.review--featured blockquote {
  max-width: 32ch; font-family: var(--font-display); font-size: 1.25rem; line-height: 1.3;
}
.review__author { color: var(--muted); font-size: var(--small); }
.final .button { width: 100%; }
.site-footer {
  padding: var(--space-6) 0 calc(var(--space-6) + 80px);
  border-top: 1px solid var(--rule); color: var(--muted); font-size: var(--small);
}
.site-footer__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }

/* Contact dialogs */
.contact-dialog[open] { position: fixed; inset: 0; margin: auto; }
.contact-dialog {
  width: calc(100% - 2 * var(--gutter)); max-width: 420px; padding: var(--space-6);
  overflow-x: hidden; border: 1px solid var(--rule); border-radius: var(--radius-panel);
  background: var(--ground); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); color: var(--text);
}
.contact-dialog::backdrop { background: var(--dialog-backdrop); }
.contact-dialog h2 { margin-bottom: var(--space-2); font-size: var(--h3); }
.contact-dialog p { color: var(--text-soft); }
.contact-dialog__number {
  display: block; max-width: 100%; margin: var(--space-4) 0; overflow-wrap: anywhere;
  font-family: var(--font-label); font-size: 1.5rem; letter-spacing: 0.02em;
}
.contact-dialog__qr {
  width: 200px; max-width: 100%; aspect-ratio: 1; margin: var(--space-4) 0;
  padding: 12px; border-radius: var(--radius-thumb); background: #fff;
}
.contact-dialog__qr img { width: 100%; height: 100%; }
.contact-dialog__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Mobile bottom action */
.bottom-bar {
  position: fixed; right: 0; bottom: 0; left: 0; z-index: 10;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule); background: var(--ground);
  transform: translateY(110%); transition: transform 200ms ease;
}
.bottom-bar:not(.is-visible) { visibility: hidden; }
.bottom-bar.is-visible { transform: none; }
.bottom-bar .button { width: 100%; min-height: 56px; }

@media (min-width: 820px) {
  :root { --section-pad: var(--space-9); --button-height: 48px; }
  .hero--landing { padding-top: var(--space-7); }
  .hero__grid {
    grid-template-areas: "copy demo"; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-6); align-items: stretch;
  }
  .hero__copy { display: flex; grid-area: copy; order: initial; flex-direction: column; padding-top: 0; }
  .hero__title { order: 0; }
  .hero__sub { order: 1; margin: var(--space-5) 0 var(--space-6); }
  .hero__actions { order: 2; margin-top: auto; }
  .hero__trust { order: 3; }
  .hero__title { max-width: 12ch; }
  .hero__actions { flex-direction: row; align-items: center; }
  .hero__actions .button { width: auto; }
  .hero--landing .hero__trust { display: block; }
  .hero:not(.hero--landing) .button { width: auto; }
  .photo-demo, .ticket { grid-area: demo; order: initial; }
  .photo-demo { width: auto; height: 100%; min-height: 0; aspect-ratio: auto; margin: 0; }
  .bubble { right: auto; max-width: 320px; }
  .ticket {
    width: 100%; max-width: 440px; margin: 0; justify-self: end;
    align-self: stretch; border-radius: var(--radius-panel);
  }
  .ticket__ingredients ol { columns: auto; }
  .ticket__ingredients li { grid-template-columns: minmax(0, 1fr) 48px 36px; font-size: 12px; line-height: 1.55; }
  .ticket__g { display: block; color: var(--muted); text-align: right; }
  .ticket__ingredients li span:last-child { text-align: right; }

  .channel {
    grid-template-columns: 20px 180px minmax(0, 1fr) auto;
    align-items: center; gap: var(--space-5); padding: var(--space-4) 0;
  }
  .channel__text { max-width: 52ch; }
  .exchanges, .reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .review--featured { grid-column: 1 / -1; }
  .review--featured blockquote { font-size: var(--h3); }
  .final .button { width: auto; }
  .site-footer { padding-bottom: var(--space-6); }
  .bottom-bar { display: none; }
}
@media (min-width: 1120px) {
  .photo-demo { margin-right: calc(-1 * max(var(--gutter), (100vw - var(--container)) / 2)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}