/* =========================================================================
   MCBC — BRAND ADDENDUM
   Everything in here is MCBC's own, layered on top of the shared design
   system in styles.css / pages.css. Keep brand-specific work in this file
   so the base system stays swappable.
   ========================================================================= */

/* ===== NAV: logo mark ===== */
.nav__logo-mark {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--mcbc-white);
  padding: 3px;
  flex-shrink: 0;
  align-self: center;
}

/* ===== BUTTONS ===== */
/* The one CTA on the page that should read as the primary action. */
.btn--solid {
  background: var(--mcbc-coral);
  border-color: var(--mcbc-coral);
  color: var(--mcbc-white);
}
.btn--solid:hover {
  background: var(--mcbc-coral-deep);
  border-color: var(--mcbc-coral-deep);
  box-shadow: 0 10px 30px var(--mcbc-coral-glow);
}
/* Zomato red is Zomato's, not ours — it stays a recognisable outline chip. */
.btn--zomato { border-color: rgba(232, 74, 95, 0.55); }
.btn--zomato:hover { background: #E84A5F; border-color: #E84A5F; color: var(--mcbc-white); }

.nav__order--zomato { background: rgba(255, 255, 255, 0.08); }

/* ===== HONESTY BAND — "no fake paneer, no fake cream" ===== */
.honesty {
  background: var(--mcbc-charcoal);
  color: var(--mcbc-white);
  padding: var(--section-y) var(--gutter);
}
.honesty__inner {
  max-width: var(--max-width); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.honesty__eyebrow {
  font-family: var(--mono); font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--mcbc-neon-pink); margin-bottom: 1.1rem;
}
.honesty__title {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.04;
  letter-spacing: -0.02em;
}
.honesty__title em { font-style: italic; color: var(--mcbc-cream); }
.honesty__body { font-size: 1.02rem; line-height: 1.7; color: rgba(255,255,255,0.75); }
.honesty__body p + p { margin-top: 1.1rem; }
.honesty__body strong { color: var(--mcbc-white); font-weight: 600; }
.honesty__list { margin-top: 1.6rem; display: grid; gap: 0.7rem; }
.honesty__list li {
  display: flex; gap: 0.75rem; align-items: flex-start;
  font-size: 0.95rem; color: rgba(255,255,255,0.82);
}
.honesty__list li::before {
  content: "—"; color: var(--mcbc-coral); flex-shrink: 0; font-weight: 700;
}
@media (max-width: 900px) { .honesty__inner { grid-template-columns: 1fr; } }

/* ===== LOCATIONS ===== */
.locations { background: var(--mcbc-off-white); padding: var(--section-y) var(--gutter); }
.locations__inner { max-width: var(--max-width); margin: 0 auto; }
.locations__heading { max-width: 760px; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.locations__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.location {
  background: var(--mcbc-white);
  border: 1px solid rgba(19, 26, 28, 0.08);
  border-radius: 18px;
  padding: 1.6rem 1.5rem;
  transition: transform 0.25s var(--ease-out-expo), box-shadow 0.25s;
}
.location:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(19,26,28,0.08); }
.location__city {
  font-family: var(--mono); font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--mcbc-coral); margin-bottom: 0.6rem;
}
.location__name {
  font-family: var(--display); font-weight: 500; font-size: 1.45rem;
  letter-spacing: -0.015em; margin-bottom: 0.5rem;
}
.location__desc { font-size: 0.9rem; line-height: 1.6; color: rgba(19,26,28,0.62); }
.location__radius {
  margin-top: 1rem; display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em;
  color: rgba(19,26,28,0.5);
}
.location--soon {
  background: linear-gradient(135deg, var(--mcbc-charcoal), var(--mcbc-charcoal-light));
  border-color: transparent; color: var(--mcbc-white);
}
.location--soon .location__name { color: var(--mcbc-white); }
.location--soon .location__desc { color: rgba(255,255,255,0.7); }
.location--soon .location__city { color: var(--mcbc-neon-pink); }
.location--soon .location__radius { color: rgba(255,255,255,0.45); }

