/* Botanical borders stay behind the content, with clear space for reading. */
.brand-logo {
  display: block;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  object-fit: contain;
}
.cta.primary .brand-logo { width: 34px; height: 34px; flex-basis: 34px; }
.end .brand-logo, .mobile-contact .brand-logo { width: 28px; height: 28px; flex-basis: 28px; }
body { position: relative; isolation: isolate; overflow-x: clip; }
body::before, body::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(140px, 21vw, 300px);
  z-index: -1;
  pointer-events: none;
  background: url("assets/botanica.svg") left top / 100% auto repeat-y;
  opacity: .45;
}
body::before { left: 0; }
body::after { right: 0; transform: scaleX(-1); background-position: left 320px; }
.wrap {
  background: linear-gradient(90deg, transparent 0%, #f7f4e9e8 12%, #f7f4e9f7 30%, #f7f4e9f7 70%, #f7f4e9e8 88%, transparent 100%);
}
.hero-copy, .section-head, .faqs, .end > div {
  position: relative;
}
.hero-copy { background: radial-gradient(ellipse at center, #f7f4e9 35%, #f7f4e9e0 66%, transparent 80%); }
.benefits { background: #f7f4e9e8; }
.cta.secondary, .socials a { background: #fbf9f0f5; }
.section-head { padding-bottom: 2px; }
.daily { box-shadow: 0 12px 36px #173e2c10; }
.gallery { gap: 20px; align-items: start; }
.meal {
  min-width: 0;
  margin: 0;
  padding: 9px;
  background: #fffdf5;
  border: 1px solid #c9d1bd;
  border-radius: 18px;
  box-shadow: 0 6px 18px #173e2c08;
}
.meal-photo {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 11px;
  background: #e3e3df;
}
.gallery .meal .meal-photo img {
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  display: block;
  border-radius: 0;
}
.meal-caption { padding: 4px 9px 8px; }
.meal .meal-top { font-size: 10px; letter-spacing: 1.4px; }
.meal h3 { font-size: 15px; line-height: 1.45; }
.portion-note {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  padding: 18px 22px;
  border: 1px solid #cbd3bd;
  border-radius: 13px;
  background: #e9ecdcf5;
}
.portion-note > svg { width: 30px; height: 30px; color: var(--orange); flex: none; }
.portion-note b { display: block; font-size: 14px; }
.portion-note p { margin: 5px 0 0; color: #50604f; font-size: 12px; line-height: 1.5; }
.gallery-note { background: #f7f4e9e8; width: fit-content; }
.faqs { background: #f7f4e9ef; padding: 22px 25px; border: 1px solid #dce0cf; border-radius: 17px; }
@media (max-width: 800px) {
  body::before, body::after { width: 180px; opacity: .34; }
  body::before { left: -37px; }
  body::after { right: -37px; }
}
@media (max-width: 600px) {
  body::before, body::after { width: 178px; opacity: .48; }
  body::before { left: -42px; }
  body::after { right: -42px; background-position: left 390px; }
  .wrap { background: linear-gradient(90deg, transparent, #f7f4e9dd 14%, #f7f4e9f5 36%, #f7f4e9f5 64%, #f7f4e9dd 86%, transparent); }
  .hero-copy { background: radial-gradient(ellipse at 42% 50%, #f7f4e9 25%, #f7f4e9df 63%, transparent 84%); }
  .section-head p { max-width: 310px; background: #f7f4e9cc; }
  .gallery { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .gallery .meal, .gallery .meal:first-child {
    display: block;
    grid-column: auto;
    padding: 9px;
    background: #fffdf5;
    border-radius: 18px;
  }
  .gallery .meal:first-child .meal-top { margin-top: 13px; }
  .gallery .meal h3 { font-size: 15px; }
  .meal-caption { padding: 4px 9px 9px; }
  .portion-note { align-items: flex-start; padding: 18px; }
  .portion-note b { font-size: 13px; }
  .portion-note p { font-size: 11px; }
  .faqs { padding: 22px 19px; }
  .end { background: #f7f4e9d9; }
  .footer { background: #f7f4e9bf; }
}