/* Concept demo sites: what a client's mobile site looks like. Not real businesses. */
:root{--ink:#1d1d1f;--gray:#6e6e73;--hair:#e5e5ea;--panel:#f5f5f7;--accent:#0071e3;--font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter Tight","Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);color:var(--ink);background:#fff;font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;padding-bottom:84px}
a{color:inherit;text-decoration:none}
.wrap{max-width:560px;margin:0 auto;padding:0 20px}
.ribbon{background:var(--ink);color:#fff;font-size:12px;text-align:center;padding:8px 12px}
.ribbon a{text-decoration:underline;opacity:.8}
.hero{position:relative;height:340px;background:#ddd center/cover no-repeat;display:flex;align-items:flex-end}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(0,0,0,.72))}
.hero .wrap{position:relative;z-index:1;color:#fff;padding-bottom:22px;width:100%}
.kind{font-size:13px;opacity:.85}
h1{font-size:32px;line-height:1.1;letter-spacing:-.03em;margin:4px 0 8px}
.open{display:inline-flex;align-items:center;gap:7px;font-size:13px;background:rgba(255,255,255,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:999px;padding:5px 11px}
.open i{width:7px;height:7px;border-radius:50%;background:#30d158}
.actions{display:grid;grid-template-columns:2fr 1fr;gap:10px;margin:18px 0 6px}
.btn{height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:16px}
.btn.wa{background:var(--accent);color:#fff}
.btn.call{background:var(--panel)}
.btn svg{width:18px;height:18px}
h2{font-size:21px;letter-spacing:-.02em;margin:30px 0 12px}
.note{font-size:12px;color:var(--gray);margin-top:-6px;margin-bottom:10px}
.list{border-top:1px solid var(--hair)}
.list div{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--hair)}
.list small{display:block;color:var(--gray);font-size:13px}
.list b{white-space:nowrap;font-weight:600}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.gallery img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;display:block}
.reviews{background:var(--panel);border-radius:16px;padding:18px;color:var(--gray);font-size:14px}
.reviews .sk{height:10px;border-radius:6px;background:#e3e3e8;margin-top:10px}
.reviews .sk.s{width:60%}
.map{height:150px;border-radius:16px;background:linear-gradient(135deg,#eef3f8 25%,#e4ebf2 25% 50%,#eef3f8 50% 75%,#e4ebf2 75%) 0 0/40px 40px;display:grid;place-items:center;position:relative}
.map span{background:#fff;border-radius:999px;padding:8px 14px;font-size:14px;box-shadow:0 6px 20px -8px rgba(0,0,0,.3)}
.hours{font-size:15px}
.hours div{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--hair)}
footer{margin-top:34px;padding:22px 0;font-size:12px;color:var(--gray);text-align:center}
.bar{position:fixed;left:12px;right:12px;bottom:12px;z-index:5;max-width:536px;margin:0 auto}
.bar .btn{box-shadow:0 10px 30px -8px rgba(0,0,0,.35)}
.toast{position:fixed;left:16px;right:16px;bottom:78px;z-index:6;max-width:528px;margin:0 auto;background:var(--ink);color:#fff;font-size:14px;line-height:1.4;padding:14px 16px;border-radius:14px;opacity:0;transform:translateY(10px);transition:opacity .25s,transform .25s;pointer-events:none}
.toast.on{opacity:1;transform:none}