/* ===== GLISCO PARENT-BRAND STRIP ===== */
.parentage {
  background: var(--mcbc-pink-soft);
  padding: clamp(2.2rem, 5vw, 3.2rem) var(--gutter);
  border-top: 1px solid rgba(0, 144, 173, 0.14);
  border-bottom: 1px solid rgba(0, 144, 173, 0.14);
}
.parentage__inner {
  max-width: var(--max-width); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.6rem 1.1rem; text-align: center;
}
.parentage__label {
  font-family: var(--mono); font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--mcbc-coral-deep);
}
.parentage__text { font-size: 0.98rem; color: rgba(19,26,28,0.75); }
.parentage__text strong { font-weight: 600; color: var(--mcbc-charcoal); }
.parentage__text a { color: var(--mcbc-coral-deep); text-decoration: underline; text-underline-offset: 3px; }

/* ===== TEAM CREDENTIALS ===== */
.creds { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 2rem; }
.cred {
  border-left: 2px solid var(--mcbc-coral);
  padding: 0.2rem 0 0.2rem 1rem;
}
.cred__title { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.3rem; }
.cred__desc { font-size: 0.87rem; line-height: 1.55; color: rgba(255,255,255,0.6); }

/* ===== ZOMATO CALLOUT ROW inside gateway ===== */
.order-split {
  display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center;
  margin-top: 2rem;
}

/* ===== DISH STRIP (signature dishes) ===== */
.dishes { background: var(--mcbc-white); padding: var(--section-y) var(--gutter); }
.dishes__inner { max-width: var(--max-width); margin: 0 auto; }
.dishes__heading { max-width: 780px; margin-bottom: clamp(2rem, 5vw, 3rem); }
.dishes__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.dish { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--mcbc-charcoal-light); }
.dish img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out-expo); }
.dish:hover img { transform: scale(1.05); }
.dish__meta {
  position: absolute; inset: auto 0 0 0; padding: 1.5rem 1.1rem 1.1rem;
  background: linear-gradient(to top, rgba(19,26,28,0.92), transparent);
  color: var(--mcbc-white);
}
.dish__tag {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--mcbc-neon-pink); display: block; margin-bottom: 0.35rem;
}
.dish__name { font-family: var(--display); font-weight: 500; font-size: 1.15rem; line-height: 1.15; }

/* ===== FOOTER: brand row tweak ===== */
.footer__brand-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.9rem; }
.footer__brand-row img { width: 42px; height: 42px; border-radius: 10px; background: var(--mcbc-white); padding: 4px; }
.footer__brand-row .footer__brand { margin: 0; }

/* Current page in the desktop nav. */
.nav__link--active { opacity: 1; color: var(--mcbc-pink); }

/* ===== HERO LEGIBILITY =====
   Our hero photography is bright, plated food on pale ground — brightness alone
   left the eyebrow and sub-copy fighting the plate. A bottom-left scrim keeps
   the type readable without flattening the picture. */
.hero__bg { filter: brightness(0.48) contrast(1.06) saturate(1.05); }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to top, rgba(16, 26, 28, 0.92) 0%, rgba(16, 26, 28, 0.45) 45%, rgba(16, 26, 28, 0.15) 75%),
    linear-gradient(to right, rgba(16, 26, 28, 0.75) 0%, rgba(16, 26, 28, 0.1) 60%);
}
.hero__inner, .scroll-hint { position: relative; z-index: 3; }

/* The nav CTA is two words; it must never wrap into a two-line pill. */
.nav__order { white-space: nowrap; }

/* ===== KITCHEN BAND =====
   The base system points at a kitchen panorama we don't have yet. Until that
   photo exists, use our own food photography so the band reads as a picture
   rather than a black gap. Swap the URL when the kitchen shoot lands. */
