/* ── WAU on the web: shared by every page ──────────────────────────────
   The app's own design language (styles/theme.js): navy chrome that floats
   over the map at 0.85, sheets at 0.96, heavy rounding, the platform's own
   type (SF Pro on Apple, Roboto on Android), cyan for what you can press,
   round coloured badges like the map's place pins. Each page adds only its
   own layout on top of this. See DESIGN.md. */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg:       #0b1017;
  --chrome:   rgba(30, 40, 60, 0.85);
  --sheet:    rgba(24, 30, 44, 0.96);
  --card:     rgba(30, 40, 60, 0.5);
  --surface:  rgba(255, 255, 255, 0.06);
  --control:  rgba(255, 255, 255, 0.08);
  --raised:   rgba(255, 255, 255, 0.12);
  --line:     rgba(255, 255, 255, 0.08);
  --line-2:   rgba(255, 255, 255, 0.14);

  --t1: rgba(255, 255, 255, 0.95);
  --t2: rgba(255, 255, 255, 0.72);
  --t3: rgba(255, 255, 255, 0.56);

  --cyan:   #22D3EE;
  --ink-on: #0B1017;
  --green:  #34C759;
  --red:    #EF4444;
  --red-text: #FF5C5C;
  --gold:   #FCD34D;
  --purple: #7E5BEF;
  --pink:   #FF6B9D;
  --blue:   #60A5FA;

  --text: -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, Menlo, "SF Mono", Consolas, monospace;

  --lift: 0 12px 32px -10px rgba(0, 0, 0, 0.6), 0 2px 8px -2px rgba(0, 0, 0, 0.4);
  --out: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --shell: min(1160px, 100% - 48px);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  font-family: var(--text); background: var(--bg); color: var(--t1);
  line-height: 1.55; overflow-x: hidden;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--cyan); color: var(--ink-on); }
/* height:auto is load-bearing: images carry intrinsic pixel sizes so the box is
   reserved before load, and without it each screenshot renders twice as tall. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.w { width: var(--shell); margin-inline: auto; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.022em; line-height: 1.1; text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
/* The map's place pins, used as icon badges: a coloured disc, a white glyph. */
.badge {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; color: #fff; background: var(--c, var(--blue));
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 6px 14px -4px rgba(0, 0, 0, 0.5);
}
.badge .ic { width: 21px; height: 21px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 26px; }

/* ── Nav: a chrome bar floating over the page, like the app's top controls ── */
.nav { position: fixed; top: 12px; left: 0; right: 0; z-index: 50; pointer-events: none; }
.nav .w {
  pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 7px 7px 10px; border-radius: 20px;
  background: var(--chrome); border: 1px solid var(--line); box-shadow: var(--lift);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.brand span { font-family: var(--display); font-weight: 800; font-size: 1.125rem; letter-spacing: .02em; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a {
  font-size: .875rem; font-weight: 500; color: var(--t2); text-decoration: none;
  padding: 8px 12px; border-radius: 12px; transition: background .2s, color .2s; white-space: nowrap;
}
.nav-links a:hover { background: var(--control); color: var(--t1); }
.nav-links a[aria-current="page"] { color: var(--t1); background: var(--surface); }
.heart { color: var(--pink); font-style: normal; }
.nav-links a.cta { background: var(--cyan); color: var(--ink-on); font-weight: 650; margin-left: 6px; }
.nav-links a.cta:hover { background: #4fdcf1; }

/* ── Buttons ── */
.stores { display: flex; gap: 10px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 54px;
  padding: 0 20px 0 16px; border-radius: 16px; text-decoration: none; cursor: pointer;
  font: inherit; border: 0;
  transition: transform .2s var(--out), background .2s, box-shadow .2s;
}
.btn svg { width: 22px; height: 22px; flex-shrink: 0; }
.btn .lbl { display: flex; flex-direction: column; line-height: 1.12; text-align: left; }
.btn .lbl small { font-size: .6875rem; font-weight: 500; opacity: .78; }
.btn .lbl b { font-size: 1.0625rem; font-weight: 650; }
.btn-lit { background: var(--cyan); color: var(--ink-on); box-shadow: 0 8px 22px -8px rgba(34, 211, 238, .55); }
.btn-lit:hover { transform: translateY(-1px); background: #4fdcf1; }
.btn-dark { background: var(--raised); color: var(--t1); border: 1px solid var(--line-2); }
.btn-dark:hover { transform: translateY(-1px); background: rgba(255, 255, 255, .17); }
.btn-pink { background: rgba(255, 107, 157, .14); color: var(--pink); border: 1px solid rgba(255, 107, 157, .4); font-weight: 650; }
.btn-pink:hover { background: rgba(255, 107, 157, .22); }
.btn:active { transform: scale(.98); }

/* ── Footer ── */
.foot { padding: 28px 0 40px; }
.foot .w { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; font-size: .875rem; color: var(--t3); }
.foot nav { display: flex; gap: 20px; }
.foot a { text-decoration: none; color: var(--t3); }
.foot a:hover { color: var(--t1); }

@media (max-width: 980px) {
  .nav-links a.hide-m { display: none; }
}
@media (max-width: 680px) {
  :root { --shell: min(1160px, 100% - 32px); }
  .nav { top: 8px; }
  .nav .w { padding: 6px 6px 6px 8px; border-radius: 18px; }
  .nav-links a { padding: 8px 9px; }
  .nav-links a.hide-s { display: none; }
  .foot .w { flex-direction: column; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}