/* ============================================================
   COMPONENTS — components: block verbatim
   top-nav / button / badge / cavallino mark
   ============================================================ */

/* ---- top-nav-on-dark ---- */
.top-nav {
  background: var(--color-canvas);
  color: var(--color-ink);
  height: 64px;
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--sp-lg);
  border-bottom: 1px solid var(--color-hairline);
}
.top-nav__brand { display: flex; align-items: center; gap: var(--sp-xs); }
.top-nav__menu { display: flex; align-items: center; gap: var(--sp-lg); }
.top-nav__menu a {
  font-family: var(--font-ferrari);
  font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: 0.65px;
  text-transform: uppercase;
  color: var(--color-ink);
  padding: 12px 0;
}
.top-nav__utils { display: flex; align-items: center; gap: var(--sp-md); }
.top-nav__lang {
  font-family: var(--font-ferrari);
  font-size: 11px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--color-muted-soft);
}
.top-nav__hamburger { display: none; }

/* Cavallino-style mark (abstract prancing-lock glyph) */
.cavallino { width: 22px; height: 22px; display: inline-block; position: relative; color: var(--color-primary); }

/* ---- button-primary ---- */
.btn-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-ferrari);
  font-size: 14px; font-weight: 700; line-height: 1.0; letter-spacing: 1.4px;
  text-transform: uppercase;
  border: 0;
  border-radius: var(--rounded-none);
  padding: 14px 32px;
  height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background-color .15s linear;
}
.btn-primary:active { background: var(--color-primary-active); }

/* ---- button-outline-on-dark ---- */
.btn-outline {
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-ferrari);
  font-size: 14px; font-weight: 700; line-height: 1.0; letter-spacing: 1.4px;
  text-transform: uppercase;
  border: 1px solid var(--color-ink);
  border-radius: var(--rounded-none);
  padding: 13px 31px;
  height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}

/* ---- button-tertiary-text ---- */
.btn-tertiary {
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-ferrari);
  font-size: 14px; font-weight: 700; line-height: 1.0; letter-spacing: 1.4px;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: var(--sp-xxs);
  cursor: pointer;
}
.btn-tertiary .arrow { display: inline-block; transition: transform .2s ease; }
.btn-tertiary:hover .arrow { transform: translateX(4px); }

/* ---- badge-pill ---- */
.badge-pill {
  background: var(--color-canvas-elevated);
  color: var(--color-ink);
  font-family: var(--font-ferrari);
  font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 1.1px;
  text-transform: uppercase;
  border-radius: var(--rounded-full);
  padding: 4px 12px;
  display: inline-block;
}