/* Styles for the interactive landing in index.html. The list is a plain
   boodschappenlijst — item + amount badge, no store chips and no live prices
   (those live inside the app). Tokens track Front/lib/constants.dart; the engine
   in mand_landing.js binds to the .ml-* nodes. */

:root {
  --ground: #F5F3EE;
  --card: #FAF8F4;
  --receipt: #FFFEFA;
  --ink: #0D0D0D;
  --mut: #4A4A4A;
  --soft: #9A9A9A;
  --faint: #6E6E6E;
  --hair: #D0CDC6;
  --sign: #3E5A38;
  --sign-ink: #F7F5EA;
  --printed: #6E7364;
  --accent-ink: #C8301A;
  --good: #2E7D32;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "Courier New", ui-monospace, Consolas, monospace;
  --display: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --hand: "Shantell Sans", "Bradley Hand", cursive;
}

html, body { margin: 0; height: 100%; background: var(--ground); }

#mand-landing, #mand-landing *, #mand-landing *::before, #mand-landing *::after { box-sizing: border-box; }

#mand-landing {
  position: fixed; inset: 0; z-index: 9999; overflow-y: auto;
  background: var(--ground); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: opacity .22s ease;
}
.mand-direct #mand-landing { display: none; }

#mand-landing .shell { max-width: 680px; margin: 0 auto; padding: 0 24px 40px; container-type: inline-size; }
#mand-landing a { color: var(--ink); }
#mand-landing :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
#mand-landing button { font-family: var(--sans); }

/* ── the mark: "Daar" hangs on a signboard that points down. The same board
   marks the cheapest store in a price row, so logo and verdict are one shape. ── */
#mand-landing .wd {
  display: inline-flex; align-items: baseline; white-space: nowrap;
  line-height: 1; text-decoration: none;
}
#mand-landing .wd-w {
  font-family: var(--display); font-weight: 600; letter-spacing: -.02em;
  color: var(--printed); padding-right: .12em;
}
#mand-landing .wd-d {
  position: relative; display: inline-block; font-size: 1.12em;
  padding: .27em .28em .3em;
  background: var(--sign); color: var(--sign-ink); border-radius: .09em;
  font-family: var(--hand); font-weight: 800; letter-spacing: -.005em;
}
#mand-landing .wd-d > span { position: relative; z-index: 1; }
#mand-landing .wd-d::before {
  content: ""; position: absolute; inset: .1em;
  border: .042em solid var(--sign-ink); opacity: .36; border-radius: .05em;
}
#mand-landing .wd-d::after {
  content: ""; position: absolute; left: 50%; bottom: -.25em; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: .3em solid transparent; border-right: .3em solid transparent;
  border-top: .26em solid var(--sign);
}
#mand-landing .wd-rig {
  position: absolute; left: 24%; right: 24%; top: -.44em; height: .08em;
  background: var(--sign); border-radius: .04em;
}
#mand-landing .wd-rig::before, #mand-landing .wd-rig::after {
  content: ""; position: absolute; top: .08em; width: .07em; height: .38em; background: var(--sign);
}
#mand-landing .wd-rig::before { left: 12%; }
#mand-landing .wd-rig::after { right: 12%; }

/* ── hero ── */
/* the mark's rig hangs above its own box, so the top needs clearance the type
   metrics do not account for. The closing rule sits nearer the stepper than the
   line it follows, so it reads as that section's header rule. */
#mand-landing .wd-nl { align-self: flex-start; margin-left: .16em; padding-top: .14em; font-family: var(--display); font-weight: 700; font-size: .58em; letter-spacing: .02em; color: var(--printed); }

#mand-landing .hero { padding: 46px 0 22px; border-bottom: 1px solid var(--hair); }
#mand-landing h1 { margin: 0 0 20px; font-family: var(--display); font-size: clamp(34px, 6.4vw, 46px); font-weight: 800; line-height: 1.04; letter-spacing: -.028em; text-wrap: balance; }

