:root {
  color-scheme: light;
  font: 16px/1.5 system-ui, sans-serif;
  color: #242139;
  background: #f6f5fa;
}
* { box-sizing: border-box; }
body { margin: 0; }
.site-footer { padding: 2rem max(1rem, calc((100vw - 74rem) / 2)); border-top: 1px solid #e7e3ef; color: #62596e; display: grid; grid-template-columns: 1fr 2fr; gap: 1.5rem; font-size: .85rem; }
.site-footer dt { font-weight: 650; margin-top: .8rem; }
.site-footer dd { margin: .2rem 0; overflow-wrap: anywhere; }
.table-scroll { overflow-x: auto; }
.loyalty-table { border-collapse: collapse; width: 100%; font-size: .85rem; }
.loyalty-table th, .loyalty-table td { padding: .75rem; text-align: left; border-bottom: 1px solid #e7e3ef; }
.loyalty-table small { display: block; color: #7c7189; }
.loyalty-settings { margin-top: 1rem; }
.loyalty-tiers { flex: 1 1 100%; }
.loyalty-tiers .fields { margin: .7rem 0; }
.receipt { font-size: .85rem; background: #f3eefb; padding: .75rem; border-radius: .5rem; }
@media (max-width: 650px) { .site-footer { grid-template-columns: 1fr; } }
header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem max(1rem, calc((100vw - 74rem) / 2));
  background: #fff; border-bottom: 1px solid #e7e3ef;
}
.brand { color: inherit; text-decoration: none; font-size: 1.45rem; font-weight: 800; }
.brand img { display: block; width: clamp(8rem, 25vw, 11rem); height: auto; border-radius: .4rem; }
.client-home { text-align: center; padding: clamp(1rem, 4vw, 3rem); }
.client-home h1 { max-width: 42rem; margin: 0 auto 1.5rem; }
.client-modes { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 2rem; }
.client-modes button { background: #eee8f8; color: #51318d; }
.client-modes button[aria-pressed="true"] { background: #6841b7; color: white; }
.mic-button { display: flex; align-items: center; justify-content: center; width: 160px; height: 160px; margin: 1rem auto 1.5rem; border-radius: 50%; background: white; color: #d92e43; border: 1px solid #eadfe5; box-shadow: 0 10px 45px #ab70bb26; }
.mic-button:hover, .mic-button[aria-pressed="true"] { background: #fff0f2; }
.client-home form { display: flex; flex-wrap: wrap; align-items: end; gap: .7rem; max-width: 42rem; margin: 1rem auto; text-align: left; }
.client-home form label { flex: 1 1 18rem; }
.assistant-reply { margin-top: 1.5rem; }
.hint, .client-home small { color: #675e76; font-size: .85rem; }
button:focus-visible, a:focus-visible { outline: 3px solid #b38be5; outline-offset: 4px; }
.eyebrow { color: #6044ad; }
#account { text-align: right; }
main { width: min(74rem, calc(100% - 2rem)); margin: 2rem auto; }
h1, h2, h3, p { margin: 0 0 .65rem; }
h1 { line-height: 1.1; font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
.eyebrow { font-size: .75rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.heading, .visit-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.panel { background: #fff; border: 1px solid #e7e3ef; border-radius: 1rem; padding: 1.25rem; margin: 1rem 0; }
.login { max-width: 28rem; margin: 10vh auto 0; padding: 2rem; }
.login form { display: grid; gap: .8rem; margin-top: 1.25rem; }
.fields { display: flex; align-items: end; flex-wrap: wrap; gap: .75rem; }
.fields label { flex: 1 1 9rem; }
label { display: grid; gap: .25rem; font-size: .85rem; font-weight: 650; }
[hidden] { display: none; }
input, select, textarea, button {
  font: inherit; border-radius: .55rem; padding: .55rem .7rem; min-width: 0;
}
input, select, textarea { width: 100%; border: 1px solid #d9d2e5; background: #fff; color: inherit; }
button { border: 1px solid transparent; background: #5635a8; color: #fff; cursor: pointer; font-weight: 650; }
button:disabled { opacity: .5; cursor: default; }
.quiet { background: #f1ebfc; color: #503092; }
.calendar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: .85rem; }
.calendar .panel { margin: 0; }
.visit { background: #f8f6fc; border-radius: .75rem; padding: .8rem; margin-top: .6rem; }
.visit-top { flex-wrap: wrap; margin-bottom: .4rem; }
.badge { border-radius: 2rem; background: #e9defc; padding: .18rem .55rem; font-size: .75rem; }
details, .inline { margin-top: .65rem; }
details form { margin-top: .5rem; }
summary { cursor: pointer; color: #503092; }
.inline, .stats, .users li { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; }
.inline select { width: auto; }
.stats span { background: #eee7fb; border-radius: .75rem; padding: .75rem; margin-bottom: .8rem; }
.users { padding: 0; list-style: none; }
.users li { justify-content: space-between; padding: .35rem 0; border-bottom: 1px solid #eeeaf4; }
#message:not(:empty) { background: #eee7fb; border-radius: .55rem; padding: .65rem; }
@media (max-width: 500px) {
  header { align-items: start; }
  .heading { align-items: end; }
  #account span { display: block; font-size: .8rem; }
}