.kitchen-band__bg { background-image: url('../images/mcbc-desi-keema-mac-cheese.jpg'); }

/* ===== DISHES GRID =====
   Six cards: three-up reads as two balanced rows instead of 4 + 2 orphans. */
@media (min-width: 900px) { .dishes__grid { grid-template-columns: repeat(3, 1fr); } }

/* .field__hint sets display:block, which beats the [hidden] attribute — the
   homepage router's "taking you to the right form" hint was always visible. */
[hidden] { display: none !important; }

/* =========================================================================
   MENU
   103 dishes across 12 sections. Photography leads, but every dish is named
   even when we have no picture of it — a menu with holes in it reads as an
   incomplete kitchen.
   ========================================================================= */

.menu-page { background: var(--mcbc-off-white); padding: var(--section-y) var(--gutter); }
.menu-page__inner { max-width: var(--max-width); margin: 0 auto; }

/* Sticky category jump-bar. */
.menu-nav {
  position: sticky; top: 64px; z-index: 30;
  margin: 0 calc(var(--gutter) * -1) clamp(2rem, 5vw, 3rem);
  padding: 0.8rem var(--gutter);
  background: rgba(250, 248, 244, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(19, 26, 28, 0.08);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.menu-nav::-webkit-scrollbar { display: none; }
.menu-nav__inner { display: flex; gap: 0.45rem; width: max-content; }
.menu-nav a {
  white-space: nowrap; padding: 0.4rem 0.85rem; border-radius: 100px;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 500;
  background: var(--mcbc-white); border: 1px solid rgba(19, 26, 28, 0.1);
  color: rgba(19, 26, 28, 0.7); transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.menu-nav a:hover { background: var(--mcbc-coral); border-color: var(--mcbc-coral); color: var(--mcbc-white); }

.menu-cat { margin-bottom: clamp(3rem, 7vw, 5rem); scroll-margin-top: 130px; }
.menu-cat__head {
  display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap;
  margin-bottom: 0.6rem;
}
.menu-cat__num {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em;
  color: var(--mcbc-coral);
}
.menu-cat__title {
  font-family: var(--display); font-weight: 500; font-style: italic;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem); letter-spacing: -0.02em; line-height: 1.05;
}
.menu-cat__count {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em;
  color: rgba(19, 26, 28, 0.42);
}
.menu-cat__blurb {
  max-width: 62ch; font-size: 0.95rem; line-height: 1.6;
  color: rgba(19, 26, 28, 0.62); margin-bottom: 1.4rem;
}

/* Photo grid. */
.menu-grid {
  display: grid; gap: 0.9rem;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.menu-item {
  background: var(--mcbc-white);
  border: 1px solid rgba(19, 26, 28, 0.07);
  border-radius: 14px; overflow: hidden;
  transition: transform 0.25s var(--ease-out-expo), box-shadow 0.25s;
}
.menu-item:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(19, 26, 28, 0.09); }
.menu-item__img {
  /* height:auto is load-bearing — the markup carries width/height attributes to
     reserve layout space, and without it the 800px attribute beats
     aspect-ratio and every card renders 800px tall. */
  width: 100%; height: auto; aspect-ratio: 1 / 1;
  object-fit: cover; display: block;
  background: var(--mcbc-pink-soft);
}
.menu-item__name {
  padding: 0.7rem 0.8rem 0.85rem;
  font-size: 0.87rem; font-weight: 500; line-height: 1.35;
}

/* Dishes we have no photograph of yet — named, not hidden. */
.menu-more { margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.menu-more__label {
  width: 100%; font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(19, 26, 28, 0.4); margin-bottom: 0.15rem;
}
.menu-more span {
  padding: 0.3rem 0.7rem; border-radius: 100px;
  background: var(--mcbc-white); border: 1px solid rgba(19, 26, 28, 0.09);
  font-size: 0.82rem; color: rgba(19, 26, 28, 0.72);
}

/* Homepage teaser strip. */
.dishes__foot { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* =========================================================================
   FIX: form notice legibility
   The base system paints .form__notice-text near-black, but every form sits
   in .lead-form, which is near-black too — so the follow-up notice was
   effectively invisible. Light text on the dark panel, and a tint that reads
   as a panel rather than a smudge.
   ========================================================================= */
.lead-form .form__notice {
  background: rgba(255, 255, 255, 0.06);
  border-left-color: var(--mcbc-coral);
}
.lead-form .form__notice-text { color: rgba(255, 255, 255, 0.82); }
.lead-form .form__notice-text strong { color: var(--mcbc-white); font-weight: 600; }
.lead-form .form__notice-text a { color: var(--mcbc-pink); text-decoration: underline; text-underline-offset: 2px; }
.lead-form .form__notice-icon { color: var(--mcbc-neon-pink); }

/* The same trap catches field hints, which the base file also paints dark. */
.lead-form .field__hint { color: rgba(255, 255, 255, 0.55); }

/* Honeypot — off-screen rather than display:none, which some bots skip. */
.hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* =========================================================================
   DISH CARDS — nutrition strip
   The emoji badge floating over the photograph read as clip-art. Calories and
   protein under the dish are the thing a customer on a plan actually wants,
   and a small table is the honest way to show two numbers.
   ========================================================================= */
.nutri {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 0.6rem;
}
.nutri__cell {
  padding: 0.5rem 0.2rem 0.1rem;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.nutri__cell:last-child { border-right: 0; }
.nutri__num {
  display: block;
  font-family: var(--mono); font-size: 0.9rem; font-weight: 500;
  color: var(--mcbc-white); line-height: 1.1;
}
.nutri__label {
  display: block;
  font-family: var(--mono); font-size: 0.58rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5); margin-top: 0.2rem;
}
/* On the light meal-plan cards the same strip needs dark ink. */
.nutri--light { border-top-color: rgba(19, 26, 28, 0.12); }
.nutri--light .nutri__cell { border-right-color: rgba(19, 26, 28, 0.12); }
.nutri--light .nutri__num { color: var(--mcbc-charcoal); }
.nutri--light .nutri__label { color: rgba(19, 26, 28, 0.45); }

/* The floating emoji badge is retired. */
.this-week__card-flag { display: none !important; }

.nutri-note {
  margin-top: 1.2rem;
  font-family: var(--mono); font-size: 0.7rem;
  letter-spacing: 0.06em; color: rgba(19, 26, 28, 0.45);
}
.this-week .nutri-note { color: rgba(19, 26, 28, 0.5); }

/* =========================================================================
   MEAL PLAN BAND — the homepage's main conversion block.
   The site sells subscriptions, so the price of one sits above the fold-and-a-bit
   rather than three sections down.
   ========================================================================= */
.plan-band {
  background: linear-gradient(135deg, var(--mcbc-coral-deep), var(--mcbc-coral) 55%, #22C7A9);
  color: var(--mcbc-white);
  padding: clamp(2.5rem, 6vw, 4rem) var(--gutter);
}
.plan-band__inner {
  max-width: var(--max-width); margin: 0 auto;
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(280px, 1fr) auto;
  align-items: center;
}
.plan-band__eyebrow {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.72); margin-bottom: 0.7rem;
}
.plan-band__title {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.7rem, 3.6vw, 2.8rem); line-height: 1.08;
  letter-spacing: -0.02em; margin-bottom: 0.8rem;
}
.plan-band__title em { font-style: italic; color: var(--mcbc-cream); }
.plan-band__desc {
  font-size: 1rem; line-height: 1.6; max-width: 46ch;
  color: rgba(255, 255, 255, 0.88);
}
.plan-band__desc strong { color: var(--mcbc-white); font-weight: 600; }

.plan-band__prices { display: grid; grid-template-columns: repeat(3, minmax(96px, 1fr)); gap: 0.7rem; }
.plan-price {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 1.1rem 0.9rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  transition: background 0.2s, transform 0.2s var(--ease-out-expo);
}
.plan-price:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-2px); }
.plan-price--featured { background: var(--mcbc-white); border-color: var(--mcbc-white); }
.plan-price--featured .plan-price__num { color: var(--mcbc-coral-deep); }
.plan-price--featured .plan-price__unit,
.plan-price--featured .plan-price__meals { color: rgba(19, 26, 28, 0.6); }
.plan-price__num {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1; letter-spacing: -0.02em;
}
.plan-price__unit {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.75); margin-top: 0.3rem;
}
.plan-price__meals {
  font-size: 0.78rem; color: rgba(255, 255, 255, 0.85); margin-top: 0.45rem;
}
.plan-band__cta { grid-column: 1 / -1; justify-self: start; }
/* On the teal band the cream button loses contrast, so the action goes dark —
   and it must set its own text colour, or it inherits charcoal on charcoal. */