/* ── the headline is the name asked, then answered: both halves stay tight
   lockups, so the single space between them is the only seam and reads as the
   break between question and answer. Sized off the shell rather than the
   viewport, so the fit holds whatever the shell caps at; wrapping stays
   reachable only as a fallback if font metrics differ from that fit, and the vw
   line is for browsers without container units. ── */
#mand-landing .hero-ask {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .62em .4em;
  font-size: min(40px, 6.1vw);
  font-size: min(40px, 6.25cqw);
}
#mand-landing .hero-ask .wd { font-size: 1em; }
#mand-landing .ask-q .wd-w { color: var(--soft); }
#mand-landing .ask-waar {
  font-family: var(--hand); font-weight: 800; font-size: 1.12em; letter-spacing: -.005em;
  color: var(--sign);
}
#mand-landing .hero-sub { margin: 15px 0 0; font-size: 14.5px; color: var(--mut); }

#mand-landing .ml-openapp {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 16px; padding: 8px 16px;
  border: 1px solid var(--ink); border-radius: 999px;
  background: var(--ink); color: var(--ground);
  font-size: 13.5px; font-weight: 700; text-decoration: none;
}
#mand-landing .ml-openapp:hover { background: var(--mut); border-color: var(--mut); }
#mand-landing .ml-openapp[hidden] { display: none; }

/* ── progress stepper: the three real stages, in this page's order ── */
#mand-landing .ml-steps {
  display: flex; align-items: stretch; gap: 0; margin: 16px 0 6px;
  border: 1px solid var(--hair); background: var(--card);
}
#mand-landing .ml-step {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 9px;
  padding: 11px 12px; border: 0; border-left: 1px solid var(--hair);
  background: transparent; color: var(--mut); cursor: pointer; text-align: left;
  font-size: 13px; font-weight: 600; transition: background .15s ease, color .15s ease;
}
#mand-landing .ml-step:first-child { border-left: 0; }
#mand-landing .ml-step:hover { color: var(--ink); }
#mand-landing .ml-stepno {
  position: relative; flex: 0 0 auto; width: 21px; height: 21px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hair); background: var(--receipt);
  font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--faint);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
#mand-landing .ml-steplbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mand-landing .ml-step.is-active { color: var(--ink); background: var(--receipt); }
#mand-landing .ml-step.is-active .ml-stepno { background: var(--ink); color: var(--ground); border-color: var(--ink); }
/* the tick is drawn, not typeset: a ✓ glyph falls out of the mono stack into
   whatever the system substitutes, which rendered as a smudge beside the number */
#mand-landing .ml-step.is-done .ml-stepno { background: var(--good); border-color: var(--good); color: transparent; }
#mand-landing .ml-step.is-done .ml-stepno::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: translate(-50%, -62%) rotate(45deg);
}
#mand-landing .ml-step.is-locked:not(.is-active) .ml-stepno { border-style: dashed; }
#mand-landing .ml-step.is-unlocked .ml-stepno { background: var(--ink); border-color: var(--ink); color: var(--ground); }

/* ── step heading (numbered, ties to the stepper above) ── */
#mand-landing .ml-h2 { display: flex; align-items: center; gap: 11px; margin: 34px 0 6px; font-family: var(--display); font-size: 24px; font-weight: 800; letter-spacing: -.022em; }
#mand-landing .ml-hnum {
  flex: 0 0 auto; width: 27px; height: 27px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--ground);
  font-family: var(--mono); font-size: 14px; font-weight: 700; line-height: 1;
}
@keyframes ml-chip-pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(62,90,56,.45); }
  40% { transform: scale(1.22); box-shadow: 0 0 0 8px rgba(62,90,56,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(62,90,56,0); }
}
#mand-landing .ml-hnum.is-beckon { animation: ml-chip-pulse .7s ease; }
#mand-landing .ml-sub2 { margin: 0 0 18px; font-size: 14px; line-height: 1.4; color: var(--mut); }

