/* Bunklow shared button look: Liquid Glass (button style #6).
   Randy, Oct 31 2026, about 8:04 AM PT, button answer: "#6 everywhere, header too".
   Dark navy translucent glass pill, a soft light edge, a gentle sheen across the top half, a quiet depth shadow,
   white Fredoka text. No orange fill and no orange border, on any variant.
   Use: <link rel="stylesheet" href="/brand/bk-buttons.css"> then class="bk-btn", "bk-btn bk-btn--teal", "bk-btn bk-btn--ghost".
   Add bk-btn--lg for a big button (the main one, like Start a walk), bk-btn--block for full width. bk-card is the dark rounded box used under the buttons.
   The look is also on every other button on the site through /brand/bk-glass-v1.css and /brand/bk-glass-site-v1.css. */
.bk-btn{--bk-g-bg:linear-gradient(180deg,#ffffff12 0%,#ffffff05 48%,#fff0 52%),linear-gradient(180deg,#162a50e6 0%,#1a2e56e6 46%,#2c426ceb 100%);--bk-g-line:#ced9f085;--bk-g-shadow:inset 0 1px 0 #ffffff3d,inset 0 -1px 0 #08102847,0 6px 14px -6px #02081899;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;min-height:48px;min-width:44px;padding:0 26px;border:1px solid var(--bk-g-line);border-radius:999px;background:var(--bk-g-bg);box-shadow:var(--bk-g-shadow);-webkit-backdrop-filter:blur(8px) saturate(1.3);backdrop-filter:blur(8px) saturate(1.3);color:#fff;text-shadow:0 1px 1px #02081859;font-family:Fredoka,ui-rounded,system-ui,sans-serif;font-size:17px;font-weight:700;line-height:1.1;text-align:center;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s ease-out,filter .15s,border-color .15s}
.bk-btn:hover{filter:brightness(1.14);border-color:#e8f0ffc7}
.bk-btn:active:not(:disabled){transform:scale(.96)}
.bk-btn:focus-visible{outline:3px solid #2cc9c9;outline-offset:2px}
.bk-btn:disabled,.bk-btn[aria-disabled=true]{opacity:.5;cursor:not-allowed}
/* Big main button: the same glass, a little larger */
.bk-btn--lg{min-height:56px;padding:0 32px;font-size:20px;box-shadow:var(--bk-g-shadow),0 10px 26px -10px #02081899}
/* Teal: the same glass with a faint teal edge and glow */
.bk-btn--teal{--bk-g-line:#6fd9dd8c;--bk-g-shadow:inset 0 1px 0 #ffffff3d,inset 0 -1px 0 #08102847,0 6px 14px -6px #02081899,0 0 18px #2cc9c92e}
/* Ghost: the same glass, lighter and more see through */
.bk-btn--ghost{--bk-g-bg:linear-gradient(180deg,#ffffff0f 0%,#ffffff03 50%,#fff0 52%),linear-gradient(180deg,#162a50d1 0%,#1a2e56d1 100%);--bk-g-line:#ced9f06b}
.bk-btn--block{display:flex;width:100%}
.bk-card{background:#10203c;color:#eef3fc;border:1px solid #2cc9c98c;border-radius:24px;box-shadow:0 0 28px #ff8a0014}
@media (prefers-reduced-motion:reduce){.bk-btn{transition:none}}