/* ─── StadtMAX web fallback pages: shared tokens + layout ───
   Tokens mirror landing-page/DESIGN.md (Stadtmax CI v1.0). The page surface
   is Apricot Cream, cards are Crisp White, Scarlet Fire appears on exactly
   one CTA group per fold (the store badges). */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/assets/fonts/Plus_Jakarta_Sans/PlusJakartaSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/assets/fonts/Plus_Jakarta_Sans/PlusJakartaSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/assets/fonts/Plus_Jakarta_Sans/PlusJakartaSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/assets/fonts/Plus_Jakarta_Sans/PlusJakartaSans-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-display: swap;
}

:root {
  --scarlet: #FF1F01;
  --scarlet-deep: #D91A01;
  --raspberry: #D81E5B;
  --apricot: #FBD1A2;
  --apricot-soft: #FFE9CC;
  --apricot-deep: #F5BC85;
  --surface-card: #FFFFFF;
  --surface-row: #FAFAFA;
  --surface-mute: #F0F0F0;
  --surface-dark: #1A1A1A;
  --ink-secondary: #555555;
  --ink-muted: #888888;
  --edge: #E5E5E5;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.10);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  color: var(--surface-dark);
  background: var(--apricot);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img { max-width: 100%; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--scarlet);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

/* ─── Site header ─── */
.site-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px clamp(16px, 4vw, 48px);
  background: var(--surface-card);
  border-bottom: 1px solid var(--edge);
}
.site-header a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.site-header img { height: 34px; width: auto; display: block; }
.site-header .wordmark {
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.015em;
}

/* ─── Store badges: the primary CTA group ─── */
.store-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.store-badge { display: inline-block; transition: transform 0.15s ease; }
.store-badge:hover { transform: translateY(-2px); }
.store-badge img { display: block; height: 52px; width: auto; }
@media (prefers-reduced-motion: reduce) {
  .store-badge, .store-badge:hover { transition: none; transform: none; }
}

/* ─── "Get the app" hero (wallet / profile / offers fallback) ─── */
.app-hero {
  max-width: 560px;
  margin: 0 auto;
  padding: clamp(32px, 7vw, 72px) 20px 48px;
  text-align: center;
}
.app-hero .phone {
  width: min(240px, 55vw);
  margin: 0 auto 28px;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-2xl);
}
.app-hero h1 {
  font-size: clamp(1.875rem, 3.5vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
}
.app-hero p {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink-secondary);
  margin: 0 0 28px;
}
.app-hero .home-link {
  display: inline-block;
  margin-top: 24px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink-secondary);
}

/* ─── Footer ─── */
.site-footer {
  padding: 32px 20px 40px;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-secondary);
}
.site-footer a { color: var(--ink-secondary); }