/* =============================================================
   HOME PAGE (index.html) — "Marigold" redesign, 29 Sep 2026;
   layout redone in round 2, 30 Sep 2026 (docs/design/redesign-web/06-qa/round2).
   Loads after benaam.css. Tokens live there; nothing is declared here.

   DO NOT DEDUPLICATE this file against benaam.css by matching rules.
   It carries its own copies of the header and status objects
   (.hdr__in, .icon-btn, .status, .nav a, .sec-head …) on purpose: the
   two files order equal-specificity rules differently, and removing a
   "byte-identical" rule from one hands the cascade to the other. It was
   tried once and the hero buttons shrank. AssetHygieneTest holds this.
   ============================================================= */

/* ---- header, the home page's own copies ---- */
.landing-page .hdr__in { min-height: var(--header-h); gap: var(--sp-2); }
.landing-page .icon-btn { width: 44px; height: 44px; border-radius: 50%; }
.landing-page .nav a { padding: 8px 14px; border-radius: var(--r-pill); font-size: var(--fs-14); }
.landing-page .hdr__acts .status { display: none; }
@media (min-width: 640px) { .landing-page .hdr__acts .status { display: inline-flex; } }

/* Skip link: clipped away until focused (it sat at left:-9999px with inline
   handlers, which also widened the page for the overflow audit). */
.skip-link {
  position: absolute; top: 8px; left: 8px; z-index: 200; padding: 10px 16px; border-radius: var(--r-md);
  background: var(--accent); color: var(--on-accent); font-weight: 700; text-decoration: none;
  clip-path: inset(50%); white-space: nowrap;
}
.skip-link:focus, .skip-link:focus-visible { clip-path: none; }

/* The veg mark (FSSAI): a green square with a dot. */
.veg { display: inline-grid; place-items: center; width: 14px; height: 14px; border: 1.5px solid var(--veg); border-radius: 3px; background: var(--surface); flex: none; }
.veg::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--veg); }
.veg--lg { width: 18px; height: 18px; }
.veg--lg::after { width: 8px; height: 8px; }

/* ---- hero ---- */
.landing-page section.hero { padding-block: var(--sp-4) var(--sp-8); }
.hero__grid { display: grid; gap: var(--sp-6); align-items: center; }
.hero__art { order: -1; position: relative; margin: 0; border-radius: var(--r-xl); overflow: hidden; background: var(--surface-2); aspect-ratio: 4 / 3; box-shadow: var(--e-2); }
.hero__art img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.hero__art::after { content: ""; position: absolute; inset: 0; background: var(--photo-scrim); pointer-events: none; }
.hero__art figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5); color: #fff;
}
.dishname { font-weight: 700; font-size: var(--fs-18); line-height: 1.25; text-shadow: 0 1px 12px rgba(0,0,0,.4); }
.dishmeta { font-size: var(--fs-12); opacity: .85; margin-top: 2px; }
.dishgo {
  flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 16px;
  border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent);
  font-weight: 700; font-size: var(--fs-14); text-decoration: none; box-shadow: var(--e-1);
}
@media (hover: hover) { .hero__art:hover img { transform: scale(1.03); } }

.hero__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-4); }
/* Green TEXT is the veg green pulled a quarter of the way towards the ink:
   plain --veg is 3.9–4.1:1 on the light page and on --veg-soft, under AA
   for 12–13px type (QA, 30 Sep). --text is dark in light theme and light in
   dark, so the same mix darkens it on light and lifts it on dark (5.6:1 and
   8.7:1+). The dot and the square mark keep --veg. The first declaration
   is the fallback for a browser without color-mix(). */
.hero__veg {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 10px;
  border-radius: var(--r-pill); background: var(--veg-soft); color: var(--veg);
  color: color-mix(in srgb, var(--veg) 75%, var(--text));
  font-size: var(--fs-12); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.landing-page .status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-13); font-weight: 600; color: var(--text-2); }
.landing-page .status.is-open { color: var(--veg); color: color-mix(in srgb, var(--veg) 75%, var(--text)); }
.landing-page .status.is-shut { color: var(--danger); }

