@media (max-width: 768px) {
/* ============================================================
   LUNCHBOX.KIDS — LUNCHBOX FORMULA MOBILE
   Loads AFTER home-mobile.css. All page-specific styles.
   ============================================================ */

/* ====== 01 · HERO ====== */
.fm-hero { padding-bottom: 40px; }
.fm-hero .eyebrow { margin-bottom: 20px; font-weight: 700; }
.fm-hero .m-h1 { margin-bottom: 14px; }


.fm-hero-photo-wrap {
  position: relative; margin-bottom: 28px;
}
.fm-hero-photo {
  width: 100%; aspect-ratio: 4/5;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 18px 40px -20px rgba(18,52,87,.45);
}
.fm-hero-photo img {
  width: 100%; height: 100%; object-fit: cover;
}
.fm-hero-photo-wrap .circle-stamp {
  position: absolute; bottom: -16px; right: -8px;
  width: 90px; height: 90px; z-index: 3;
  filter: drop-shadow(0 6px 12px rgba(18,52,87,.18));
  animation: stampFloat 6s ease-in-out infinite;
}
.fm-hero-photo-wrap .circle-stamp svg {
  width: 100%; height: 100%; display: block;
}
.fm-hero-pill-tag {
  position: absolute; top: 14px; left: 14px;
  background: rgba(248,244,236,.85); color: var(--navy);
  font-family: var(--mono); font-size: 8px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  padding: 5px 10px; border-radius: 100px;
  white-space: nowrap;
}

/* ====== 02 · PILLARS ====== */
.fm-pillars { padding-bottom: 40px; }
.fm-pillars-illustration {
  width: 100%; border-radius: 14px; margin-bottom: 24px;
  display: block;
}
.fm-pillars-note {
  font-family: var(--serif); font-size: 22px;
  font-style: normal; font-weight: 400;
  line-height: 1.2; color: var(--ink-mid);
  letter-spacing: -.3px; margin-bottom: 24px;
  text-wrap: pretty;
}
.fm-pillars-note .mint { color: var(--teal); font-style: italic; }
.fm-pillars-note .arrow-down { display: inline-block; }

/* ====== 03 · FAILS / LUNCHBOX STRUGGLE (NAVY) ====== */
.fm-fails {
  background: var(--navy); color: var(--cream);
}
.fm-fails .sec-head { border-bottom-color: rgba(248,244,236,.13) !important; }
.fm-fails .sec-head .num-stat { color: var(--cream); }
.fm-fails .sec-head .num-label { color: #f8f4ec !important; -webkit-text-fill-color: #f8f4ec !important; opacity: 1 !important; }
.fm-fails .m-h2 { color: var(--cream); }
.fm-fails .m-lede { color: rgba(248,244,236,.75); }

.fm-fails-source {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .3px; line-height: 1.6;
  color: rgba(248,244,236,.45);
  margin-top: 24px; margin-bottom: 0;
}
.fm-fails-source strong {
  color: rgba(248,244,236,.65); font-weight: 700;
}

/* Fails stack */
.fm-fails-stack {
  display: flex; flex-direction: column; gap: 0;
}
.fm-fails-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px; align-items: center;
  padding: 14px 0;
  border-top: 1px solid rgba(248,244,236,.1);
}
.fm-fails-row:first-child { border-top: none; padding-top: 0; }
.fm-fails-row-icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
}
.fm-fails-row-icon-mask {
  display: block; width: 28px; height: 28px;
  background: var(--cream);
  -webkit-mask-image: var(--icon-url);
  mask-image: var(--icon-url);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.fm-fails-row-label {
  font-family: var(--sans); font-size: 14px;
  font-weight: 500; color: var(--cream);
  line-height: 1.3;
}
.fm-fails-row-tag {
  font-family: var(--mono); font-size: 8px; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase;
  white-space: nowrap;
}
.fm-tag-green {
  color: var(--mint);
}

/* Winner row */
.fm-fails-row.is-winner {
  display: flex; flex-direction: column;
  align-items: stretch; gap: 0;
  margin-top: 10px; padding: 18px 16px;
  background: rgba(248,244,236,.055);
  border: 1.5px solid var(--mint);
  border-radius: 14px;
}
.fm-winner-top {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px; align-items: center;
}
.fm-winner-top .fm-fails-row-icon-mask {
  background: var(--mint);
}
.fm-fails-row.is-winner .fm-fails-row-label {
  font-size: 16px; font-weight: 600; color: var(--cream);
}
.fm-winner-tag {
  font-family: var(--mono); font-size: 8px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--mint);
  margin-top: 12px;
}
.fm-winner-pills {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 10px;
}
.fm-winner-pills span {
  font-family: var(--mono); font-size: 8px; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase;
  color: var(--mint); white-space: nowrap;
  background: rgba(183,253,196,.1);
  padding: 4px 10px; border-radius: 100px;
  border: 1px solid rgba(183,253,196,.2);
}

/* ====== 04 · OUTCOMES ====== */
.fm-outcomes { padding-bottom: 40px; }