.plan-band .btn--solid {
  background: var(--mcbc-charcoal);
  border-color: var(--mcbc-charcoal);
  color: var(--mcbc-white);
}
.plan-band .btn--solid:hover { background: #000; border-color: #000; box-shadow: none; }

@media (max-width: 860px) {
  .plan-band__inner { grid-template-columns: 1fr; }
  .plan-band__cta { justify-self: stretch; justify-content: center; }
}

/* A date snapped back to the earliest allowed day flashes, so the correction
   is visible rather than silent. */
.field__input--nudged { outline: 2px solid var(--mcbc-lemon-bright); outline-offset: 1px; }

/* =========================================================================
   BUTTON HIERARCHY
   The base system paints every .btn--primary the same solid teal, so a row of
   five CTAs read as five equal choices and none of them read as the action.
   One cream button per group is the action; the rest are outlines.
   ========================================================================= */
.btn--solid,
.btn--solid:hover {
  background: var(--mcbc-cream);
  border: 1px solid var(--mcbc-cream);
  color: var(--mcbc-charcoal);
}
.btn--solid:hover { background: var(--mcbc-white); border-color: var(--mcbc-white); }

.btn--outline {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: var(--mcbc-white);
}
.btn--outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.55);
  transform: translateY(-2px);
}
/* On light sections the same outline needs dark ink. */
.dishes .btn--outline, .menu-page .btn--outline, .locations .btn--outline {
  border-color: rgba(19, 26, 28, 0.22); color: var(--mcbc-charcoal);
}
.dishes .btn--outline:hover, .menu-page .btn--outline:hover, .locations .btn--outline:hover {
  background: rgba(19, 26, 28, 0.05); border-color: rgba(19, 26, 28, 0.4);
}
.dishes .btn--solid, .menu-page .btn--solid {
  background: var(--mcbc-coral); border-color: var(--mcbc-coral); color: var(--mcbc-white);
}
.dishes .btn--solid:hover, .menu-page .btn--solid:hover {
  background: var(--mcbc-coral-deep); border-color: var(--mcbc-coral-deep);
}