.hero h1.display { font-size: var(--fs-display); max-width: 13ch; text-wrap: balance; }
.hero h1 .quiet {
  display: block; margin-bottom: var(--sp-3);
  font: 600 var(--fs-13)/1.4 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3);
}
.hero h1 .quiet .deva { text-transform: none; letter-spacing: 0; color: var(--accent-ink); font-weight: 600; }
.hero__lead { margin-top: var(--sp-4); max-width: 46ch; font-size: var(--fs-16); }
.hero__facts { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin: var(--sp-5) 0 0; padding: 0; list-style: none; }
.hero__facts li {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px;
  font-size: var(--fs-14); font-weight: 600; color: var(--text-2);
}
.hero__facts .ico { width: 16px; height: 16px; color: var(--accent-ink); }
.hero__facts .ico svg { stroke-width: 2; }
@media (max-width: 479px) {
  .hero__facts { flex-direction: column; align-items: flex-start; gap: 0; }
  .hero__art figcaption { align-items: center; padding: var(--sp-3) var(--sp-4); }
  .dishname { font-size: var(--fs-16); }
  .dishmeta { display: none; }
}
.hero__pickup { margin: var(--sp-5) 0 0; color: var(--text-2); font-size: var(--fs-14); line-height: 1.6; text-wrap: pretty; }
.hero__acts { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); }
.hero__acts .btn { width: 100%; }
@media (min-width: 480px) {
  .hero__acts { display: flex; flex-wrap: wrap; }
  .hero__acts .btn { width: auto; }
}
/* Tablets get the desktop's two columns, words left and photo right. One
   column made the photo a full screen of momos before a word (owner, 5 Oct,
   at 768px). */
@media (min-width: 768px) {
  .landing-page section.hero { padding-block: var(--sp-8) var(--sp-12); }
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8); }
  .hero__art { order: 0; aspect-ratio: 4 / 5; }
  .hero h1.display { font-size: clamp(2.25rem, 4.6vw, 4rem); }
}
/* The photo is half as wide on a tablet: the dish name and its button
   stack rather than squeeze the name to three lines. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .hero__art figcaption { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .dishmeta { display: none; }
}
@media (min-width: 1024px) {
  .landing-page section.hero { padding-block: var(--sp-12) var(--sp-16); }
  .hero__grid { grid-template-columns: 1.05fr .95fr; gap: var(--sp-12); }
  .hero__art { aspect-ratio: 5 / 6; }
  .hero__lead { font-size: var(--fs-18); }
}

/* ---- "What's on your mind?" — one row, the page's width ----
   The row lives inside .shell like everything else, so its edges line up
   with the hero and the sections (owner, 30 Sep: it was wider than both).
   Arrows for a mouse, a fading edge wherever the row continues. */
.landing-page section.cats { padding-block: var(--sp-2) var(--sp-6); }
.cats:has(.dish-circles[hidden]):has(.recent-searches[hidden]) { display: none; }
.cats__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 44px; }
.landing-page .cats__label {
  margin: 0; font: 600 var(--fs-11)/1.4 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3);
}
.rail-arrows { display: flex; gap: var(--sp-2); }
.rail-arrows[hidden] { display: none; }
.rail-arrow {
  display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--line-2); border-radius: 50%; background: var(--surface); color: var(--text); cursor: pointer;
  transition: background var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease), transform 100ms var(--ease);
}
/* Text arrows (icons.js leaves arrows to the page font). At the end of
   the row the button is aria-disabled, not disabled: a disabled button
   drops the keyboard focus to <body> (QA, 1 Oct). */
.rail-arrow span { font: 600 var(--fs-18)/1 var(--font-ui); }
.rail-arrow:hover:not([aria-disabled="true"]) { background: var(--surface-2); }
.rail-arrow:active:not([aria-disabled="true"]) { transform: scale(.94); }
.rail-arrow[aria-disabled="true"] { opacity: .35; cursor: default; }
/* Touch screens swipe; the arrows would only be two more things to miss. */
@media (hover: none) { .rail-arrows { display: none; } }
.cats__rail { position: relative; }
.cats__rail::before, .cats__rail::after {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 56px; pointer-events: none;
  opacity: 0; transition: opacity var(--t-med) var(--ease);
}
.cats__rail::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.cats__rail::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.cats__rail[data-more-before="true"]::before, .cats__rail[data-more-after="true"]::after { opacity: 1; }

