/* Colors and fonts from the app (mobile-app-lff lib/core/theme). */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/fonts/BricolageGrotesque-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('/fonts/Figtree-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('/fonts/Figtree-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ink: #14201a;
  --yellow: #ffc53d;
  --cream: #fff3d1;
  --body: #3e4943;
  --green: #0e7a4f;
  --green-dark: #0a5c3b;
  --white: #ffffff;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--cream);
  color: var(--body);
  font: 600 18px/1.45 'Figtree', system-ui, sans-serif;
}

.page {
  max-width: 560px;
  margin: 0 auto;
  padding: 48px 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
}

.badge {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--yellow);
  font: 800 15px 'Bricolage Grotesque', system-ui, sans-serif;
  letter-spacing: 0.02em;
}

.brand-name {
  color: var(--ink);
  font: 800 22px 'Bricolage Grotesque', system-ui, sans-serif;
}

h1 {
  margin: 0 0 16px;
  color: var(--ink);
  font: 800 clamp(30px, 7vw, 42px)/1.1 'Bricolage Grotesque', system-ui, sans-serif;
}

a { color: var(--green-dark); }

.button {
  display: inline-block;
  margin-top: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--green);
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
}

.qr {
  width: 220px;
  margin: 24px 0;
  padding: 12px;
  border-radius: 16px;
  background: var(--white);
}

.qr svg { display: block; width: 100%; height: auto; }

.stores { font-size: 16px; }