/* Shared pieces: buttons, badges, tech tags, demo login card. */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: .7rem 1.5rem;
  border: 2px solid var(--ink); border-radius: 999px;
  font-weight: 700; font-size: 1rem; line-height: 1.1; text-decoration: none; text-align: center;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn-primary { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.btn-primary:hover { background: var(--btn-hover-bg); border-color: var(--btn-hover-bg); color: var(--btn-hover-fg); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--ground); }
.btn-sm { min-height: 44px; padding: .5rem 1.2rem; font-size: .95rem; }
.btn-light { background: var(--sun); color: #0B1636; border-color: var(--sun); }
.btn-light:hover { background: #fff; border-color: #fff; color: #0B1636; }
.btn-outline-light { background: transparent; color: var(--band-ink); border-color: var(--band-ink); }
.btn-outline-light:hover { background: var(--band-ink); color: var(--band); }
.btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

.btn svg { flex: none; }
.btn .wa-ico { margin-right: 8px; color: #0A6B43; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6rem; }

.badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.badge { font-weight: 700; font-size: .85rem; padding: .25rem .7rem; border: 2px solid var(--ink); border-radius: 8px; line-height: 1.2; }
.badge-fill { background: var(--brand); border-color: var(--brand); color: #fff; }
.badge-trial { background: var(--sun); border-color: var(--sun); color: #0B1636; }
.stack { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; }
.stack li { font-size: .88rem; padding: .2rem .6rem; background: var(--panel); border-radius: 6px; line-height: 1.3; }

.tag { padding: .2rem .7rem; border: 2px solid var(--ink); border-radius: 8px; font-weight: 700; font-size: .85rem; line-height: 1.2; }

.band-hero { background: var(--hero); color: #fff; }
.band-hero :focus-visible { outline: 3px solid var(--sun); }
.band-hero .btn-primary { background: var(--sky); border-color: var(--sky); color: #06122F; }
.band-hero .btn-primary:hover { background: #fff; border-color: #fff; color: #06122F; }

.demo-card { background: #fff; color: #0B1636; border-radius: var(--r-lg); padding: clamp(20px, 3.2vw, 34px); --ink: #0B1636; --line: #BCD0F2; --panel: #EAF1FD; }
.demo-card h3 { font-size: 1.5rem; }
.creds { margin-top: 12px; border-top: 2px solid #0B1636; }
.cred { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: 8px 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid #BCD0F2; }
.cred dt { font-weight: 700; }
.cred dd { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.6rem; line-height: 1.1; letter-spacing: .02em; overflow-wrap: anywhere; user-select: all; }
.demo-card .btn-ghost { color: #0B1636; border-color: #0B1636; }
.demo-card .btn-ghost:hover { background: #0B1636; color: #fff; }
.demo-card :focus-visible { outline-color: #1A6FDB; }
.demo-note { margin: 14px 0 0; font-weight: 700; }
.demo-apps { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.demo-card .btn-primary { background: #0A1B4D; border-color: #0A1B4D; color: #fff; }
.demo-card .btn-primary:hover { background: #1AA7EC; border-color: #1AA7EC; color: #06122F; }

@media (max-width: 480px) { .cred { grid-template-columns: 1fr auto; } .cred dt { grid-column: 1 / -1; } }

/* Small bold label above a contact link (home contact section and booking page). */
.cl-label { font-weight: 700; font-size: .95rem; }