/* ---- section heads: a number and a big title ----
   No rule over each section any more: a hard ink line across the page at
   every section, and lines under every row, read as clutter (owner, 5 Oct).
   Space and the type do the separating now. */
.landing-page section.sec { padding-block: var(--sp-12); }
@media (min-width: 1024px) { .landing-page section.sec { padding-block: var(--sp-16); } }
/* The footer brings its own top margin; the last section needs no more. */
.landing-page section.sec:last-child { padding-bottom: var(--sp-4); }
.sec-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: var(--sp-3) var(--sp-5);
  margin-bottom: var(--sp-8);
}
.sec-head__n {
  align-self: start; margin: 0; padding-top: 2px;
  font: 700 var(--fs-14)/1.4 var(--font-display); letter-spacing: .02em; color: var(--accent-ink);
}
.sec-head .eyebrow { margin: 0 0 var(--sp-2); }
.sec-head h2, .story__title {
  font: 800 clamp(1.75rem, 4.2vw, 3rem)/1.04 var(--font-display); letter-spacing: -.03em; color: var(--text);
  text-wrap: balance;
}
.sec-head__aside {
  grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  color: var(--text); font-weight: 700; font-size: var(--fs-14); text-decoration: none;
  border-bottom: 2px solid var(--accent);
}
.sec-head__aside:hover { color: var(--accent-ink); }
/* Phones: the number sits beside the small label and the title takes
   the full width, rather than hanging in a column of its own. */
@media (max-width: 767px) {
  .sec-head { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: var(--sp-5); row-gap: 0; }
  .sec-head > div { display: contents; }
  .sec-head__n { min-width: 36px; }
  .sec-head .eyebrow { margin: 0; }
  .sec-head h2 { grid-column: 1 / -1; margin-top: var(--sp-3); }
  .sec-head__aside { grid-column: 1 / -1; margin-top: var(--sp-3); }
}
@media (min-width: 768px) {
  .sec-head { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .sec-head__aside { grid-column: 3; justify-self: end; }
}

/* Links set in running text: ink with a marigold underline. Pickup is one
   of the two main ways to order, so these get a 40px-tall tap area: the
   padding grows the target and the equal negative margin keeps the line
   spacing of the sentence exactly as it was (an inline-block's line box is
   its margin box). */
.landing-page :is(.hero__pickup, .notes p, .board__empty) a {
  color: var(--text); font-weight: 700;
  text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.landing-page :is(.hero__pickup, .notes p) a { display: inline-block; padding-block: 9px; margin-block: -9px; }
.landing-page :is(.hero__pickup, .notes p, .board__empty) a:hover { color: var(--accent-ink); }

/* ---- the signatures: a menu board with a photo window ----
   A ruled, numbered list like the kitchen's printed card — name, a dotted
   leader, the server's price. From 1024px a photo of the dish under the
   pointer or focus sits beside it; below that each row carries its own. */
.board { display: grid; gap: var(--sp-8); }
.board__window { display: none; }
@media (min-width: 1024px) {
  .board { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-12); align-items: start; }
  .board__window:not([hidden]) {
    display: block; position: sticky; top: calc(var(--header-h) + var(--sp-6));
    margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-lg); background: var(--surface-2);
  }
  .board__window::after { content: ""; position: absolute; inset: 0; background: var(--photo-scrim); pointer-events: none; }
  .board__window img { width: 100%; height: 100%; object-fit: cover; }
  .board__window.is-fresh img { animation: bk-fade var(--t-slow) var(--ease-out); }
  .board__window figcaption {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: var(--sp-6);
    color: #fff; font: 800 var(--fs-24)/1.15 var(--font-display); letter-spacing: -.02em; text-shadow: 0 1px 12px rgba(0,0,0,.4);
  }
  .board__window.is-type { background: var(--accent-soft); }
  .board__window.is-type::after { display: none; }
  .board__window.is-type figcaption { top: 0; display: grid; place-items: center; text-align: center; color: var(--text); text-shadow: none; }
}
.board__list { display: grid; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; }
.board__item { animation: bk-rise var(--t-slow) var(--ease-out) both; }
.board__item:nth-child(2) { animation-delay: 40ms; } .board__item:nth-child(3) { animation-delay: 80ms; }
.board__item:nth-child(4) { animation-delay: 120ms; } .board__item:nth-child(5) { animation-delay: 160ms; } .board__item:nth-child(6) { animation-delay: 200ms; }
.board__row {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) 76px; gap: var(--sp-3); align-items: start;
  padding: var(--sp-4); margin-inline: calc(var(--sp-4) * -1); color: var(--text); text-decoration: none; border-radius: var(--r-lg);
  transition: background var(--t-fast) var(--ease);
}
.board__row:hover, .board__row:focus-visible { background: var(--surface); }
.board__n {
  padding-top: 3px; font: 700 var(--fs-14)/1.4 var(--font-display); color: var(--text-3);
  font-variant-numeric: tabular-nums; transition: color var(--t-fast) var(--ease);
}
.board__main { display: grid; gap: 4px; min-width: 0; }
/* The line wraps as a whole: when a long name leaves no room for a proper
   leader, the leader and the price drop to the next line together, rather
   than the name breaking and three dots squeezing in front of the price. */
