/* The footer shared by the landing and the legal pages
   (layouts/partials/_noodl_footer). Deliberately quiet: two thin lines at
   the page's end, in the page's own cream, so the one-screen hero stays the
   whole show. Plain selectors, no body scope, so it reads the same under
   both layouts. Colours come from the design-system tokens; the page loads
   noodl-tokens.css first. */
.noodl-foot {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 18px 16px max(20px, env(safe-area-inset-bottom));
  color: var(--noodl-palettes-landing-muted);
  font: 400 12px/1.5 var(--noodl-fonts-landing-stack);
  text-align: center;
  opacity: .8;
}
.noodl-foot:hover, .noodl-foot:focus-within { opacity: 1; }
.noodl-foot a { color: inherit; text-decoration: none; }
.noodl-foot a:hover { color: var(--noodl-palettes-landing-green); text-decoration: underline; text-underline-offset: 3px; }

.noodl-foot-links {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 2px 14px;
  color: var(--noodl-palettes-landing-green);
  font-size: 12.5px; font-weight: 600;
}
.noodl-foot-social { display: inline-flex; align-items: center; gap: 4px; }
.noodl-foot-social svg { flex-shrink: 0; }

/* The seller, the contact and the payments on one line. Spaced, not
   dotted: a dot would start the second line whenever it wraps. */
.noodl-foot-who {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 2px 16px;
  margin: 0;
}
.noodl-foot-pay { display: inline-flex; align-items: center; gap: 6px; }
.noodl-foot-cards { display: inline-flex; gap: 3px; }
.noodl-foot-cards svg { display: block; width: 24px; height: auto; }