/* ── store picker: tiles + capacity meter (from the control) ── */
#mand-landing .ml-meter { margin: 0 0 16px; }
#mand-landing .ml-rail { display: flex; align-items: center; gap: 10px; }
#mand-landing .ml-slots { display: flex; gap: 4px; }
#mand-landing .ml-slot {
  width: 30px; height: 26px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--hair); border-radius: 3px; background: transparent;
  font-size: 11px; font-weight: 700;
}
#mand-landing .ml-count { flex: 0 0 auto; font-size: 13px; font-weight: 700; letter-spacing: .2px; color: var(--ink); }
/* rides the rail rather than sitting under it: appearing on a line of its own
   pushed the tiles down the moment the fourth store landed */
#mand-landing .ml-railhint {
  flex: 0 1 auto; min-width: 0; font-size: 12px; color: var(--faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#mand-landing .ml-railhint[hidden] { display: none; }
@keyframes ml-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(6px); } 45% { transform: translateX(-4px); } 70% { transform: translateX(3px); } }
#mand-landing .ml-rail.is-nudge { animation: ml-shake .34s ease; }
#mand-landing .ml-rail.is-nudge .ml-count { color: var(--accent-ink); }

#mand-landing .ml-tiles { display: flex; flex-wrap: wrap; gap: 10px; border-radius: 6px; }
#mand-landing .ml-tiles.is-beckon { animation: ml-wash 1s ease; }
#mand-landing .ml-tile {
  display: inline-flex; align-items: center; gap: 6px;
  flex: 0 1 calc(50% - 5px); min-width: 120px; padding: 9px 10px;
  border: 1px solid var(--hair); border-radius: 4px;
  background: var(--card); color: var(--mut);
  font-size: 13px; font-weight: 600; cursor: pointer; user-select: none;
  transition: opacity .12s ease;
}
#mand-landing .ml-tile .glyph { font-size: 15px; line-height: 1; width: 15px; text-align: center; }
#mand-landing .ml-tile .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mand-landing .ml-tile.is-disabled { opacity: .55; }

/* ── recipe header: label + "voor X personen" dial ── */
#mand-landing .recipes-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 2px 0 12px; }
#mand-landing .recipes-head .lbl { font-size: 13px; font-weight: 600; color: var(--mut); }
#mand-landing .ml-people {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--hair); border-radius: 999px; background: var(--card);
  padding: 2px 4px; font-size: 13px; color: var(--mut);
}
#mand-landing .ml-people-pre { padding-left: 8px; }
#mand-landing .ml-people-post { padding-right: 10px; }
#mand-landing .ml-people-n { min-width: 16px; text-align: center; font-family: var(--mono); font-weight: 700; font-size: 15px; color: var(--ink); }
#mand-landing .ml-people-btn {
  width: 26px; height: 26px; border: 0; border-radius: 999px; background: transparent;
  color: var(--ink); font-size: 17px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s ease;
}
#mand-landing .ml-people-btn:hover:not(:disabled) { background: var(--hair); }
#mand-landing .ml-people-btn:disabled { color: var(--soft); cursor: default; }

/* ── recipe chips ── */
#mand-landing .recipes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
#mand-landing .ml-recipe {
  border: 1px solid var(--hair); border-radius: 999px; background: var(--card);
  color: var(--ink); padding: 6px 13px; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: border-color .12s ease, color .12s ease;
}
#mand-landing .ml-recipe:hover { border-color: var(--ink); }
#mand-landing .ml-recipe.on { border-color: var(--sign); color: var(--sign); }