.board__line { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 2px var(--sp-2); }
.board__name { flex: 0 1 auto; min-width: 0; max-width: 100%; font: 700 var(--fs-18)/1.25 var(--font-display); letter-spacing: -.015em; transition: color var(--t-fast) var(--ease); }
.board__name .veg { vertical-align: 1px; margin-right: 2px; }
.board__tail { flex: 1 0 128px; display: flex; align-items: flex-end; gap: var(--sp-2); min-width: 0; }
.board__dots { flex: 1 1 24px; min-width: 24px; margin-bottom: .35em; border-bottom: 0; }
.board__price { flex: none; font-weight: 700; font-size: var(--fs-16); white-space: nowrap; }
.board__price small { color: var(--text-3); font-size: var(--fs-12); font-weight: 600; }
.board__meta { color: var(--text-3); font-size: var(--fs-12); font-weight: 600; letter-spacing: .02em; }
.board__desc {
  max-width: 58ch; color: var(--text-2); font-size: var(--fs-14); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.board__thumb { width: 76px; height: 76px; border-radius: var(--r-md); object-fit: cover; background: var(--surface-2); }
.board__thumb--none {
  display: grid; place-items: center; font: 800 var(--fs-20)/1 var(--font-display); color: var(--accent-ink); background: var(--accent-soft);
}
/* Phones: the number rides above the name and the price gets its own
   line, so a long name keeps the full column instead of one word a line. */
@media (max-width: 767px) {
  /* Each dish on its own soft tile, the photo level with the middle of its
     words rather than pinned to the top of a tall row (owner, 5 Oct). */
  .board__row {
    grid-template-columns: minmax(0, 1fr) 88px; row-gap: 2px; align-items: center;
    margin-inline: 0; padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4); background: var(--surface);
  }
  .board__n { grid-column: 1; grid-row: 1; padding: 0; font-size: var(--fs-12); }
  .board__main { grid-column: 1; grid-row: 2; }
  .board__thumb { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 88px; height: 88px; }
  .board__line { flex-direction: column; align-items: flex-start; gap: 2px; }
  .board__tail { flex: none; }
  .board__dots { display: none; }
  .board__price { margin-top: 4px; }
}
.board__row:hover .board__name, .board__row:focus-visible .board__name { color: var(--accent-ink); }
.board__row:hover .board__n { color: var(--accent-ink); }
.board__empty { padding: var(--sp-5) 0; color: var(--text-2); }
@media (min-width: 480px) and (max-width: 767px) { .board__row { grid-template-columns: minmax(0, 1fr) 104px; column-gap: var(--sp-5); } .board__thumb { width: 104px; height: 104px; } }
@media (min-width: 768px) {
  .board__row { grid-template-columns: 40px minmax(0, 1fr) 112px; gap: var(--sp-5); align-items: center; }
  .board__thumb { width: 112px; height: 112px; }
}
@media (min-width: 768px) { .board__name { font-size: var(--fs-20); } .board__price { font-size: var(--fs-18); } }
@media (min-width: 1024px) {
  .board__row { grid-template-columns: 48px minmax(0, 1fr); padding: var(--sp-5) var(--sp-4); }
  .board__thumb { display: none; }
  /* The row whose photo is in the window; below 1024 there is no window. */
  .board__row.is-shown .board__n { color: var(--accent-ink); }
  .board__row.is-shown .board__name { color: var(--text); }
  .board__row.is-shown .board__dots { border-bottom-color: var(--accent); }
}

