@font-face {
  font-family: "Comfortaa";
  src: url("fonts/comfortaa-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("fonts/nunito-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("fonts/nunito-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--pa-bg);
  color: var(--pa-text);
  font-family: var(--pa-font-body);
  font-size: var(--pa-text-body);
  line-height: var(--pa-leading-body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--pa-link); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--pa-focus); outline-offset: 3px; border-radius: var(--pa-radius-sm); }

/* Soft gradient wash behind the hero */
.wash {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40rem 28rem at 15% 10%, rgba(201, 184, 255, 0.45), transparent 70%),
    radial-gradient(36rem 26rem at 90% 20%, rgba(184, 214, 255, 0.45), transparent 70%),
    radial-gradient(40rem 30rem at 70% 100%, rgba(255, 214, 194, 0.5), transparent 70%);
}

.wrap {
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 var(--pa-space-4);
}

header.site { padding-block: var(--pa-space-6); }

.lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  color: var(--pa-text);
  text-decoration: none;
  font-family: var(--pa-font-display);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
}
.lockup img { width: 1.6em; height: 1.6em; }

main { flex: 1; display: flex; align-items: center; }

.hero { text-align: center; padding-block: var(--pa-space-12) var(--pa-space-16); }

/* Animated mark: the bars breathe gently */
.mark { width: 7rem; height: 7rem; margin: 0 auto var(--pa-space-8); display: block; }
.mark rect { transform-box: fill-box; transform-origin: center; animation: breathe 2.8s ease-in-out infinite; }
.mark rect:nth-child(2) { animation-delay: -0.6s; }
.mark rect:nth-child(3) { animation-delay: -1.3s; }
.mark rect:nth-child(4) { animation-delay: -2s; }
@keyframes breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.82); } }
@media (prefers-reduced-motion: reduce) { .mark rect { animation: none; } }

h1 {
  font-family: var(--pa-font-display);
  font-weight: 700;
  font-size: var(--pa-text-hero);
  line-height: var(--pa-leading-tight);
  letter-spacing: -0.02em;
  margin: 0 0 var(--pa-space-4);
  text-wrap: balance;
}

.lede {
  font-size: 1.1875rem;
  color: var(--pa-text-muted);
  margin: 0 auto var(--pa-space-8);
  max-width: 32rem;
  text-wrap: balance;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--pa-space-2);
  padding: var(--pa-space-2) var(--pa-space-4);
  border-radius: var(--pa-radius-pill);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--pa-border);
  box-shadow: var(--pa-shadow-soft);
  font-size: var(--pa-text-small);
  font-weight: 600;
}
.pill .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--pa-grad-purple-peach); }

footer.site {
  padding-block: var(--pa-space-6) var(--pa-space-8);
  font-size: var(--pa-text-small);
  color: var(--pa-text-muted);
}
footer.site .wrap { display: flex; flex-wrap: wrap; gap: var(--pa-space-2) var(--pa-space-6); justify-content: space-between; }
footer.site nav { display: flex; gap: var(--pa-space-6); }

/* Simple content pages (privacy etc.) */
.prose { padding-block: var(--pa-space-8) var(--pa-space-16); }
.prose h1 { font-size: var(--pa-text-h2); }
.prose h2 { font-family: var(--pa-font-display); font-size: var(--pa-text-h3); margin: var(--pa-space-8) 0 var(--pa-space-2); }
.card {
  background: var(--pa-surface);
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-radius-card);
  padding: var(--pa-space-6);
}