/* ==========================================================
   "Behind the Kitchen" — story & trust section on the home page.
   Pastel panels (warm cream / soft mint) against the site's usual
   white cards, so this reads as a distinct "about" moment.
   ========================================================== */
.story-section{ display:flex; flex-direction:column; gap:14px; padding:6px 16px 4px }

.story-header{ text-align:center; padding:14px 6px 2px }
.story-kicker{
  font-family:'Fraunces',serif; font-weight:600; font-size:19px; color:var(--ink);
  line-height:1.3;
}
.story-sub{ font-size:13.5px; color:var(--muted); margin:8px 0 0; line-height:1.5 }

.story-panel{
  display:flex; gap:14px; background:#FBF3E7; border:1px solid #F1E4CC;
  border-radius:var(--r); padding:20px 18px; box-shadow:var(--shadow);
}
.story-panel-icon{
  flex:none; width:46px; height:46px; border-radius:50%; background:#fff;
  display:grid; place-items:center; font-size:20px; box-shadow:var(--shadow);
}
.story-panel-body{ flex:1; min-width:0 }
.story-eyebrow{
  font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--mustard-deep);
}
.story-panel-body h3{
  font-family:'Fraunces',serif; font-weight:600; font-size:17px; color:var(--ink);
  margin:6px 0 8px; line-height:1.3;
}
.story-panel-body p{ font-size:13.5px; color:var(--ink); opacity:.82; line-height:1.6; margin:0 }
.story-panel-body p + p{ margin-top:10px }

.story-trust{
  background:#EAF7F0; border:1px solid #D5EDE1; border-radius:var(--r);
  padding:22px 16px 18px; box-shadow:var(--shadow);
}
.story-trust-heading{
  font-family:'Fraunces',serif; font-weight:600; font-size:17px; color:var(--ink);
  text-align:center; margin:0 0 16px;
}
.trust-grid{ display:flex; flex-direction:column; gap:12px }
.trust-card{ background:#fff; border-radius:16px; padding:16px; box-shadow:0 4px 14px rgba(46,42,38,.06) }
.trust-icon{ font-size:21px; margin-bottom:8px }
.trust-card h4{ font-family:'Fraunces',serif; font-weight:600; font-size:14.5px; color:var(--ink); margin:0 0 6px }
.trust-card p{ font-size:12.5px; color:var(--muted); line-height:1.55; margin:0 }

/* ---------- "How it works" (home page) ---------- */
.how-it-works{ padding:6px 16px 4px; margin:8px 0 4px }
.how-it-works-heading{
  font-family:'Fraunces',serif; font-weight:600; font-size:19px; color:var(--ink);
  text-align:center; margin:0 0 14px;
}
.hiw-grid{ display:flex; flex-direction:column; gap:12px }
.hiw-step{
  display:flex; gap:14px; align-items:flex-start; background:#fff;
  border-radius:var(--r); padding:16px 18px; box-shadow:var(--shadow);
}
.hiw-icon{
  flex:none; width:38px; height:38px; border-radius:50%; color:#fff;
  display:grid; place-items:center; font-family:'Fraunces',serif; font-weight:700; font-size:16px;
}
.hiw-icon-1{ background:var(--mustard-deep) }
.hiw-icon-2{ background:var(--coral-deep) }
.hiw-icon-3{ background:var(--sky-deep) }
.hiw-icon-4{ background:var(--mint-deep) }
.hiw-step-body h4{ font-family:'Fraunces',serif; font-weight:600; font-size:15px; color:var(--ink); margin:2px 0 4px }
.hiw-step-body p{ font-size:12.5px; color:var(--muted); line-height:1.5; margin:0 }

/* ---------- "A Peek at the Week" menu preview (home page) ---------- */
.menu-preview{ padding:6px 0 4px; margin:8px 0 4px }
.menu-preview-heading{
  font-family:'Fraunces',serif; font-weight:600; font-size:19px; color:var(--ink);
  text-align:center; margin:0 16px 4px;
}
.menu-preview-sub{ font-size:12.5px; color:var(--muted); text-align:center; margin:0 16px 14px; line-height:1.5 }
.menu-preview-strip{
  display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x proximity;
  padding:4px 16px 8px; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.menu-preview-strip::-webkit-scrollbar{ display:none }
.menu-preview-card{
  flex:none; width:130px; scroll-snap-align:start; overflow:hidden; text-align:center;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow);
}
.menu-preview-card img{ display:block; width:100%; height:100px; object-fit:cover }
.menu-preview-day{ font-family:'Fraunces',serif; font-weight:600; font-size:13.5px; color:var(--ink); padding:8px 6px 10px }