/* ---- the story: the words first, the photograph dropped beside them ----
   Round 2 QA (30 Sep): the board, the story, a veg band and "where" were
   all photo-left, text-right, and read as a template. Here the text leads
   under its own rule and the photo sits to the right, set lower, with a
   one-line caption like a print feature. */
.story { display: grid; gap: var(--sp-8); }
.story__text { display: grid; gap: var(--sp-4); align-content: start; }
.story__kicker { display: flex; align-items: baseline; gap: var(--sp-5); }
.story__kicker .sec-head__n { min-width: 36px; }
.story__kicker .eyebrow { margin: 0; }
.landing-page .story__title { font-size: clamp(2rem, 5.4vw, 4.25rem); line-height: 1; margin-top: var(--sp-2); }
.story__title span { display: block; color: var(--accent-ink); }
.story__text p { margin: 0; max-width: 52ch; color: var(--text-2); line-height: 1.7; }
.story__text .story__lead { color: var(--text); font-size: var(--fs-18); line-height: 1.6; text-wrap: pretty; }
.story__more {
  justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  color: var(--text); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--accent);
}
.story__more:hover { color: var(--accent-ink); }
.story__photo { margin: 0; }
.story__photo img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 70% 50%;
  border-radius: var(--r-lg); background: var(--surface-2);
}
.story__photo figcaption {
  display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3);
  color: var(--text-3); font-size: var(--fs-13); font-weight: 600;
}
/* Tablets: words and photo side by side, as on a computer. The photo
   used to sit alone under the words at 72% width (owner, 5 Oct). */
@media (min-width: 768px) and (max-width: 1023px) {
  .story { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--sp-8); align-items: center; }
  .landing-page .story__title { font-size: clamp(2rem, 4.6vw, 2.75rem); }
  .story__photo img { aspect-ratio: 4 / 5; }
}
@media (min-width: 1024px) {
  .story { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: var(--sp-16); align-items: start; }
  .story__text .story__lead { font-size: var(--fs-20); max-width: 40ch; }
  .story__photo { margin-top: var(--sp-16); }
  .story__photo img { aspect-ratio: 4 / 5; }
}

/* ---- how an order works: four lines of type on ruled rows ----
   A notice pinned up in the kitchen rather than three numbered cards: a
   small letter, the line set large, the detail beside it. No photo — the
   type is the picture here. The section sits on the lighter surface so
   the page changes tone once between the photographs. */
.landing-page section.sec--rules { background: var(--surface); }
/* Four steps as four blocks of type on the lighter band, with no rules
   between them (owner, 5 Oct); two by two from 768px. */
.rules { display: grid; gap: var(--sp-8); list-style: none; margin: 0; padding: 0; }
.rules li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: var(--sp-3); row-gap: var(--sp-2); align-content: start; }
.rules__n {
  display: grid; place-items: center; width: 32px; height: 32px; margin-top: 2px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-ink); font: 700 var(--fs-14)/1 var(--font-display);
}
.rules__say {
  /* Kept under the section title's size (QA, 1 Oct: at 3.75rem the four
     lines out-shouted the h2 above them). */
  margin: 0; font: 800 clamp(1.375rem, 2.6vw, 1.875rem)/1.1 var(--font-display); letter-spacing: -.025em; color: var(--text);
  text-wrap: balance;
}
.rules__say .veg { width: .5em; height: .5em; border-width: 2px; border-radius: .09em; vertical-align: .1em; margin-right: .08em; }
.rules__say .veg::after { width: .22em; height: .22em; }
.rules p { grid-column: 2; margin: 0; max-width: 46ch; color: var(--text-2); font-size: var(--fs-16); line-height: 1.6; }
@media (min-width: 768px) {
  .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-10); }
  .rules li { grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--sp-4); }
  .rules__n { width: 40px; height: 40px; margin-top: 0; font-size: var(--fs-16); }
}

