/* Veabird brand layer: fonts, color tokens, site header and footer.
   Safe to load on any page (no bare element selectors except body font),
   including the Beach, Snow and Trips apps that bring their own layout CSS. */
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage-grotesque-latin.woff2") format("woff2"); font-weight: 500 800; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --vb-ink: #0b1b33; --vb-muted: #57677a; --vb-line: #dde5ef; --vb-bg: #f5f8fc; --vb-card: #fff;
  --vb-blue: #2a62e8; --vb-blue-deep: #1d4fd8; --vb-sky: #eaf1ff; --vb-sun: #ffb938; --vb-ember: #e9743a;
  --vb-bird: #2a62e8; --vb-wing: #1b45b5; --vb-link: #2a62e8;
  --vb-snow: #2a62e8; --vb-beach: #08798c; --vb-turquoise: #19b5c8;
  --vb-display: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --vb-ui: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --vb-radius: 16px;
  --vb-shadow: 0 1px 2px rgba(11, 27, 51, .06), 0 8px 24px -12px rgba(11, 27, 51, .18);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --vb-ink: #e8eef6; --vb-muted: #97a7b9; --vb-line: #22324a; --vb-bg: #08121f; --vb-card: #0f1b2c;
    --vb-sky: #13233b; --vb-bird: #5b8cf7; --vb-wing: #3565e0; --vb-link: #7aa4ff; --vb-beach: #3cc3d4;
    --vb-shadow: none;
  }
}
body { font-family: var(--vb-ui); -webkit-font-smoothing: antialiased; }

/* Header */
.bb-top { position: sticky; top: 0; z-index: 1100; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px;
  padding: 10px 20px; background: color-mix(in srgb, var(--vb-card) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--vb-line); font-family: var(--vb-ui); }
.bb-top.static { position: relative; }
.bb-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--vb-ink); min-width: 0; }
.bb-brand img { height: 30px; width: auto; display: block; }
.bb-brand .bb-product { font: 700 17px/1 var(--vb-display); letter-spacing: -.02em; color: var(--accent, var(--vb-blue)); padding-left: 10px; border-left: 1.5px solid var(--vb-line); white-space: nowrap; }
.bb-nav { display: flex; gap: 2px; align-items: center; min-width: 0; }
.bb-nav a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--vb-muted); font: 500 13.5px/1 var(--vb-ui); padding: 8px 10px; border-radius: 999px; white-space: nowrap; }
.bb-nav a svg { width: 16px; height: 16px; flex: none; }
.bb-nav a.flag { color: var(--vb-ink); font-weight: 650; }
.bb-nav a:hover { color: var(--vb-ink); background: var(--vb-sky); }
.bb-nav a.on { color: #fff; background: var(--accent, var(--vb-blue)); }
.bb-nav .sep { width: 1px; height: 18px; background: var(--vb-line); margin: 0 6px; flex: none; }
@media (max-width: 1100px) {
  .bb-top { padding: 8px 16px 0; }
  .bb-nav { order: 3; width: calc(100% + 32px); margin: 0 -16px; padding: 4px 12px 8px; overflow-x: auto; scrollbar-width: none; }
  .bb-nav::-webkit-scrollbar { display: none; }
}

/* Buttons */
.vb-btn { display: inline-flex; align-items: center; gap: 8px; font: 650 15px/1 var(--vb-ui); padding: 13px 18px; border-radius: 12px; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; }
.vb-btn svg { width: 18px; height: 18px; }
.vb-btn.solid { background: var(--accent, var(--vb-blue)); color: #fff; }
.vb-btn.solid:hover { filter: brightness(1.08); }
.vb-btn.ghost { color: var(--vb-ink); border-color: var(--vb-line); background: var(--vb-card); }
.vb-btn.ghost:hover { border-color: var(--accent, var(--vb-blue)); }

/* Score scale chips (shared 1–100 scale) */
.vb-scale { display: flex; flex-wrap: wrap; gap: 6px; }
.vb-scale span { font: 600 12px/1 var(--vb-ui); color: #fff; padding: 6px 10px; border-radius: 999px; }

/* Footer */
.vb-foot { margin-top: 48px; background: var(--vb-card); border-top: 1px solid var(--vb-line); color: var(--vb-muted); font: 14px/1.6 var(--vb-ui); }
.vb-foot .in { max-width: 1200px; margin: 0 auto; padding: 36px 20px 28px; display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 28px; }
.vb-foot img { height: 28px; }
.vb-foot p { margin: 10px 0 0; max-width: 34ch; }
.vb-foot h4 { margin: 4px 0 10px; font: 700 13px/1 var(--vb-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--vb-ink); }
.vb-foot ul { list-style: none; margin: 0; padding: 0; }
.vb-foot li { margin: 6px 0; }
.vb-foot a { color: var(--vb-muted); text-decoration: none; }
.vb-foot a:hover { color: var(--vb-ink); text-decoration: underline; }
.vb-foot .legal { grid-column: 1 / -1; border-top: 1px solid var(--vb-line); padding-top: 16px; font-size: 12.5px; }
@media (max-width: 760px) { .vb-foot .in { grid-template-columns: 1fr 1fr; } .vb-foot .in > :first-child { grid-column: 1 / -1; } }