/* PubCrawler site — colours lifted from the app's Theme.swift so the web
   matches the app: near-black purple bg, purple→pink gradient, cyan tube. */

:root {
  --bg: #0e0a12;
  --surface: #1a1420;
  --purple: #a855f7;
  --violet: #7c3aed;
  --pink: #ec4899;
  --lavender: #c084fc;
  --tube: #22d3ee;
  --text: #ffffff;
  --text-2: rgba(255, 255, 255, 0.72);
  --muted: rgba(192, 132, 252, 0.55);
  --border: rgba(255, 255, 255, 0.08);
  --brand: "Syne", system-ui, sans-serif;        /* app wordmark font */
  --display: "Unbounded", system-ui, sans-serif; /* app heading font */
  --body: system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--lavender); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--text); }
a:focus-visible {
  outline: 2px solid var(--tube);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: 42rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---------- header / footer shared ---------- */

.site-header { padding: 1.5rem 0; }
.site-header .wrap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.wordmark {
  font-family: var(--brand);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
}
.wordmark .dot { color: var(--pink); }

.site-footer {
  margin-top: auto;
  padding: 2.5rem 0 3rem;
  border-top: 1px solid var(--border);
  font-size: 0.9375rem;
  color: var(--text-2);
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
}

/* ---------- homepage ---------- */

.hero {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 3rem 0 4rem;
}

.hero h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.875rem, 6vw, 3rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
}

/* Solid colour by default; only go transparent-with-gradient where
   background-clip:text is supported, so the name is never invisible
   to simple renderers (e.g. Google's verification crawler). */
.hero h1.glow { color: var(--purple); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .hero h1.glow {
    background: linear-gradient(100deg, var(--violet), var(--pink));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.hero .sub {
  margin-top: 0.75rem;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.1875rem;
  color: var(--text);
}

.hero .tagline {
  margin-top: 1.25rem;
  font-size: 1.1875rem;
  color: var(--text-2);
  max-width: 32rem;
}

.hero section {
  margin-top: 2.25rem;
  max-width: 32rem;
}
.hero section h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.125rem;
  margin-bottom: 0.75rem;
}
.hero section p { color: var(--text-2); }
.hero section + p { margin-top: 2.5rem; }

.features {
  list-style: none;
  max-width: 32rem;
}
.features li {
  color: var(--text-2);
  padding-left: 1.25rem;
  position: relative;
}
.features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(120deg, var(--violet), var(--pink));
}
.features li + li { margin-top: 0.625rem; }
.features strong { color: var(--text); font-weight: 600; }


.route {
  display: block;
  margin: 2.75rem 0 2.5rem;
  width: 100%;
  max-width: 34rem;
  height: auto;
}

/* the trail draws itself on load; the stops pop in as it passes them */
@media (prefers-reduced-motion: no-preference) {
  .route .trail {
    stroke-dasharray: 700;
    stroke-dashoffset: 700;
    animation: draw 2.2s ease-out forwards;
  }
  .route .stop {
    opacity: 0;
    animation: appear 0.45s ease-out forwards;
  }
  .route .s1 { animation-delay: 0.2s; }
  .route .s2 { animation-delay: 0.7s; }
  .route .s3 { animation-delay: 1.2s; }
  .route .s4 { animation-delay: 1.7s; }
  .route .s5 { animation-delay: 2.1s; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes appear { to { opacity: 1; } }
}

.badge {
  display: inline-block;
  padding: 0.625rem 1.125rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-2);
  font-size: 0.9375rem;
}
.badge strong { color: var(--text); font-weight: 600; }

/* ---------- privacy page ---------- */

.doc { padding: 1.5rem 0 4rem; }

.doc h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.625rem, 5vw, 2.125rem);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.doc .meta {
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

.doc h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.125rem;
  letter-spacing: -0.005em;
  margin: 2.5rem 0 0.75rem;
}

.doc p, .doc li { color: var(--text-2); }
.doc p + p { margin-top: 0.75rem; }
.doc ul { margin: 0.75rem 0 0 1.25rem; }
.doc li + li { margin-top: 0.5rem; }
.doc strong { color: var(--text); font-weight: 600; }