/* ── workbench: receptenkaart + kassabon. Mobile-first — list on top, recipe below ── */
#mand-landing .ml-fill2 { display: flex; flex-direction: column; }
#mand-landing .basketcol { order: 0; min-width: 0; }
#mand-landing .recipecard {
  order: 1;
  border: 1px solid var(--hair); border-radius: 7px; background: var(--card);
  box-shadow: 0 1px 0 rgba(13,13,13,.03);
  padding: 15px 16px 14px; margin: 18px 0 0;
}
#mand-landing .recipecard .recipes-head {
  align-items: center; gap: 12px;
  margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px dashed var(--hair);
}
#mand-landing .recipecard-intro { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#mand-landing .recipecard .lbl { font-size: 14.5px; font-weight: 700; color: var(--ink); }
#mand-landing .recipecard .lbl-withsub { display: none; }
#mand-landing .recipecard-sub { display: none; font-size: 12.5px; color: var(--faint); }
#mand-landing .recipecard-sub .rf-arr { display: none; color: var(--soft); }
#mand-landing .recipecard .ml-people { flex: 0 0 auto; }
#mand-landing .recipecard .recipes {
  margin: 0; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px;
  scrollbar-width: thin; scrollbar-color: var(--soft) transparent;
}
#mand-landing .recipecard .recipes::-webkit-scrollbar { height: 8px; }
#mand-landing .recipecard .recipes::-webkit-scrollbar-thumb { background: var(--soft); border-radius: 999px; }
#mand-landing .recipecard .recipes::-webkit-scrollbar-track { background: transparent; }
#mand-landing .recipecard .ml-recipe { flex: 0 0 auto; }

/* ── the list, framed as the control's receipt (bon) ── */
#mand-landing .listbox {
  background: var(--receipt); border: 1px solid var(--hair); border-bottom: 0;
  box-shadow: 0 1px 0 rgba(13,13,13,.04), 0 10px 28px rgba(13,13,13,.07);
  font-variant-numeric: tabular-nums;
}
#mand-landing .ml-tear {
  height: 9px;
  background: conic-gradient(from 135deg at 50% 0, var(--ground) 90deg, #0000 0) 0 0 / 14px 100% repeat-x, var(--receipt);
  border-left: 1px solid var(--hair); border-right: 1px solid var(--hair);
}

/* a list line = amount badge + name + remove (transparent on the receipt) */
#mand-landing .ml-card {
  display: flex; align-items: center; min-height: 54px;
  border-top: 1px dashed var(--hair); animation: ml-print .24s ease;
}
#mand-landing .ml-body {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center;
  padding: 10px 6px 10px 18px;
}
#mand-landing .ml-name { min-width: 0; color: var(--ink); font-size: 15px; font-weight: 500; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mand-landing .ml-remove {
  flex: 0 0 auto; align-self: stretch; border: 0; background: transparent; color: var(--soft);
  cursor: pointer; font-size: 17px; line-height: 1; padding: 0 14px;
}
#mand-landing .ml-remove:hover { color: var(--accent-ink); }

/* inline add-a-line row (mirrors the app's trailing blank row) */
#mand-landing .ml-addrow { display: flex; align-items: center; min-height: 54px; }
#mand-landing .ml-lines:not(:empty) + .ml-addrow { border-top: 1px dashed var(--hair); }
#mand-landing .ml-addglyph { flex: 0 0 46px; text-align: center; color: var(--faint); font-size: 21px; line-height: 1; cursor: text; user-select: none; }
#mand-landing .ml-addrow:focus-within .ml-addglyph { color: var(--ink); }
@keyframes ml-wash {
  0% { background-color: rgba(62,90,56,0); }
  22% { background-color: rgba(62,90,56,.16); }
  100% { background-color: rgba(62,90,56,0); }
}
@keyframes ml-hop { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(-5px); } 65% { transform: translateY(1px); } }
#mand-landing .ml-addrow.is-beckon { animation: ml-wash 1s ease; }
#mand-landing .ml-addrow.is-beckon .ml-addglyph { animation: ml-hop .5s ease .12s; }
#mand-landing .ml-input {
  flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent;
  padding: 15px 12px 15px 0; font-size: 17px; font-family: var(--sans); color: var(--ink);
}
#mand-landing .ml-input::placeholder { color: var(--faint); }
#mand-landing .ml-lines:empty + .ml-addrow .ml-addglyph { color: var(--mut); }
#mand-landing .ml-lines:empty + .ml-addrow .ml-input::placeholder { color: var(--mut); }
#mand-landing .ml-hint { margin: 12px 2px 0; font-size: 12.5px; color: var(--faint); }
#mand-landing .ml-hint[hidden] { display: none; }

