/* The header on every page of feedchomp.com (the user, 2026-10-11): the logo,
   Home, Pricing, Docs & Support, Sign in and Start free (the user's yes to
   HQ's sign-up push, 2026-10-20), held at the top as you scroll.
   One sheet for every page: index.html, compare.html, 404.html and the legal
   pages (written by tools/export-legal.mts), which each carry the same
   markup. Its own font names, so it looks the same whatever the page calls
   its fonts. */
@font-face { font-family: BarBrico; src: url(/fonts/BricolageGrotesque_800ExtraBold.woff) format("woff"); font-weight: 800; font-display: swap; }
@font-face { font-family: BarInst; src: url(/fonts/InstrumentSans_700Bold.woff) format("woff"); font-weight: 700; font-display: swap; }
.bar { position: fixed; z-index: 90; top: 12px; left: 50%; width: min(1200px, calc(100% - 24px)); height: 58px; translate: -50% 0;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 8px 0 14px; box-sizing: border-box;
  background: #FFFAF0; border: 3px solid #17140F; border-radius: 18px; box-shadow: 4px 4px 0 #17140F;
  color: #17140F; font: 700 15px/1 BarInst, system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: 0; text-align: left; }
.bar a { color: inherit; text-decoration: none; }
.bar-logo { display: flex; align-items: center; gap: 8px; flex: none; }
.bar-logo svg { display: block; width: 32px; height: 32px; }
.bar-logo span { font: 800 23px/1 BarBrico, system-ui, sans-serif; letter-spacing: -.05em; }
.bar-nav { display: flex; align-items: center; gap: 2px; min-width: 0; }
.bar-nav > a, .bar-menu > summary { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px; border-radius: 12px; white-space: nowrap; cursor: pointer; }
.bar-nav > a:hover, .bar-menu > summary:hover, .bar-menu[open] > summary { background: rgba(23, 20, 15, .07); }
/* the page you're on */
.bar-nav > a[aria-current="page"], .bar-menu.on > summary { background: rgba(46, 217, 160, .32); }
.bar-menu { position: relative; }
.bar-menu > summary { list-style: none; }
.bar-menu > summary::-webkit-details-marker { display: none; }
.bar-menu > summary::after { content: ""; width: 7px; height: 7px; border-right: 2.5px solid; border-bottom: 2.5px solid; rotate: 45deg; translate: 0 -2px; }
.bar-menu[open] > summary::after { rotate: 225deg; translate: 0 2px; }
.bar-menu .short { display: none; }
.bar-list { position: absolute; right: 0; top: calc(100% + 12px); min-width: 260px; display: grid; gap: 2px; padding: 8px;
  background: #FFFDF8; border: 3px solid #17140F; border-radius: 16px; box-shadow: 5px 5px 0 #17140F; }
.bar-list a { padding: 11px 12px; border-radius: 10px; }
.bar-list a:hover, .bar-list a[aria-current="page"] { background: rgba(23, 20, 15, .07); }
.bar-list .bar-narrow { display: none; }
/* the other language (the Spanish pages, 2026-10-20): a link in the bar, in
   the menu on phones; the Spanish menu also says the documents are English */
.bar-list .bar-lang-m { display: none; }
.bar-list .bar-note { padding: 8px 12px 2px; font-size: 13px; line-height: 1.35; color: #4A4238; }
.bar-in .short { display: none; }
.bar-list .mail { margin-top: 4px; padding-top: 13px; border-top: 2px solid #DDD3C4; border-radius: 0 0 10px 10px; font-size: 14px; color: #4A4238; }
/* the one button: sign-up in the app. Sign in is a plain link beside it */
.bar-start { margin-left: 6px; height: 40px; padding: 0 16px !important; background: #FFC531; border: 3px solid #17140F; border-radius: 12px !important; box-shadow: 3px 3px 0 #17140F;
  font: 800 15px/1 BarBrico, system-ui, sans-serif; letter-spacing: -.01em; transition: translate 90ms, box-shadow 90ms; }
.bar .bar-start:hover { background: #FFC531; translate: -1px -1px; box-shadow: 4px 4px 0 #17140F; }
.bar .bar-start:active { translate: 3px 3px; box-shadow: 0 0 0 #17140F; }
.bar a:focus-visible, .bar summary:focus-visible { outline: 3px dashed #17140F; outline-offset: 2px; }
/* Spanish on a tablet: the logo stands in for Inicio and the menu says Ayuda */
@media (max-width: 960px) {
  html[lang="es"] .bar-nav > .bar-home { display: none; }
  html[lang="es"] .bar-menu .long { display: none; }
  html[lang="es"] .bar-menu .short { display: inline; }
}
/* narrower: the other language's link moves into the menu, and so does Precios */
@media (max-width: 820px) {
  .bar-nav > .bar-lang { display: none; }
  .bar-list .bar-lang-m { display: block; }
  html[lang="es"] .bar-nav > .bar-price { display: none; }
  html[lang="es"] .bar-list .bar-narrow { display: block; }
}
@media (max-width: 700px) {
  .bar-menu .long { display: none; }
  .bar-menu .short { display: inline; }
}
@media (max-width: 640px) {
  .bar { top: 10px; width: calc(100% - 20px); height: 52px; padding: 0 6px 0 10px; border-radius: 16px; font-size: 13.5px; }
  .bar-logo span { display: none; }
  .bar-nav > a, .bar-menu > summary { height: 36px; padding: 0 8px; gap: 5px; }
  .bar-menu .long { display: none; }
  .bar-menu .short { display: inline; }
  .bar-list { right: -64px; min-width: 238px; }
  .bar-start { margin-left: 4px; height: 36px; padding: 0 11px !important; font-size: 13.5px; }
  /* the logo is the way home */
  .bar-nav > .bar-home { display: none; }
  .bar-in .long { display: none; }
  .bar-in .short { display: inline; }
}
/* the narrowest phones: Pricing moves into the menu, so Start free fits */
@media (max-width: 389px) {
  .bar-nav > .bar-price { display: none; }
  .bar-list .bar-narrow { display: block; }
}
@media (max-width: 350px) {
  .bar-nav > a, .bar-menu > summary { padding: 0 6px; }
  .bar-start { padding: 0 8px !important; }
  .bar { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) { .bar-start { transition: none; } }