:root {
  --tomato: #FE6B35; --tomato-deep: #C94F19; --espresso: #2B1810;
  --basil: #2F7D4F; --chilli: #C0392B; --cream: #FFFAF6; --card: #FFFFFF;
  --crust: #EFE3D9; --cocoa: #8B6857; --wash: #F6EFE9;
}
* { box-sizing: border-box; }
body {
  margin: 0 auto; max-width: 460px; min-height: 100vh; padding: 20px 16px 24px;
  display: flex; flex-direction: column; background: var(--cream); color: var(--espresso);
  font: 500 16px/1.5 Poppins, system-ui, sans-serif;
}
.lockup { display: flex; align-items: center; gap: 6px; margin: 4px 0 20px;
  font: 700 30px/1 Mohave, sans-serif; letter-spacing: .2px; }
.lockup .mark { width: 28px; height: 28px; display: inline-flex; }
.lockup .mark.c { margin-right: -6px; }
.lockup svg { width: 100%; height: 100%; }
.pill { margin-left: 6px; padding: 5px 9px; border-radius: 999px; background: var(--espresso);
  color: var(--cream); font: 600 11px/1 Poppins, sans-serif; letter-spacing: 1.1px; }
main { flex: 1; }
.card { background: var(--card); border: 1px solid var(--crust); border-radius: 26px; overflow: hidden; }
.strip { height: 128px; display: flex; align-items: center; justify-content: center; background: var(--wash); }
.strip.hero-diner { background: var(--tomato); }
.strip.hero-business { background: var(--espresso); }
.strip .art { width: 76px; height: 76px; }
.strip .art svg { width: 100%; height: 100%; }
.badge { width: 72px; height: 72px; border-radius: 999px; display: flex; align-items: center; justify-content: center; }
.badge svg { width: 30px; height: 30px; }
.b-neutral { background: var(--crust); color: var(--cocoa); }
.b-good { background: #E3F1E8; color: var(--basil); }
.in { padding: 24px 20px 28px; text-align: center; }
h1 { margin: 0 0 10px; font: 700 34px/1.05 Mohave, sans-serif; }
.in p { margin: 0; color: var(--cocoa); }
.button { display: block; margin-top: 16px; padding: 16px 20px; border-radius: 999px;
  background: var(--tomato); color: #fff; text-align: center; font-weight: 600; text-decoration: none; }
.button:active { background: var(--tomato-deep); }
footer { margin-top: 32px; display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 13px; color: var(--cocoa); }
.stores { display: flex; gap: 8px; }
.store { display: flex; flex-direction: column; padding: 6px 14px; border-radius: 10px;
  background: #000; color: #fff; text-decoration: none; line-height: 1.1; }
.store small { font-size: 10px; } .store b { font-size: 17px; }