/* ── the CTA (flat, like the control; sticky on mobile) ── */
#mand-landing .cta-wrap { margin: 30px 0 0; }
#mand-landing .ml-action { display: grid; }
#mand-landing .ml-action > * { grid-area: 1 / 1; }
#mand-landing .ml-start {
  width: 100%; min-height: 64px; border: 0; border-radius: 0;
  background: var(--ink); color: var(--ground);
  font-family: var(--display);
  font-size: clamp(17px, 4.6vw, 24px); font-weight: 800; letter-spacing: -.022em; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  box-shadow: inset 0 0 0 1px var(--ink), 0 6px 18px rgba(13,13,13,.16);
  transition: opacity .28s ease, transform .16s ease, box-shadow .3s ease, background .3s ease, color .3s ease;
}
#mand-landing .ml-cta-num {
  flex: 0 0 auto; width: 27px; height: 27px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ground); color: var(--ink);
  font-family: var(--mono); font-size: 14px; font-weight: 700; line-height: 1;
  transition: background .3s ease, color .3s ease, box-shadow .3s ease;
}
@keyframes ml-roll { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
#mand-landing .ml-cta-num.is-roll { animation: ml-roll .36s ease; }
#mand-landing .ml-start .ml-ctacount { font-size: 15px; font-weight: 600; opacity: .68; }
#mand-landing .ml-start .ml-ctacount:empty { display: none; }
#mand-landing .ml-start .arr { font-size: 20px; transition: transform .16s ease; }
#mand-landing .ml-start:hover:not(:disabled) { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--ink), 0 10px 24px rgba(13,13,13,.24); }
#mand-landing .ml-start:hover:not(:disabled) .arr { transform: translateX(4px); }
#mand-landing .ml-start:active:not(:disabled) { transform: translateY(0); box-shadow: inset 0 0 0 1px var(--ink), 0 4px 12px rgba(13,13,13,.2); }
#mand-landing .ml-start:disabled { opacity: .4; cursor: default; box-shadow: none; }
/* ── guide costume: hollow "take me to the pending step"; solid always means go ── */
#mand-landing .ml-start.is-guide { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
#mand-landing .ml-start.is-guide:hover { transform: none; background: rgba(13,13,13,.05); box-shadow: inset 0 0 0 1.5px var(--ink); }
#mand-landing .ml-start.is-guide:hover .arr { transform: none; }
#mand-landing .ml-start.is-guide:active { transform: none; box-shadow: inset 0 0 0 1.5px var(--ink); }
#mand-landing .ml-start.is-guide .ml-cta-num { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
@keyframes ml-wake { 0% { transform: translateY(0); } 35% { transform: translateY(-4px); } 70% { transform: translateY(0); } 85% { transform: translateY(-1px); } 100% { transform: translateY(0); } }
#mand-landing .ml-start.is-wake { animation: ml-wake .5s ease; }
#mand-landing .ml-progress { min-height: 64px; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .28s ease, transform .28s ease; }
#mand-landing .ml-action.is-loading .ml-start { opacity: 0; transform: translateY(-4px); pointer-events: none; }
#mand-landing .ml-action.is-loading .ml-progress { opacity: 1; transform: none; pointer-events: auto; }
#mand-landing .ml-progresslabel { margin-bottom: 9px; text-align: center; font-size: 13px; color: var(--mut); }
#mand-landing .ml-track { height: 2px; width: 100%; background: var(--hair); overflow: hidden; }
#mand-landing .ml-fill { height: 100%; width: 0; background: var(--ink); }
#mand-landing .reassure { margin: 12px 0 0; text-align: center; font-size: 12.5px; color: var(--mut); }
#mand-landing .reassure .k { color: var(--ink); font-weight: 700; }
#mand-landing .ml-skip {
  border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--ink);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