.fm-outcomes-intro {
  position: relative; margin-bottom: 8px;
}
.fm-outcomes-fork-img {
  display: block; width: 90px; margin: 0 0 12px auto;
  transform: rotate(8deg); opacity: .85;
  pointer-events: none;
}

/* Outcomes list — clean stacked rows */
.fm-outcomes-list {
  display: flex; flex-direction: column;
  gap: 0; margin-top: 24px;
}
.fm-outcome-row {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px; align-items: start;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
}
.fm-outcome-row:first-child { border-top: none; padding-top: 0; }
.fm-outcome-row .fm-oc-icon {
  width: 32px; height: 32px; color: var(--peri-dark);
  margin-top: 2px;
}
.fm-outcome-row .fm-oc-icon svg {
  width: 100%; height: 100%;
}
.fm-outcome-row-text {
  display: flex; flex-direction: column; gap: 4px;
}
.fm-outcome-row h4 {
  font-family: var(--serif); font-style: italic;
  font-weight: 400; font-size: 18px;
  line-height: 1.08; letter-spacing: -.4px;
  color: var(--navy); margin: 0;
}
.fm-outcome-row p {
  font-family: var(--sans); font-size: 12px;
  line-height: 1.5; color: var(--ink-mid); margin: 0;
}

/* ====== 05 · PROOF (reuses homepage phone carousel) ====== */
.fm-proof { background: var(--cream); padding-bottom: 40px; }

/* ====== 06 · HONEST (PERIWINKLE) ====== */
.fm-honest { background: var(--peri); overflow: hidden; }
.fm-honest .sec-head { border-bottom-color: rgba(18,52,87,.22); }
.fm-honest .sec-head .num-stat { color: var(--navy); }
.fm-honest .sec-head .num-label { color: var(--navy); }
.fm-honest .m-h2 { color: var(--navy); }

.fm-honest-photo-wrap {
  position: relative; margin-bottom: 28px;
}
.fm-honest-photo {
  width: 100%; aspect-ratio: 1;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 18px 40px -20px rgba(18,52,87,.45);
}
.fm-honest-photo img {
  width: 100%; height: 100%; object-fit: cover;
}
.fm-honest-photo-wrap .circle-stamp {
  position: absolute; top: -14px; right: -8px;
  width: 84px; height: 84px; z-index: 3;
  filter: drop-shadow(0 6px 12px rgba(18,52,87,.18));
  animation: stampFloat 6s ease-in-out infinite;
}
.fm-honest-photo-wrap .circle-stamp svg {
  width: 100%; height: 100%; display: block;
}

.fm-permissions {
  display: flex; flex-direction: column; gap: 0;
  margin-bottom: 20px;
}
.fm-perm {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px; align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid rgba(18,52,87,.12);
}
.fm-perm:first-child { border-top: none; padding-top: 0; }
.fm-perm-check {
  width: 20px; height: 20px; color: var(--teal);
  display: flex; align-items: center; justify-content: center;
  position: relative; top: 2px;
}
.fm-perm-check svg { width: 100%; height: 100%; }
.fm-perm span:last-child {
  font-family: var(--sans); font-size: 14px;
  line-height: 1.5; color: var(--navy);
}
.fm-honest .m-body { color: var(--navy); opacity: .85; }

/* ====== 07 · INLINE CTA ====== */
.fm-inline-cta {
  background: var(--navy); color: var(--cream);
  padding: 36px var(--px) 48px;
}
.fm-inline-cta-top {
  display: flex; align-items: flex-start; gap: 14px;
  margin-bottom: 20px;
}
.fm-inline-cta-thumb {
  width: 53px; height: 53px; flex-shrink: 0;
  object-fit: contain;
  filter: invert(1) brightness(0.97);
}
.fm-inline-cta-text {
  font-family: var(--serif); font-style: normal;
  font-weight: 400; font-size: 22px;
  line-height: 1.25; letter-spacing: -.3px;
  color: var(--cream); text-wrap: pretty;
}
.fm-inline-cta-text .up { font-style: italic; color: var(--mint); }


/* Legal opt-in: readable on cream hero */
.fm-legal-cream span {
  color: var(--ink-mid);
}
.fm-legal-cream input[type="checkbox"] {
  accent-color: var(--teal);
}

}

/* ====== DM tag pill (added when replacing testimonials) ====== */
@media (max-width: 768px) {
  .phone-card .phone-bezel { position: relative; }
  .phone-dm-tag {
    position: absolute; top: 8px; right: 10px; z-index: 5;
    font-family: var(--mono); font-size: 8px; font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase;
    color: var(--teal);
    background: var(--cream);
    border: 1px solid rgba(41,177,143,.35);
    padding: 3px 7px; border-radius: 100px;
    line-height: 1;
  }
  .phone-card.is-highlight { position: relative; }
  .phone-card.is-highlight::before {
    content: ""; position: absolute; inset: -6px -6px -10px -6px;
    background: var(--mint); opacity: .35;
    border-radius: 32px; z-index: -1;
    transform: rotate(-1.2deg);
  }
}