/* Pointer Paws site styles. Colors and sizes come from tokens.css (a copy of ../brand/tokens.css).
   No web fonts are loaded, so the site makes no third-party requests. */
* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--pp-bg);
  color: var(--pp-ink);
  font: var(--pp-weight-body) 16px/var(--pp-leading-body) var(--pp-font-body);
}

.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px; }

header.site {
  padding: var(--pp-space-4) 0;
  border-bottom: 1px solid var(--pp-line);
}
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--pp-space-3); }
.brand { display: flex; align-items: center; gap: var(--pp-space-2); color: var(--pp-ink); text-decoration: none; font-weight: 800; font-size: var(--pp-text-lg); }
.brand img { width: 32px; height: 32px; border-radius: var(--pp-radius-sm); }
nav a { color: var(--pp-accent-strong); margin-left: var(--pp-space-3); font-size: var(--pp-text-md); }

h1, h2 { font-family: var(--pp-font-display); letter-spacing: -0.5px; }
h1 { font-weight: var(--pp-weight-display); line-height: var(--pp-leading-tight); font-size: clamp(32px, 7vw, 48px); margin: var(--pp-space-6) 0 var(--pp-space-3); }
h2 { font-weight: 800; font-size: var(--pp-text-xl); margin: var(--pp-space-6) 0 var(--pp-space-2); }

p, li { font-size: var(--pp-text-md); }
a { color: var(--pp-accent-strong); }
.muted { color: var(--pp-muted); }

.hero { text-align: center; padding-bottom: var(--pp-space-5); }
.hero img.icon { width: 96px; height: 96px; margin-top: var(--pp-space-6); border-radius: var(--pp-radius-lg); box-shadow: var(--pp-shadow); }
.hero .lead { font-size: var(--pp-text-lg); max-width: 34em; margin: 0 auto var(--pp-space-5); }

.btn {
  display: inline-block;
  padding: 14px 24px;
  border-radius: var(--pp-radius-pill);
  background: var(--pp-accent-strong);
  color: var(--pp-on-accent-strong);
  font-weight: var(--pp-weight-strong);
  font-size: var(--pp-text-md);
  text-decoration: none;
  min-height: 48px;
}
.btn:hover, .btn:focus-visible { filter: brightness(1.08); }
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--pp-ink); outline-offset: 3px; }

figure { margin: var(--pp-space-5) 0; }
figure img { width: 100%; height: auto; border-radius: var(--pp-radius-md); border: 1px solid var(--pp-line); box-shadow: var(--pp-shadow); }
figcaption { color: var(--pp-muted); font-size: var(--pp-text-sm); margin-top: var(--pp-space-2); text-align: center; }

.card {
  background: var(--pp-surface);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-lg);
  padding: var(--pp-space-4) var(--pp-space-5);
  margin: var(--pp-space-4) 0;
}

ul { padding-left: 1.2em; }
li { margin: var(--pp-space-1) 0; }

footer.site {
  margin-top: var(--pp-space-7);
  padding: var(--pp-space-5) 0;
  border-top: 1px solid var(--pp-line);
  color: var(--pp-muted);
  font-size: var(--pp-text-sm);
}
footer.site a { margin-right: var(--pp-space-3); }