/* Primel website — shared styles
   Converted from the Primel.dc.html design (Claude Design).
   Layout is kept as inline styles in each page for fidelity; this file
   holds the reset, base typography, and interactive (hover) states that
   the design expressed via DC `style-hover` attributes. */

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

body {
  background: #F2F5F3;
  color: #111418;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

::selection { background: #CDEFDF; color: #0A201A; }

@keyframes primelFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

a { color: inherit; text-decoration: none; }

/* Header navigation links */
.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: #353C37;
  transition: background .15s ease, color .15s ease;
}
.nav-link:hover { background: #E8EDEA; color: #0F2E26; }
.nav-link.is-active { color: #0F2E26; }

/* Home page legal / support cards */
.card-link { transition: border-color .15s ease; }
.card-link:hover { border-color: #bfcabf; }

/* Brand logo mark */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
}

.brand-mark {
  width: 36px;
  height: 36px;
  display: block;
  border-radius: 10px;
}

.brand-name {
  font-weight: 760;
  letter-spacing: -0.03em;
  color: var(--color-graphite, #111817);
}

/* Footer links */
.footer-link {
  display: inline-block;
  font-family: inherit;
  font-size: 14.5px;
  color: #353C37;
  transition: color .15s ease;
}
.footer-link:hover { color: #0F2E26; }