/* ---- where to find us: the address set like a shop sign ---- */
.findus { display: grid; gap: var(--sp-10); }
.findus__where { display: grid; gap: var(--sp-3); align-content: start; }
.findus__label {
  margin: 0; font-size: var(--fs-11); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3);
}
.findus__addr {
  max-width: 22ch; font: 800 clamp(1.5rem, 3.6vw, 2.75rem)/1.1 var(--font-display); font-style: normal;
  letter-spacing: -.025em; color: var(--text); text-wrap: balance;
}
.findus__acts { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); margin: var(--sp-3) 0 0; }
.findus__link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  color: var(--text); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--accent);
}
.findus__link:hover { color: var(--accent-ink); }

/* Pickup, big orders and the app: lines on a ruled list, not boxes. */
.notes { display: grid; gap: var(--sp-6); list-style: none; margin: 0; padding: 0; }
.notes li { display: grid; gap: var(--sp-1) var(--sp-6); }
.notes__label { font: 700 var(--fs-16)/1.5 var(--font-display); letter-spacing: -.01em; color: var(--accent-ink); }
.notes p { margin: 0; color: var(--text-2); line-height: 1.7; }
@media (min-width: 768px) and (max-width: 1023px) {
  .notes li { grid-template-columns: 160px minmax(0, 1fr); align-items: baseline; }
}
@media (min-width: 1024px) {
  .findus { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--sp-16); align-items: start; }
}

/* ---- the floating cart bar on this page ----
   Its look is benaam.css's. Here the footer grows by the bar's height while
   a basket exists, so the bar never sits over the last lines of the page
   (the tab bar's own height is already reserved on the body). */
.landing-page:has(#floating-cart-container.has-cart) .foot { padding-bottom: calc(var(--bar-h) + var(--sp-4)); }
/* The tab bar is gone from 1024px, but body.has-tabbar stays, and
   benaam.css keeps lifting the bar by the tab bar's height there. On this
   page it sits on the bottom edge instead (shared fix requested). */
@media (min-width: 1024px) { body.landing-page.has-tabbar #floating-cart-container { bottom: 0; } }

/* Keyboard focus is never left under the bars. When Tab moves to a link
   the browser scrolls it into view inside these paddings: the sticky
   header at the top, the tab bar (phones) and the cart bar at the bottom.
   Without it "See the full menu" sat wholly under the tab bar at 375px
   (QA, 1 Oct; WCAG 2.4.11). Shared fix for every page requested. */
html:has(body.landing-page) { scroll-padding-top: calc(var(--header-h) + var(--sp-4)); scroll-padding-bottom: var(--sp-4); }
html:has(body.landing-page #floating-cart-container.has-cart) { scroll-padding-bottom: calc(var(--bar-h) + var(--safe-b) + var(--sp-4)); }
@media (max-width: 1023px) {
  html:has(body.landing-page.has-tabbar) { scroll-padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + var(--sp-4)); }
  html:has(body.landing-page.has-tabbar #floating-cart-container.has-cart) {
    scroll-padding-bottom: calc(var(--tabbar-h) + var(--bar-h) + var(--safe-b) + var(--sp-4));
  }
}

/* ---- the kitchen notice (paused/closed), inserted above <main> ---- */
.kitchen-notice {
  padding: 12px var(--gutter); background: var(--danger-soft); color: var(--danger);
  font-size: var(--fs-14); font-weight: 600; text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .board__item, .board__window.is-fresh img { animation: none; }
  .cats__rail::before, .cats__rail::after { transition: none; }
}
@media print { .hdr, .tabbar, .rail-arrows, #floating-cart-container { display: none !important; } }