#mand-landing .ml-skip:hover { color: var(--sign); }
#mand-landing .sr-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── trailing content (matches the control's sections) ── */
#mand-landing .after { border-top: 1px solid var(--hair); margin-top: 46px; padding-top: 40px; }
#mand-landing .after h2 { margin: 44px 0 22px; font-family: var(--display); font-size: 26px; font-weight: 800; letter-spacing: -.025em; }
#mand-landing .after > h2:first-child { margin-top: 0; }
#mand-landing .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
#mand-landing .step .no { font-family: var(--mono); font-size: 12px; color: var(--sign); letter-spacing: .1em; }
#mand-landing .step h3 { margin: 8px 0 6px; font-size: 16.5px; font-weight: 700; }
#mand-landing .step p { margin: 0; font-size: 14.5px; color: var(--mut); }
#mand-landing .faq { max-width: 640px; }
#mand-landing .faq details { border-bottom: 1px solid var(--hair); }
#mand-landing .faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 15px 2px; font-size: 15.5px; font-weight: 600; }
#mand-landing .faq summary::-webkit-details-marker { display: none; }
#mand-landing .faq summary::after { content: "+"; color: var(--soft); font-weight: 400; }
#mand-landing .faq details[open] summary::after { content: "–"; }
#mand-landing .faq .a { margin: 0; padding: 0 2px 16px; font-size: 14.5px; color: var(--mut); }
#mand-landing .foot { border-top: 1px solid var(--hair); margin-top: 36px; padding: 26px 0 8px; display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 24px; }
#mand-landing .foot .tag { font-size: 12.5px; color: var(--soft); }
#mand-landing .foot-nav a { font-size: 13px; font-weight: 600; color: var(--mut); text-decoration: none; white-space: nowrap; }
#mand-landing .foot-nav a:hover { color: var(--ink); }

@keyframes ml-print { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@media (min-width: 700px) {
  #mand-landing .ml-fill2 {
    display: grid; grid-template-columns: minmax(230px, 268px) 1fr;
    gap: 24px; align-items: start;
  }
  #mand-landing .recipecard { order: 0; margin: 0; }
  #mand-landing .basketcol { order: 1; }
  #mand-landing .recipecard .recipes-head { flex-direction: column; align-items: stretch; gap: 10px; }
  #mand-landing .recipecard .ml-people { align-self: flex-start; }
  #mand-landing .recipecard .lbl-withsub { display: inline; }
  #mand-landing .recipecard .lbl-nosub { display: none; }
  #mand-landing .recipecard-sub { display: block; }
  #mand-landing .recipecard-sub .rf-arr { display: inline; }
  #mand-landing .recipecard .recipes { flex-wrap: wrap; overflow: visible; padding-bottom: 0; }
}

@media (max-width: 560px) {
  #mand-landing .steps { grid-template-columns: 1fr; gap: 18px; }
  /* no room left on the rail beside four chips — "vol" on the count carries it */
  #mand-landing .ml-railhint { display: none; }
  #mand-landing .ml-steplbl { font-size: 12px; }
  #mand-landing .ml-step { padding: 10px 9px; gap: 7px; }
  #mand-landing .cta-wrap {
    position: sticky; bottom: 0; padding: 12px 0 14px;
    background: linear-gradient(to top, var(--ground) 62%, rgba(245,243,238,0));
  }
}
@media (max-width: 380px) {
  #mand-landing .ml-start .ml-ctacount { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #mand-landing, #mand-landing * { scroll-behavior: auto; }
  #mand-landing .ml-card, #mand-landing .ml-start, #mand-landing .ml-progress { animation: none; transition-duration: .01s; transform: none !important; }
  #mand-landing .ml-start.is-wake { animation: none; }
  #mand-landing .ml-rail.is-nudge { animation: none; }
  #mand-landing .ml-addrow.is-beckon, #mand-landing .ml-addrow.is-beckon .ml-addglyph,
  #mand-landing .ml-hnum.is-beckon, #mand-landing .ml-tiles.is-beckon,
  #mand-landing .ml-cta-num.is-roll { animation: none; }
}