/* Park Pulse — parkpulse.co
   "Aperture" — layered translucency over a soft color field, squircle radii,
   hairline light strokes. Deliberately echoes the iOS 26 Liquid Glass language
   the app itself uses, so arriving from the App Store feels continuous.

   Every color is a custom property below. Light + dark are both first-class;
   dark is not an inversion. Two accessibility escape hatches are honored:
   prefers-reduced-transparency (glass becomes solid) and prefers-reduced-motion. */

:root {
  /* Ground + ink */
  --bg: #eef0f5;
  --ink: #14161a;
  --ink-2: #4c525c;
  --ink-3: #767c86;

  /* Glass surfaces */
  --glass: rgba(255, 255, 255, 0.66);
  --glass-strong: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(255, 255, 255, 0.9);
  --glass-solid: #ffffff;
  --hairline: rgba(20, 22, 26, 0.08);

  /* Accent — warm gold, matching the app's Lightning Lane / Plus gold */
  --gold: #c08419;
  --gold-ink: #7a5c22;
  --gold-line: rgba(192, 132, 25, 0.55);

  /* Ambient color field behind the glass */
  --field-1: rgba(233, 138, 88, 0.55);
  --field-2: rgba(96, 142, 224, 0.50);
  --field-3: rgba(226, 177, 74, 0.42);

  --shadow: 0 1px 3px rgba(20, 22, 26, 0.05);
  --shadow-lift: 0 6px 24px rgba(20, 22, 26, 0.08);

  --radius-panel: 22px;
  --radius-nav: 18px;
  --radius-btn: 13px;
  --maxw: 880px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1013;
    --ink: #f0f1f4;
    --ink-2: #a8aeb8;
    --ink-3: #787f8a;

    --glass: rgba(28, 31, 37, 0.62);
    --glass-strong: rgba(32, 36, 43, 0.76);
    --glass-border: rgba(255, 255, 255, 0.09);
    --glass-solid: #16191e;
    --hairline: rgba(255, 255, 255, 0.09);

    --gold: #e0a93f;
    --gold-ink: #e0a93f;
    --gold-line: rgba(224, 169, 63, 0.5);

    --field-1: rgba(190, 96, 52, 0.42);
    --field-2: rgba(52, 92, 178, 0.40);
    --field-3: rgba(150, 110, 30, 0.34);

    --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-lift: 0 8px 28px rgba(0, 0, 0, 0.45);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

/* Ambient field — fixed so it sits behind content without scrolling. */
body::before {
  content: "";
  position: fixed;
  inset: -25vh -10vw auto -10vw;
  height: 90vh;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(46% 60% at 18% 20%, var(--field-1), transparent 62%),
    radial-gradient(40% 54% at 74% 12%, var(--field-2), transparent 64%),
    radial-gradient(44% 50% at 52% 46%, var(--field-3), transparent 60%);
  filter: blur(38px);
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--gold-ink); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }

/* ---- Glass primitive ---- */
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--shadow);
}

/* ---- Nav — a floating pill, not a full-bleed bar ---- */
.nav {
  position: sticky;
  top: 14px;
  z-index: 10;
  margin: 14px auto 0;
  max-width: var(--maxw);
  border-radius: var(--radius-nav);
}
.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 18px;
  max-width: none;
}
/* Wordmark is "Park Pulse" — the app. "Park Pulse+" is the subscription and
   only ever appears in copy that's actually about the subscription. */
.brand { font-weight: 640; font-size: 0.98rem; letter-spacing: -0.015em; color: var(--ink); }
.nav-links { display: flex; gap: 18px; }
.nav-links a { font-size: 0.82rem; font-weight: 500; color: var(--ink-2); }
.nav-links a:hover { color: var(--ink); }

