/* PayBilz website — one shared stylesheet. System fonts only and no scripts, so these pages make
   no requests to anyone else (a privacy page that loads Google Fonts would hand every visitor's
   address to Google). Colors match the app: teal accent, near-black ground in dark mode. */

:root {
  color-scheme: light dark;
  --bg: #f4f4f9;
  --surface: #ffffff;
  --text: #0a0a10;
  --muted: #5c5c78;
  --border: rgba(10, 10, 16, 0.12);
  --accent: #0d9488;
  --accent-ink: #0a0a10;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0a10;
    --surface: #13131c;
    --text: #f1f1f8;
    --muted: #9a9ab8;
    --border: rgba(255, 255, 255, 0.12);
    --accent: #5eead4;
    --accent-ink: #0a0a10;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

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

.wrap { max-width: 680px; margin: 0 auto; padding: 0 22px; }

header.site { padding: 26px 0 8px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  text-decoration: none;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.brand img { width: 40px; height: 40px; border-radius: 22.37%; border: 1px solid var(--border); }

main { padding: 28px 0 56px; }

h1 {
  margin: 0 0 8px;
  font-size: clamp(32px, 7vw, 44px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.03em;
}

h2 { margin: 40px 0 8px; font-size: 22px; line-height: 1.25; font-weight: 750; letter-spacing: -0.01em; }

p, ul { margin: 0 0 16px; }
ul { padding-left: 22px; }
li { margin-bottom: 8px; }

.lead { font-size: 20px; color: var(--muted); margin-bottom: 24px; }
.updated { color: var(--muted); font-size: 15px; margin-bottom: 28px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 22px;
  margin: 0 0 16px;
}

.card > :last-child { margin-bottom: 0; }
.card h3 { margin: 0 0 6px; font-size: 18px; line-height: 1.3; }

.hero { text-align: left; padding-top: 12px; }
.hero .app-icon {
  width: 112px;
  height: 112px;
  border-radius: 22.37%;
  border: 1px solid var(--border);
  box-shadow: 0 10px 40px rgba(13, 148, 136, 0.28);
  margin-bottom: 28px;
  display: block;
}

.pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 15px;
}

.button {
  display: inline-block;
  padding: 13px 22px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  text-decoration: none;
}

footer.site {
  border-top: 1px solid var(--border);
  padding: 22px 0 40px;
  color: var(--muted);
  font-size: 15px;
}

footer.site a { color: var(--muted); }
footer.site .links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 8px; }