/* =========================================================================
   NAV — the Menu link pushed the bar past the viewport on laptops.
   ========================================================================= */
.nav__links { gap: 1.15rem; }
.nav__link { font-size: 0.72rem; letter-spacing: 0.11em; }
.nav__cta-cluster { flex-shrink: 0; }
.nav__order { padding: 0.6rem 0.95rem; font-size: 0.7rem; letter-spacing: 0.08em; }
.nav__cta { padding: 0.62rem 1rem; font-size: 0.68rem; letter-spacing: 0.1em; }
@media (max-width: 1400px) { .nav__ticker { display: none; } }
@media (max-width: 1180px) {
  .nav__logo span { display: none; }
  .nav__links { gap: 0.9rem; }
}

/* =========================================================================
   FLOATING CONTACT BUTTON
   The base system fades the closed menu out but leaves it in the flex flow, so
   it reserved ~150px of height and pushed the "Talk to MCBC" nudge halfway up
   the screen, detached from the button it belongs to. Taking the closed menu
   out of flow puts the nudge back on top of the button where it reads as one
   object.
   ========================================================================= */
.fab-menu {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 10px;
}
.fab-root { position: fixed; }          /* re-assert: .fab-menu is absolute to it */
.fab-nudge { cursor: pointer; margin-bottom: 8px; }
.fab-nudge:hover { background: var(--mcbc-coral); }
.fab-nudge:hover::after { border-top-color: var(--mcbc-coral); }
/* The arrow points at the button, so it belongs on the button's side. */
.fab-nudge::after { right: 24px; }