/* ---- Hero ---- */
.hero { padding: 64px 16px 44px; }
.hero .wrap { padding: 0; }
.hero h1 {
  margin: 0 0 14px;
  font-size: clamp(2.1rem, 6vw, 3.3rem);
  font-weight: 680;
  letter-spacing: -0.035em;
  line-height: 1.04;
  max-width: 16ch;
  text-wrap: balance;
}
.tagline { margin: 0 0 10px; font-size: 1.05rem; color: var(--ink-2); max-width: 48ch; }
.subtle { margin: 0 0 28px; font-size: 0.88rem; color: var(--ink-3); }

.cta-row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-btn);
  padding: 12px 21px;
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { color: var(--bg); opacity: 0.88; }
.btn-ghost {
  background: var(--glass-strong);
  border-color: var(--glass-border);
  color: var(--ink);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.btn-ghost:hover { color: var(--ink); }

/* ---- Page head (support / legal) ---- */
.page-head { padding: 56px 16px 30px; }
.page-head .wrap { padding: 0; }
.page-head h1 {
  margin: 0 0 10px;
  font-size: clamp(1.9rem, 5vw, 2.7rem);
  font-weight: 680;
  letter-spacing: -0.03em;
  line-height: 1.06;
  text-wrap: balance;
}
.page-head .updated { margin: 0; color: var(--ink-3); font-size: 0.88rem; }

/* ---- Panels ---- */
main { padding-bottom: 24px; }
.panels { display: grid; gap: 12px; }
.panel {
  border-radius: var(--radius-panel);
  padding: 26px 28px;
}
.panel > :first-child { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }
.panel h2 {
  margin: 0 0 10px;
  font-size: 1.12rem;
  font-weight: 640;
  letter-spacing: -0.015em;
}
.panel h2 + p { margin-top: 0; }
.panel p { margin: 0 0 14px; color: var(--ink-2); font-size: 0.95rem; }
.panel p:last-child { margin-bottom: 0; }
.panel a { color: var(--ink); font-weight: 600; border-bottom: 1.5px solid var(--gold-line); }
.panel a:hover { color: var(--gold-ink); }
.panel ul { margin: 0 0 14px; padding-left: 20px; }
.panel ul:last-child { margin-bottom: 0; }
.panel li { margin: 7px 0; color: var(--ink-2); font-size: 0.95rem; }
.panel strong { color: var(--ink); font-weight: 620; }

.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 720px) { .split { grid-template-columns: 1fr; } }

/* Lead panel — the one thing to do on the page */
.lead .lbl {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 9px;
}
.lead h2 { font-size: 1.24rem; }

/* Long-form legal prose */
.prose h2 {
  margin: 30px 0 8px;
  font-size: 1.08rem;
  font-weight: 640;
  letter-spacing: -0.01em;
}
.prose > h2:first-of-type { margin-top: 0; }
.prose p { margin: 0 0 14px; }
.prose ul { margin: 0 0 16px; }

/* ---- Footer ---- */
footer {
  margin-top: 20px;
  padding: 26px 16px 44px;
  border-top: 1px solid var(--hairline);
}
footer .wrap {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
  padding: 0;
}
.disclaimer {
  margin: 0;
  max-width: 46ch;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--ink-3);
}
.foot-links { display: flex; gap: 16px; flex-wrap: wrap; }
.foot-links a { font-size: 0.78rem; color: var(--ink-2); }
.foot-links a:hover { color: var(--ink); }

.back { display: inline-block; margin-top: 26px; font-size: 0.88rem; font-weight: 600; color: var(--ink-2); }
.back:hover { color: var(--ink); }

/* ---- Accessibility escape hatches ----
   Mirrors how the app handles Reduce Transparency: glass becomes a solid
   surface rather than losing the layer entirely. */
@media (prefers-reduced-transparency: reduce) {
  body::before { display: none; }
  .glass,
  .btn-ghost {
    background: var(--glass-solid);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: var(--hairline);
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .btn-ghost { background: var(--glass-solid); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 600px) {
  .nav { top: 8px; margin-top: 8px; }
  .hero { padding-top: 44px; }
  .panel { padding: 22px 20px; }
}