/* Home polish fixes (9 Oct 2026). Loaded after home-polish.css. Only the top bar on narrow phones:
   one row does not fit the logo, two demo buttons and the menu below 400px, so the buttons move to a second row.
   Touch targets stay at 40px or more. Nothing else on the page changes. */
@media (max-width: 399px) {
  .sidebar { flex-wrap: wrap !important; row-gap: 6px; align-items: center; }
  .sidebar .side-foot { display: contents; }
  .sidebar .brand { order: 1; }
  .sidebar .side-foot .menu { order: 2; margin-left: auto; }
  .sidebar::after { content: ""; order: 3; flex: 0 0 100%; height: 0; }
  .sidebar .side-foot .btn { order: 4; flex: 1 1 0; min-width: 0; justify-content: center; }
  .sidebar .side-foot .btn + .btn { order: 5; }
  .sidebar .side-foot .btn,
  .sidebar .side-foot .menu > summary { min-height: 40px !important; }
  .sidebar .side-foot .menu > summary { min-width: 44px !important; }
}
/* 400px to 440px: the bar fits in one row, but tighten the gap so the menu keeps clear of the edge */
@media (min-width: 400px) and (max-width: 640px) {
  .sidebar .side-foot .btn,
  .sidebar .side-foot .menu > summary { min-height: 40px !important; }
}
/* the two hero buttons: 40px touch target on phones too */
@media (max-width: 640px) {
  .xhero .btn-row .btn { min-height: 40px; }
}
/* honesty notices: 12px minimum at every width (the hero tag and the Boundary tag) */
main .xhero .xtag, main .xstrip .xtag { font-size: 12px; }

.xlinks-strip { justify-content: space-between; }
.xlinks { display: inline-flex; align-items: center; gap: var(--s-3); }
.xlinks a { display: inline-flex; align-items: center; gap: var(--s-2); padding: 8px 14px; border: 1px solid var(--x-out); border-radius: 999px; color: var(--ink); font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; }
.xlinks a:hover { color: var(--accent); border-color: var(--accent); }
.xlinks a svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 640px) { .xlinks { flex-wrap: wrap; } }