/* Public booking flow. Mobile first; system fonts only, no third-party requests. */
:root { --accent:#111; --accent-ink:#fff; --tint:#f5f5f5; --brand:#111; --brand-ink:#fff; --ink:#111; --mute:#6b6b6b; --line:#e4e4e4; --ok:#0a7d43; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--tint); color:var(--ink);
  font:16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
/* each business's own typeface, served from this site (no third-party font requests) */
@font-face { font-family:"Lato"; font-weight:400; font-display:swap; src:url(/static/brand/fonts/lato-400.woff2) format("woff2"); }
@font-face { font-family:"Lato"; font-weight:700; font-display:swap; src:url(/static/brand/fonts/lato-700.woff2) format("woff2"); }
@font-face { font-family:"Poppins"; font-weight:400; font-display:swap; src:url(/static/brand/fonts/poppins-400.woff2) format("woff2"); }
@font-face { font-family:"Poppins"; font-weight:600; font-display:swap; src:url(/static/brand/fonts/poppins-600.woff2) format("woff2"); }
@font-face { font-family:"Poppins"; font-weight:700; font-display:swap; src:url(/static/brand/fonts/poppins-700.woff2) format("woff2"); }
body.font-lato, body.font-lato button, body.font-lato input, body.font-lato textarea { font-family:"Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
body.font-poppins, body.font-poppins button, body.font-poppins input, body.font-poppins textarea { font-family:"Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
body.font-poppins { font-size:15px; }
body.font-lato h1, body.font-lato .svc-name { font-weight:700; }
#app { max-width:560px; margin:0 auto; padding:0 16px 120px; }
h1 { font-size:24px; line-height:1.2; margin:0 0 8px; letter-spacing:-.01em; }
h2 { font-size:15px; margin:22px 0 10px; color:var(--mute); font-weight:600; }
p { margin:0 0 12px; }
.preview { margin:12px 0 0; padding:10px 12px; background:#fff4d6; border:1px solid #ecd28a; border-radius:10px; font-size:14px; }
.top { display:flex; align-items:center; gap:10px; padding:18px 0 12px; }
.back { width:40px; height:40px; border:1px solid var(--line); background:#fff; border-radius:50%; display:grid; place-items:center; color:var(--ink); cursor:pointer; flex:none; }
.biz { margin:0; font-weight:700; font-size:19px; letter-spacing:-.01em; }
.biz::after { content:""; display:block; width:28px; height:4px; background:var(--accent); border-radius:2px; margin-top:5px; }
.tag { margin:5px 0 0; color:var(--mute); font-size:14px; }
.crumbs { list-style:none; display:flex; gap:6px; margin:0 0 16px; padding:0; font-size:13px; color:#9a9a9a; }
.crumbs li + li::before { content:"›"; margin-right:6px; color:#c4c4c4; }
.crumbs li.on { color:var(--ink); font-weight:600; }
.crumbs li.done { color:var(--mute); }
.loading, .empty { color:var(--mute); padding:24px 0; }
.card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px; margin-top:8px; }
.lead { color:#333; }
.small { font-size:13px; color:var(--mute); margin-top:12px; }

/* services */
.svc { display:flex; gap:12px; align-items:flex-start; width:100%; text-align:left; background:#fff; border:1px solid var(--line);
  border-radius:14px; padding:16px; margin:0 0 10px; cursor:pointer; font:inherit; color:inherit; }
.svc:hover { border-color:#bdbdbd; }
.svc.on { border-color:var(--brand); box-shadow:inset 0 0 0 2px var(--brand); }
.svc-main { flex:1; min-width:0; }
.svc-name { font-weight:600; margin:0 0 2px; }
.svc-meta { color:var(--mute); font-size:14px; margin:0 0 6px; }
.svc-desc { color:#4a4a4a; font-size:14px; margin:0 0 8px; }
.svc-price { font-weight:600; margin:0; }
.tick { flex:none; width:26px; height:26px; border-radius:50%; border:1.5px solid #c9c9c9; display:grid; place-items:center; margin-top:2px; }
.svc.on .tick { background:var(--brand); border-color:var(--brand); }
.svc.on .tick::after { content:""; width:10px; height:5px; border-left:2px solid var(--brand-ink); border-bottom:2px solid var(--brand-ink); transform:rotate(-45deg) translate(1px,-1px); }

/* date strip */
.cal-head { display:flex; align-items:center; gap:8px; margin:0 0 10px; }
.month { font-weight:600; margin:0; flex:1; }
.cal-nav { width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:#fff; font-size:24px; line-height:1; color:var(--ink); cursor:pointer; padding:0 0 3px; }
.cal-nav:disabled { color:#c9c9c9; cursor:default; background:transparent; }
.cal { display:grid; grid-template-columns:repeat(7, 1fr); gap:6px 4px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px 8px 10px; }
.cal-dow { text-align:center; font-size:12px; font-weight:600; color:var(--mute); padding-bottom:4px; }
.day { position:relative; padding:0; border:0; background:none; cursor:pointer; text-align:center; font:inherit; color:inherit; display:grid; place-items:center; min-height:48px; }
.day .num { width:42px; height:42px; max-width:100%; border-radius:50%; border:1px solid var(--line); background:#fff; display:grid; place-items:center; font-size:16px; font-weight:600; }
.day .mon { position:absolute; top:-3px; left:50%; transform:translateX(-50%); font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--mute); background:#fff; padding:0 3px; line-height:1; }
.day.on .num { background:var(--brand); border-color:var(--brand); color:var(--brand-ink); }
.day:disabled { cursor:default; }
.day:disabled .num { background:transparent; color:#b9b9b9; border-color:transparent; text-decoration:line-through; font-weight:500; }
.day.out .num { text-decoration:none; color:#d3d3d3; }
.picked { font-weight:600; margin:18px 0 0; }
.picked + #slots h2:first-child { margin-top:10px; }
.times { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.time { padding:13px 0; border:1px solid var(--line); background:#fff; border-radius:10px; font:inherit; font-weight:600; cursor:pointer; color:inherit; }
.time.on { background:var(--brand); border-color:var(--brand); color:var(--brand-ink); }

/* details */
label { display:block; font-weight:600; font-size:14px; margin:14px 0 6px; }
label .opt { font-weight:400; color:var(--mute); }
input, textarea { width:100%; padding:13px 12px; border:1px solid #cfcfcf; border-radius:10px; font:inherit; background:#fff; color:inherit; }
input:focus, textarea:focus, button:focus-visible, a:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
textarea { min-height:84px; resize:vertical; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.error { background:#fdecec; border:1px solid #f2b8b8; color:#8a1c1c; padding:10px 12px; border-radius:10px; margin:14px 0 0; font-size:15px; }
.summary { margin:14px 0 0; padding:0; }
.summary div { display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-top:1px solid var(--line); }
.summary dt { color:var(--mute); flex:none; }
.summary dd { margin:0; text-align:right; font-weight:600; }
.done-mark { width:56px; height:56px; border-radius:50%; background:var(--ok); display:grid; place-items:center; margin:0 0 14px; }
.done-mark::after { content:""; width:20px; height:10px; border-left:3px solid #fff; border-bottom:3px solid #fff; transform:rotate(-45deg) translate(2px,-2px); }

/* buttons + sticky bar */
.primary { background:var(--brand); color:var(--brand-ink); border:0; border-radius:10px; padding:14px 22px; font:inherit; font-weight:600; cursor:pointer; }
.primary:disabled { background:#d5d5d5; color:#777; cursor:default; }
.primary.wide { display:block; width:100%; margin-top:18px; text-align:center; }
.primary.link { text-decoration:none; }
.primary.danger { background:#b3261e; color:#fff; }
.bar { position:fixed; left:0; right:0; bottom:0; background:#fff; border-top:1px solid var(--line); padding:12px 16px calc(12px + env(safe-area-inset-bottom)); }
.bar-in { max-width:528px; margin:0 auto; display:flex; align-items:center; gap:12px; }
.bar-text { flex:1; min-width:0; }
.bar-text p { margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#bar-title { font-weight:600; }
#bar-sub { color:var(--mute); font-size:14px; }
.noscript { text-align:center; padding:24px; }
[hidden] { display:none !important; }
@media (min-width:600px) { #app { padding-top:16px; } .times { grid-template-columns:repeat(4, 1fr); } }
@media (prefers-reduced-motion:no-preference) { .strip { scroll-behavior:smooth; } }

/* landing page (front page of a host whose booking page lives at /book/) */
.landing { min-height:70vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:48px 0; }
.landing .biz { font-size:34px; }
.landing .biz::after { margin:10px auto 0; width:44px; }
.landing .tag { font-size:17px; margin:10px 0 34px; }
.book-now { display:inline-flex; align-items:center; gap:.6rem; background:var(--brand); color:var(--brand-ink); text-decoration:none;
  font-weight:700; font-size:19px; padding:17px 34px; border-radius:999px; box-shadow:0 6px 20px rgba(0,0,0,.18); }
.book-now svg { width:1.25rem; height:1.25rem; }
.book-now:hover { transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.24); }

/* manage page, privacy page, waiting list, suggested times */
.secondary { background:#fff; color:var(--ink); border:1px solid #cfcfcf; border-radius:10px; padding:13px 22px; font:inherit; font-weight:600; cursor:pointer; }
.secondary.wide { display:block; width:100%; margin-top:10px; text-align:center; }
.secondary.link { text-decoration:none; }
.secondary.danger { color:#b3261e; border-color:#e7b9b6; }
.cancel-form { margin:0; }
.prose h2 { color:var(--ink); font-size:16px; margin:20px 0 6px; }
.prose p { color:#333; }
.tagline { display:inline-block; font-size:12px; font-weight:600; background:#eee; color:#444; border-radius:6px; padding:2px 7px; margin:0 0 8px; }
.textlink { background:none; border:0; padding:0; font:inherit; color:var(--ink); text-decoration:underline; cursor:pointer; }
.wait { margin:18px 0 0; font-size:15px; color:#444; }
.remember { display:flex; align-items:center; gap:10px; margin:14px 0 0; font-weight:500; font-size:15px; }
.remember input { width:22px; height:22px; flex:none; padding:0; }
.notice { background:#fff; border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:10px; padding:10px 12px; margin:14px 0 0; font-size:15px; }

/* branding: the business's own logo in the page header, and the sign-in link */
.top { position:relative; }
.brand.has-logo { flex:1; min-width:0; }
.logo-link { display:inline-block; line-height:0; }
.logo { display:block; height:54px; width:auto; max-width:100%; }
.logo-headfirst { height:62px; mix-blend-mode:multiply; }      /* its JPEG has a white background */
.logo-annabalcombe { height:50px; }
.logo.big { height:auto; width:min(86vw, 420px); margin:0 auto 26px; }
.acct { flex:none; margin-left:auto; font-size:14px; font-weight:600; color:var(--ink); text-decoration:none; border:1px solid #cfcfcf; background:#fff; border-radius:999px; padding:8px 14px; white-space:nowrap; }
.acct-prompt { margin:16px 0 0; font-size:15px; color:#444; }
.acct-prompt a, .small a, .lead a { color:var(--ink); }
.inline-login { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.inline-login h2 { color:var(--ink); font-size:16px; margin:0 0 4px; }
.bk { display:block; background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin:0 0 10px; }
.bk b { display:block; }
.bk small { display:block; color:var(--mute); font-size:14px; margin-top:2px; }
.bk .row { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.bk .row a, .bk .row button { flex:1; min-width:120px; text-align:center; font-size:14px; padding:10px 8px; margin:0; }
.pill-tag { display:inline-block; font-size:12px; font-weight:600; background:#eee; color:#444; border-radius:6px; padding:1px 7px; margin-left:6px; vertical-align:1px; }
@media (max-width:380px) { .logo-headfirst { height:50px; } .logo-annabalcombe { height:42px; } .acct { padding:7px 10px; font-size:13px; } }

/* the sign-in strip across the top of every booking page */
.acctbar { display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:12px 0 0; font-size:14px; }
.acctbar .acct-text { margin-right:auto; color:var(--mute); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.acct-btn { flex:none; font-weight:600; color:var(--ink); text-decoration:none; border:1px solid #cfcfcf; background:#fff; border-radius:999px; padding:9px 14px; white-space:nowrap; }
.acct-btn.cta { background:var(--brand); color:var(--brand-ink); border-color:var(--brand); }
.top { padding-top:14px; }
@media (max-width:360px) { .acctbar .acct-text { display:none; } .acctbar { justify-content:space-between; } }

/* premium build */
.info { margin:16px 0 0; padding:14px 16px; background:var(--tint); border-radius:12px; }
.card .info { background:color-mix(in srgb, var(--accent) 9%, #fff); }
.info .map { display:block; margin:10px 0 0; border-radius:10px; overflow:hidden; border:1px solid var(--line); }
.info .map img { display:block; width:100%; height:auto; aspect-ratio:2/1; object-fit:cover; background:#eee; }
.info h2 { color:var(--ink); font-size:16px; margin:0 0 6px; }
.info p { margin:0 0 8px; font-size:15px; color:#333; }
.info p:last-child { margin-bottom:0; }
.svc-photo { flex:none; width:64px; height:64px; border-radius:10px; object-fit:cover; background:#eee; }
.hero-card { background:#fff; border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:12px; padding:14px 16px; margin:14px 0 0; }
.hero-card b { display:block; font-size:16px; }
.hero-card small { display:block; color:var(--mute); font-size:14px; margin:2px 0 10px; }
.hero-card .primary, .hero-card .secondary { display:block; text-align:center; text-decoration:none; }
.loyal { display:flex; gap:8px; margin:14px 0 0; }
.loyal div { flex:1; background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 12px; }
.loyal b { display:block; font-size:20px; }
.loyal small { color:var(--mute); font-size:13px; }
.reflink { display:flex; gap:8px; margin-top:8px; }
.reflink input { flex:1; min-width:0; font-size:13px; padding:10px; }
.reflink button { flex:none; padding:10px 14px; margin:0; }
input[type=file] { padding:10px; background:#fff; }
input[type=checkbox] { width:22px; height:22px; flex:none; padding:0; }
.pay-tag { display:inline-block; font-size:12px; font-weight:600; background:color-mix(in srgb, var(--accent) 22%, #fff); color:#333; border-radius:6px; padding:2px 7px; margin-left:6px; vertical-align:1px; }

h1:focus { outline:none; }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }
.have-login { margin-top:12px; }
.have-login h2 { margin-top:0; }
.have-login p { margin:6px 0 0; }
.prose ul { margin:6px 0 0; padding-left:20px; color:#333; }
.prose li { margin:4px 0; }
.prose a { color:var(--ink); }
.legal { max-width:560px; margin:18px auto 0; padding:0 16px 24px; font-size:13px; color:var(--mute); text-align:center; }
.legal a { color:inherit; }
.remember.agree { align-items:flex-start; font-weight:400; line-height:1.4; }
.remember.agree input { margin-top:1px; }
.remember.agree a { color:var(--ink); }
.legal p { margin:4px 0; }
.st-photo { width:56px; height:56px; border-radius:50%; object-fit:cover; flex:none; margin-right:12px; align-self:flex-start; }
.svc:disabled { opacity:.45; cursor:default; }

/* booking form: create a login, and the agreement ticks */
.create-login .rec { display:inline-block; margin-left:6px; padding:2px 8px; border-radius:99px; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; background:var(--brand); color:var(--brand-ink); vertical-align:2px; }
.create-login .perks { margin:6px 0 10px; padding-left:20px; }
.create-login .perks li { margin:2px 0; }
.consent { margin:16px 0 4px; padding:12px 14px; border:1px solid rgba(0,0,0,.12); border-radius:12px; background:rgba(255,255,255,.6); }
.consent .agree { display:flex; gap:10px; align-items:flex-start; margin:6px 0; font-weight:400; line-height:1.4; }
.consent .agree input { flex:none; width:20px; height:20px; margin:1px 0 0; }
.consent .agree .opt { display:block; font-size:13px; }

/* "Your messages" page */
.choices { border:0; padding:0; margin:14px 0 6px; }
.choices legend { font-weight:600; margin-bottom:4px; }
.choices .agree { display:flex; gap:10px; align-items:center; margin:8px 0; font-weight:400; }
.choices .agree input { flex:none; width:20px; height:20px; margin:0; }
.consent .agree .opt { display:inline; font-size:inherit; }

/* quick groups at the top of the service list */
.cats { display:flex; gap:8px; overflow-x:auto; padding:2px 2px 10px; margin:0 -2px 6px; scrollbar-width:none; position:sticky; top:0; z-index:5; background:var(--tint); }
.cats::-webkit-scrollbar { display:none; }
.cat-chip { flex:none; padding:9px 16px; border-radius:99px; border:1px solid rgba(0,0,0,.14); background:#fff; color:inherit; font:inherit; font-size:15px; font-weight:600; cursor:pointer; white-space:nowrap; }
.cat-chip.on { background:var(--brand); color:var(--brand-ink); border-color:var(--brand); }
.cat-head { margin:20px 0 8px; font-size:13px; letter-spacing:.08em; text-transform:uppercase; }

/* the pretend payment page (test mode) */
.testband { margin:12px 0 0; padding:10px 12px; border-radius:10px; background:#fff4d6; border:1px solid #ecd28a; font-size:14px; }
.paycard { text-align:center; }
.paycard .paywho { margin:0; font-size:14px; letter-spacing:.06em; text-transform:uppercase; opacity:.7; }
.paycard .payamount { margin:6px 0 2px; font-size:42px; font-weight:700; letter-spacing:-.02em; }
.paycard .paywhat { margin:0 0 18px; opacity:.8; }
.fakecard { position:relative; margin:0 auto 18px; max-width:300px; aspect-ratio:1.586; border-radius:14px; padding:18px; text-align:left;
  background:linear-gradient(135deg, #3a3a3a, #111); color:#fff; display:flex; flex-direction:column; justify-content:flex-end; box-shadow:0 10px 24px rgba(0,0,0,.18); }
.fakecard .chip { position:absolute; top:18px; left:18px; width:38px; height:28px; border-radius:6px; background:linear-gradient(135deg,#e8c87a,#b8913e); }
.fakecard .num { font-size:19px; letter-spacing:.08em; font-variant-numeric:tabular-nums; }
.fakecard .exp { font-size:12px; opacity:.75; margin-top:6px; letter-spacing:.06em; }
.paycard form { display:flex; flex-direction:column; gap:10px; }

.cal{grid-template-columns:repeat(7,minmax(0,1fr))}.cal>*{min-width:0}.day{padding-left:0;padding-right:0;min-width:0}.times{grid-template-columns:repeat(3,minmax(0,1fr))}@media(min-width:600px){.times{grid-template-columns:repeat(4,minmax(0,1fr))}}