/* ===== CHECKOUT (shown after a sign-up succeeds) ===== */
.checkout { margin-top: 1.6rem; text-align: center; }
.checkout__note {
  margin-top: 0.9rem; padding: 0.7rem 1rem; border-radius: 8px;
  background: rgba(233, 192, 67, 0.14); border: 1px solid rgba(233, 192, 67, 0.35);
  color: var(--mcbc-cream); font-size: 0.9rem; line-height: 1.5;
}
.checkout__fine {
  margin-top: 0.8rem; font-size: 0.78rem; line-height: 1.5;
  color: rgba(255, 255, 255, 0.5);
}
.checkout__done {
  padding: 1rem 1.2rem; border-radius: 10px;
  background: rgba(79, 163, 107, 0.16); border: 1px solid rgba(79, 163, 107, 0.4);
  color: var(--mcbc-white); font-size: 0.95rem; line-height: 1.6;
}
.checkout__done .mono { font-family: var(--mono); opacity: 0.7; font-size: 0.85em; }
/* The success panel only exists once the form has succeeded. */
.lead-form:not(.lead-form--success) .checkout { display: none; }

/* ===== FOOTER: parent-brand credit =====
   The very last line on the page, and the quietest thing on it. */
/* The parent-company credit, last and quietest.
   It used to carry `padding: 0.9rem var(--gutter)`, but `.footer` already
   applies that gutter — so this line started one whole gutter (up to 56px)
   to the right of the copyright line directly above it, and read as a
   mistake rather than as a footnote. Same box model as `.footer__bottom`
   now, so the two share a left edge. */
.footer__parent {
  max-width: var(--max-width);
  margin: 0.9rem auto 0;
  padding: 0;
  font-size: 0.74rem; line-height: 1.6;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.28);
  text-wrap: balance;
}
.footer__parent a { color: rgba(255, 255, 255, 0.42); text-decoration: underline; text-underline-offset: 3px; }
.footer__parent a:hover { color: rgba(255, 255, 255, 0.75); }

/* Delivery window chip on the meal-slot cards. */
.usecase__slot {
  display: inline-block; margin-left: 0.45rem;
  font-family: var(--mono); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--mcbc-coral-deep);
  background: var(--mcbc-pink-soft);
  padding: 0.15rem 0.5rem; border-radius: 100px;
  vertical-align: middle;
}

/* Delivery window chip on the meal-slot cards. */
.usecase__slot {
  display: inline-block; margin-left: 0.45rem;
  font-family: var(--mono); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--mcbc-coral-deep);
  background: var(--mcbc-pink-soft);
  padding: 0.15rem 0.5rem; border-radius: 100px;
  vertical-align: middle;
}

/* The brand row now holds a two-line lockup (MCBC over its expansion), so the
   logo tile centres against both rather than sitting on the first baseline. */
.footer__brand-row { align-items: center; }
.footer__brand-row .footer__brand { margin-bottom: 0; }